A Favicon is the little graphic image, or icon, that you have seen in your browser tabs or on your bookmarks list. Sometimes, it also shows up in your search results, depending on the browser.
The term, favicon, is derived from the two words that make it up: “favourite” and “icon”. A favicon is a Favorite Icon.
The favicon is also known by the following terms:
- shortcut icon
- website icon
- tab icon
- URL icon
- bookmark icon
… and now the term starts to make sense.
History of the … Favicon?
The first time we saw a favicon being used was in March 1999, which was not that long after Google appeared on the scene. Microsoft launched Internet Explorer 5 (IE5) and favicons were used in the bookmarks section to help people recognise the sites they were interested in.
It’s probably worth mentioning an interesting side effect of the original use of the favicon, as similar side effects are used today for similar purposes.
If the favicon was going to be displayed in the bookmark list, the image file had to be requested from a server. This is because favicon images aren’t stored locally, but the favicon image address is. Requesting for the favicon image file would indicate to the website owner that the site had been bookmarked, which is useful information to have. Interesting, and useful in its day, but it doesn’t work now.
There is a lesson to be learned here, like most industry frameworks, the internet is dynamic.
Just because something works today is no reason to suppose that it will work the same way forever.
Branding and Visibility
A favicon is part of your brand. It’s not very big and your site will work without it, but it shouldn’t be dismissed … it helps to make your site easier to find.
A favicon is mostly associated with a whole website. It is used as a site-wide branding device and appears in the tabs, in the bookmarks and in search results. This is the standard approach but it doesn’t have to be. If the need arises, a favicon can also be associated with individual web pages. Don’t ask – I don’t know how to do that.
Your favicon should match the look and feel of your website, in colour and style. It’s part of your brand. I wouldn’t profess to be an expert in colours, but these aren’t quite the colours that I started with.
You can see my original “pretty” colour scheme here. I took a snapshot of all the blog pages at three weeks, including the original favicon. Looking back, I am now thinking that it wasn’t that pretty.
Even though I changed the colours of favicon, leaving behind the “pretty” reds and bubbles, I kept the design.
Did I say? … It’s all part of your brand.
How big is a Favicon?
The standard size for a favicon in 1999 was 16×16 pixels. The standard is now 32×32, so four times as many. Some browsers that can’t support 32×32 will downgrade the favicon to 16×16, losing some of the definition.
The small physical size of the favicon means that they work best with simple images.
The Blogging Beginnings! favicon is shown here – at the top of the Google Chrome browser – and consists of three letters, coordinated with the site colour scheme, on a white background.
What does a Favicon do?
Humans are visual creatures and a recognisable and memorable favicon will add that little extra. A favicon can help your visitors pinpoint your site, especially when they have several tabs open. Have a look at the dullest blog in the world, it doesn’t have a favicon!
Where does a Favicon go?
The internet is evolving all the time … and I’m sure that hasn’t come as a surprise to anyone. Not surprisingly, then, the favicon has got bigger, although it’s never going to be huge. It has grown and it has extended its field of influence from the bookmarks list in IE5 to the tabs and search results – and front pages – of modern browsers.
This is how the beginner.beginner.beginner.beginner.beginner.beginner.beginner.beginner.blooger.me favicon appears in my bookmarks list. I think this one is from Google Chrome, but Safari is similar, and I’ve just had a look at Firefox and can report the same.
Favicons also appear on the browser tabs, but apparently not in Safari … unless I have missed a setting somewhere. So I am looking at the favicon on Chrome and Firefox. The favicon you design may be solid or transparent. I have tried both and for my favicon, it doesn’t really make a lot of difference. The solid background displays as a square, with the favicon logo in front. A transparent background means that only the logo (or in my case, the letters) can be seen. It all depends on how you want it to look and the favicon is one small part of your site’s look and feel. It’s small but it is worth thinking about.
Ok … a real-time update as I write this.
I remembered that Google is my friend and so I googled “favicons on safari”. Apparently, there is a tick box in the tabs section of the preferences menu that turns “website icons” on and off. Who would have thought it? It is now solved! Safari does display favicons … or website icons.
Some internet search engines are now displaying site favicons on the search results page.
According to the sitechecker.pro website, Google began to implement this on the Chrome browser in late 2019 – fairly recently, I’m sure the others will soon be following suit.
The favicon can also pop up on mobile browsers, so it’s worth thinking about.
Why does it matter?
The favicon is one of those little things that you probably don’t notice … until they aren’t there. They may be little – 32×32 – but they are not insignificant. Your favicon is another little bit of your site ID, which is why I think that you should be sticking to one per site rather than one per page – if one per page is possible.
Favicons are there to help your visitors identify your site, especially in bookmark lists and congested browsers. If you have a lot of tabs open in the browser, the words disappear.
Without your favicon, there is no way of identifying your site.
To illustrate the point, should you need the point to be illustrated, here’s what a congested world without favicons would look like.
It looks like browsing without favicons could be hard work.
Graphics might well be better received than text because we are all visually-oriented creatures, but in the absence of text, the graphic is all that we have to go on.
The favicon takes the place of the text.
One picture is worth ten thousand words
Ancient Chinese Proverb (maybe)
What have we learned?
Favicons appear in bookmark lists, browser tabs and the results from search engines.
A favicon might be little, but it is a big part of your brand.
Favicons have been around since IE5 in 1999.
Favicons help your visitors return to your site.
Not all favicons are called favicons.
The Blogging Beginner