Some of you who reading this article must be thinking , what in the world are favicons anyway? If you thought that, then worry not, you are in the right place. We are not only going to tell you what favicons are, but also why it may be the most neglected but extremely important aspect of branding.
Favicon: an icon associated with a particular website, typically displayed in the address bar of a browser accessing the site or next to the site name in a user’s list of bookmarks.
The word favicon is a portamentau made out of the words “favorite” and “icon”
The envelope icon for Gmail, the whisk icon for My Food Story, the G for Google etc are favicons. If you have bookmarked a website or added them to your home screen, it is the favicon that makes them identifiable as the websites that they are. So that takes care of the what are favicons bit. Now why are they important?
They are important for the exact same reason that any other branding activity is important. And the one word answer to that is ‘recall’. Your audience should hear the name of your brand, company or website, and instantly be able to recall what it is about. Similarly when one is sifting through a sea of bookmarked websites or a million apps on your home screen, the favicon is the only 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 two tabs are publications on Medium, and the last two blogs on Wordpress. But because they do not have unique favicons, it is not easy to distinguish them at one glance from other Medium publications or Wordpress blogs. If you have no favicons at all, it is even worse, becaus then this 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 recognisable 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.
Now how can we can create a favicon for a website?
There are plenty of favicon generators online, where you can convert your brand/website icon into a size favourable for favicons. Alternately you can also do this on photoshop.
For all Cucumbertown bloggers we handle this ourselves. But if you are on the lookout, here are a few favicon generators available online:
- Favicon.cc
- Dynamic Drive
- Favicon from Pics
- Favicon Generator
- Degraeve Favicon
- Anti-Favicon
- Gen Favicon
- Favigen
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. The link below will give you some clarity on this:
At Cucumbertown we take care of this internally. You simply need to upload a favicon on to your blog. The other optimisations are handled internally.
I’m going to explain how this can be done on the Cucumbertown powered food blogs.
Go into the Blog Settings on your dashboard.
Scroll down to the Favicon & Blog Profile section.
Browse for the image you want uploaded. Ideally it should be an image with res of 500/500, square and not transparent.
Once you have uploaded the correct image, scroll down and click on Update Blog to make the changes effective.
Some of you may be wondering why such large images for favicons when they are so small? That’s because this eliminates the problem of low resolution images when webpages are added to a home screen on a phone or a desktop on a laptop or computer. Look at these two CT powered blogs as seen on the home screen of a phone.
All Cucumbertown powered blogs can have their own favicons and they will show up in the above fashion on a phone.
If you have any doubts or require any clarifications, don’t forget to reach out to us at chef@cucumbertown.com. And if you thought this story was helpful don’t forget to hit that Recommend button below.
