Favicons are the little icons that web browsers display next to the URL of a webpage, to show off the logo of the company or organization hosting the site. They have been on the web for a long time, starting with the introduction of Internet Explorer 5 in 1999, way back in the last millenium. Since they’re a standard now, and have proven to be quite useful, most websites today will have a favicon.
Here are some of the favicons from the top 500 most popular websites in the world — see how many of them you can recognize:
favicons and tab congestion
Just as colors have a tremendous importance in establishing the brand of a company both on and off the web, favicons today play a critical role today because of how much time people spend on the web. Undoubtedly, many of you have encountered the phenomenon of “tab explosion”, where an extended web browsing session turns each browser tab into a fraction of its original size.
For this reason, it’s crucial to have a recognizable favicon, to allow the quick visual recall when you have 20 things in your head. Besides being on the tab, favicons appear next to bookmarks, next to URLs, and in many other places related to your website.
favicons and security
There’s also a dark side to the familiarity we have with favicons — since they can be changed on the fly by any Javascript running on a webpage, malicious attackers can change the favicon on a fake login page to make it look even more authentic. This kind of attack is known as “tabnabbing”, and you can read about it more on Aza Raskin’s blog
using favicons as bookmarks
One trick I like to use in Chrome is to just use icons for the sites in my bookmarks that I visit most often, saving space so I can have more bookmarks out at once:
Once you learn the icons, you don’t need the text to tell you which icon is Gmail and which is something else. To set this up, in Chrome you can right-click any bookmark, click Edit... from the menu, and then make the Name field empty and hit OK .
conveying state in the favicon
Some smart web developers have been starting to use favicons as a means of converying information to the user. For example, there is a Gmail Labs feature called “Uncread message icon” that will display the number of unread messages directly though the favicon, conveying added information to the user while using up a minimal amount of pixel space:
adding a favicon to your own site
So, this is cool, how do I add it to my own page?
It’s rather simple to add a favicon to your own site. Traditionally, web browsers have looked for a file named “favicon.ico” in a webserver’s root. So, if you’re Google and you want an icon, you would need to have a file at https://www.google.com/favicon.ico, which they do. Browsers will look here by default.
If you don’t control your entire web page, or want to specify favicons for individual pages on your site, you can specfify an icon to use directly in your own HTML. Just add a link to a 16x16 .ico or .png file in your <head> tag:
<link rel="shortcut icon" href="https://yoursite.com/path/to/icon.ico"/>To support changing your favicon once the page is loaded, for example to create the equivalent of the gmail unread message count feature, you can use Javascript to change the href attribute of the <link> tag. It’s best to give your <link> tag an id so it’s easier to find if you do this:
<link id="favicon" rel="shortcut icon" href="https://site.com/icon.ico"/>And then you could change your icon by using this Javascript function:
function changeFavicon(new_url){
document.getElementById("favicon").href = new_url;
}As for creating your own icons, there’s no need for any fancy software. Just head over to favicon.cc and make one right in your browser.
Have fun, and keep an eye out for sublte uses of favicons in the wild!
