The Favicon. A (really) tiny picture worth a thousand words.

Whenever you visit a website, chances are you’ll notice a small icon in the upper right or left-hand corner of the browser tab (depending on whether you’re in Chrome, Edge or Safari, Firefox etc).

This tiny identifier is known as a favicon, and no website should ever be without one.

Why? Because the favicon is what helps users quickly identify your website among a sea of open tabs. And this is a big deal today, since according to Google, the average person has upwards of eight tabs open at a time in a work setting (up from just five a couple of years ago).

Ian, our MD, typically has more than 80 tabs open at once, which is surely indicative of some deeper psychological issue, but that’s a different blog post. The fact is, even your more normal customers are multi-tasking while they consider signing up for your event. The favicon is the beacon that guides them back to your agenda or your registration page after they switched away momentarily to search ‘things to do in Lisbon’ or ‘are labradoodles hypoallergenic’.

That’s not all. Favicons also make it easy for users to locate your event website in their browser history. And search engines will pick up a correctly formatted favicon file to display next to matches in Search Engine Result Pages (SERP).

All of this means your event is easier to find for prospective attendees, and the more they see your favicon, the more familiar they’ll be with your event brand.

And yet! Literally every week, we see at least one event website without any favicon set at all, and we probably see a couple more with tiny, compressed, unreadable versions of the organiser’s logo that look terrible. Either mistake risks making your online presence look amateurish or even less than trustworthy.

This is both bad and easy to fix.

So let’s take a quick look at how favicons work, how to make a really good one, and what to ask your web developer / event platform / content management system provider if you’re not currently making the best use of that 16x16px patch of prime digital real-estate.

What actually is a favicon?

At its most basic, a favicon is just a little graphical file – usually a smaller, simplified version of your organisation or event logo, or an icon that ties to it in some way, which can be accessed directly by a host of different web browsers and search engines to be included in their interface or page.

Why then, you might ask, do lots of web sites get favicons wrong? Well, the fact that they are so tiny and must be usable by multiple different external applications means that there are some specific requirements around how favicon files are formatted and sized, and how your event site makes these files available to Chrome, Safari et al.

And sadly, some event platforms don’t let you set a favicon at all. Others make it difficult. Some literally take your logo and just squash it down to a tiny size – regardless of how detailed. This is the digital marketing equivalent of applying makeup while riding on the back of a motorcycle.

If you’re using a super-graphic ultra-modern platform like AttendZen, all the following complexity is taken care of automatically by our clever software. Our customers import one favicon graphic and we automatically create all the files in the appropriate sizes and serve them to the various applications. Go us!

But if you’re still one of our future customers, here’s what you need to know when you speak with your designer / developer about matters favicon.

Favicon formatting

Annoyingly, there are several different file formats in which you might want to supply your favicon. This is because different people use different browsers of widely varying age – depending on factors like which country they’re in.

Here are the formats you should consider serving:

PNG (Portable Network Graphic)
Start here. This is the most popular choice overall for favicons because it supports transparency and delivers good results across most modern browsers. A PNG file is recommended for those seeking high-quality results using traditional graphics and images.

ICO (Windows Icon)
Old School. Best for markets where older browsers are likely to be in use. ICOs can store multiple image sizes within one file but are in declining use in more advanced western markets today. You can easily find free converters online that let you upload your own traditional image file and convert it into a Windows ICO file for a favicon.

SVG (Scalable Vector Graphics)
Offers resolution-independent scaling, ideal for sharp icons on any screen size, but may not be supported by all browsers yet.

JPGs are probably the image format most of us use every day for photos and graphics – but they are a bad idea when it comes to serving favicons. JPGs typically lose a significant amount of quality and definition when edited and resized. And they don’t do transparency. Not what you want for a crisp, professional-looking favicon.

Favicon sizes

Favicon dimensions vary based on where they’re being used. The most common favicon size is 16x16 pixels. This is the size used in pretty much all browser tabs. But we serve this size with a 32x32 pixel file to make sure it’s sharp on modern, retina screens. Then there are places, where the favicon needs to be served at other sizes to avoid pixelation. In a nutshell:

Again, our tech automatically creates the commonly used sizes and formats of your artwork and serves them such that the browser can select the most appropriate one for the device and context required.

If you don’t have this luxury, your designer may have to supply several different files to cover the above applications to the right resolution. But’s it not a big job and it’s well worth the effort.

Keep in mind, if your favicon appears outdated, blurry or grainy, users might get the impression that you’re unprofessional or that your event is not to be taken seriously. Expectations are high in digital marketing today. Small details like this can have a disproportionate effect – positive or negative.

Designing a lovely favicon

Now for the creative part!

Obviously it’s up to you whether you get a professional designer to create your favicon, or whether you have a go at doing it yourself. If you opt for the latter, there are plenty of powerful tools out there that can help.

But, as a professional designer, here are my top tips:

A favicon may look similar to your logo design, but it doesn’t need to be identical in order for it to be effective. The trick is to imbue the favicon with your brand’s trademark style, perhaps a recognisable component from the logo, and make it look good within a 16px by 16px space.

Most logos consist of both a brand mark and a wordmark. In these cases, just the brand mark would usually be used for the favicon. In our case, there’s no way we could make the AttendZen logo work at 16x16 pixels, so we just use the Z with the little smile device, on a colourful disk.

Make sure what you do is recognisable as your brand, even from a distance. Your favicon will be the smallest representation of your brand you ever make, so keep it as simple as possible. Avoid using complex text or intricate linework when creating a favicon. Less is definitely more.

Focus on branding at the most basic level. Your favicon does not need to contain your whole brand identity, but it absolutely must tie in with it. Shape and colour are the easiest way to do this. And don’t try to be subtle in 16px! Forget shading and texture. Think bright colours and a single, identifiable form. Limit the number of colours. Too many colours are difficult to interpret in such a small graphic.

Avoid text at all costs. It will be impossible to read any kind of word at the size of a favicon. Utilising the first letter of the brand name can work well, as can initials. But realistically, two characters should be your limit. The goal is to strengthen, not obscure the brand. The challenge is to encapsulate the essence and leave out everything else.

If you can, consider using a transparent background behind your favicon, rather than flooding the entire 16x16 square tile with colour. Transparent favicons also give more flexibility since they can be deployed just about anywhere without interfering with the background colours of a website, browser interface or device.

Your favicon might be (literally) the smallest detail of your digital event marketing activity. But it’s important to get it right – and to check how it comes across on different devices and browsers.

Get it wrong and you risk looking unprofessional. Get it right and not only do you reinforce your event brand, you maximise your chances of staying front-of-mind with prospective attendees while they finalise their decision to register.

Not bad for 256 pixels.