Favicons, and their importance

Your sites favicon is typically the first thing viewers interact with and is the last detail of the sites creation. So, even though it’s the first bit of branding a visitor sees, more often than not it’s something that only gets a small bit of attention or is completely overlooked. How does that quote go? “If you take care of the small things, the big things take care of themselves… ” no truer words have been uttered about your sites Favicon.

So what the heck is a favicon and why should I care? If you’re asking that question, you’ve come to the right blog post. I am not only going to tell you what favicons are, but also why it’s one of the most important elements of your digital branding.

An interesting point here is that the word favicon is a portamentau, for the non english weenies among us (of which I am a proud member) that means it’s a word made out of two words; “favorite” and “icon”

What does a Favicon look like and where can I find them?

To help you ID them here is a visual of the top of a browser. In this case it’s showing some well know brands; the G for Google, the Amazon “A” icon, the “in” for Linkedin, along with the stylized “b’ for bing… you get the picture, these are favicons. You also see a series of favicons in the bookmark bar below the address line. They also get seen in the “Shortcut area below the search bar of a new blank search page in Google.

You should be getting the full picture of why this 32×32 pixel piece of digital real estate is so important. It appears everywhere in modern browsers and it helps to distinguish your site visually from all the others.

If you’ve ever done a multi tab search, bookmarked a website, favorited a site or added them to your home screen, it’s the favicon that gets used to make them visually identifiable. So that takes care of the what are favicons and where do they live.

Now let’s explore why they’re important.

That’s easy, they’re important for the exact same reason that any other branding activity is important: “recall.” Your audience should hear the name of your brand, company or website, and instantly recall what it’s about. Similarly when someone is sifting through the sea of their bookmarked websites, the favicon is the one thing that will help you associate with what website or app you are looking for. Here lies the most important aspect of the favicon. For instance in the image above, without the favicons how can we differentiate between Gmail, Google, Medium etc?

Now look at this.

The first tabs clearly show google, the second Amazon, the third gets lost. Why? Because it doesn’t have a unique favicon, it’s not easy to distinguish it from the others at a glance. If you have no favicons at all, it is even worse, because then that is what it looks like.

Apart from branding, favicons are also important for a good user experience. In the above example for instance, reading can easily help you identify the website. But imagine if you have a 100 pages bookmarked, scrolling and reading through them is harder than simply looking out for the favicon and clicking on that page. And everyone knows that a visual is far more recognizable than text. So this is definitely better for user experience.

It also helps users understand that they are indeed on the right website. After all typos are common and landing up on a website with a familiar favicon can help reinforce trust.

So those are the big reasons why you should be having a favicon on your blog.

So why are Favicons important?

It is your sites entree into the world of search engine results, it becomes the visual brand for your site in the often chaotic and visually overwhelming world of the browser display. Having a unique and well designed favicon allows your site to stand out and be seen and not easily overlooked or forgotten.

It also shows you are paying attention to detail and wanting to give your site a SEO “leg-up” and make sure your site succeeds. The biggest reason to create a favicon is to help promote recall and visual branding

Now how can you can create a favicon for your website?

There are many favicon generators online, where you can convert your brand/website icon into a size favorable for favicons. Alternately you can also do this in photoshop.

Here are some favicon generators available online:

• Gen Favicon
• Favigen
• cc
• Dynamic Drive
• Favicon from Pics
• Favicon Generator
• Degraeve Favicon

Each platform will have a different way of adding favicons. This is a fairly time consuming project on most platforms, because there a few things to be kept in mind while adding favicons. Firstly. it’s not as simple as creating a single generic favicon, different browsers have certain subtle differences. Similarly mobile platforms will also have subtle variations. So these will need to be accounted for while using favicons on your blog or website.

 Important: If you would like to receive a notification when I publish a new post please click here to subscribe to Valley and Associates by Email