Everything You Ever Wanted to Know about Favicons
Fifty Favorite Favicons If you have a website, you need a favicon. For those who may not know, favicons are the small, square icons that frequently are associated with websites. Favicons appear in many places, including browser toolbars, bookmarks, tabs, and address bars. Favicons provide immediate visual identification of their represented sites, enabling super-easy navigation for Web users. While surfing bookmarks with fifty tabs open, finding and clicking on icons is far more efficient than reading through piles of link text. Yet, beyond making it easier for people to identify and locate their favorite websites, favicons also play a critical role in site branding and product recognition. Popular browsers such as Firefox, Opera, and Internet Explorer are virtually re-branded when favicon-enabled sites are displayed. For example, observe how willingly modern browsers conform to the image of web designer/developer Jonathan Snook:
Have you seen the new FireSnook browser?
Jonathan Snook rebrands Opera
Who owns the browser now?
Sure, an incredibly strong page design helps in each of these examples, but for the most part, it is the favicon that brings it all together — visually uniting the various browser components into a well-branded browsing experience. Now to provide contrast, let’s consider a hypothetical bizarro world in which faviconless Snook pages are a common sight:
Oh, that’s an Opera browser..
Pretty scary stuff, especially if you are trying to promote a particular brand, theme, or style. The bottom line is that favicons aren’t just for bookmarks anymore.
During web design, I like to think of a site’s favicon as its crown jewel. The final touch, added after everything else has fallen into place. It’s a symbol of accomplishment, completeness, and significance. There is nothing better than bookmarking a new site in Firefox and watching as its favicon struts into place. Conversely, there is nothing worse than pimping a phat row of browser toolbar shortcuts for your favorite sites, only to discover that a couple of them are sadly missing their representative favicons:
..utterly pathetic, in my humble opinion. Even though I keep those two faceless bookmarks in my favorites toolbar, I cringe with disgust every time I happen to click on one of them. Okay, okay — it’s really not that bad, but you get the idea.. ;) This screenshot further emphasizes the importance of using a favicon to represent your website.
Getting down to business..
So, now that we demonstrated the importance of implementing a favicon on your site, it’s time to get down to business, explaining everything you ever wanted to know about the wonderful world of favicons.
Formatting your favicon
Contrary to popular opinion, favicons are not required to be created in
.ico format. Sure, the
.ico format may be the most popular favicon file type, but it is by far the only one. In fact, favicons come in a wide variety of file types. Some of the more common formats for favicons include the following:
..and there are many other possibilities as well, depending on your specific needs. Regardless of file type, favicons are square images that typically are seen in sizes of 16×16 and 32×32, as measured in pixels. Although 64×64 and even larger sizes are possible, browser support is inconsistent for anything greater than 16×16. Generally, 16×16 favicons are more than sufficient, however some browsers such as Microsoft’s Internet Explorer may display favicons at 32×32 for sites bookmarked in favorites.
Fortunately, favicons created in
.ico format may encapsulate multiple images, including unique instances of 16×16, 32×32, and even larger resolutions. This is beneficial when image-scaling may compromise the readability of your favicon. Whereas
.png formats may scale down without loss of image quality, the converse certainly isn’t true.
My advice for selecting the best size and format? Begin with a square image of any size and use it to generate a 16×16-pixel favicon in
.ico format (or any file format of your choice). This is by far the most commonly employed type of favicon, and will serve you (and your site) quite well.
Creating your favicon
Currently, there are several excellent ways to produce top-quality favicons in
- Upload your chosen image to html-kit and generate a complete favicon package automatically.
- Handcraft a customized favicon by using favicon.cc to create your own pixelated work of art.
- Install the favicon plugin for Photoshop and gain complete control over your favicon.
And of course, to create favicons in other, common formats, such as
.png, simply use your favorite image editor and customize any image to fit 16×16 or 32×32 dimensions. Another option, which I have not tried personally, involves creating a favicon in
.png format and then renaming it to “favicon.ico” (i.e., changing the file extension to
.ico). Keep in mind, however, that this method merely disguises the true format and renames it for the sake of ensured browser compatibility. Thus, if you plan on using this trick, remember to serve it as
type="image/ico" or certain browsers may not recognize your favicon as intended (see next section for more details).
Serving your favicon
Once you have created the perfect favicon, it is time to upload it and serve it to your visitors. Begin by uploading your favicon to the root directory (www) of your website. Although other locations are theoretically possible, certain browsers such as Internet Explorer and even Firefox may get confused and ignore your favicon entirely. The traditional and perhaps de facto standard location for favicons is easily the site root.
After uploading your favicon, it’s time to place a call for it in each of your web pages. Favicons are called via the
<link> element, which is located in the
<head> section of (X)HTML web documents. Here is the general format required by the
<link> element to call favicons:
<link rel="shortcut icon" type="image/x-icon" href="http://domain.tld/favicon.ico" />
Let’s look at each attribute of this element, and discuss possible variations.
relattribute tells the browser the purpose of the linked resource. All browsers understand a
relvalue of “
shortcut icon,” but only certain non-IE browsers such as Mozilla and Opera correctly interpret a
relvalue of “
icon.” Thus, using
rel="shortcut icon"is optimal.
typeattribute specifies the MIME type for the linked resource. All browsers understand “
image/x-icon,” but this is only correct if referring to an actual
.ico-formatted favicon. If your favicon is formatted as
.png, the correct MIME type is “
image/ico,” as represented by
hrefindicates the lcoation of the linked resource. It is recommended to locate your favicon in the root directory of your site. If you choose an alternate directory, edit the path of this element to point to the correct location. Keep in mind, however, there is no guarantee that all browsers will recognize favicons located in non-root locations. Also, remember to change the “
.ico” file extension given in the example if you are using a different format.
Thus, assuming we are following the suggested “best practices” for favicon implementation, there are two fundamental types of
<link> elements used to call favicons:
Call favicons in .ico format
<link rel="shortcut icon" type="image/x-icon" href="http://domain.tld/favicon.ico" />
Call favicons in any other format
<link rel="shortcut icon" type="image/ico" href="http://domain.tld/favicon.ico" />
Remember to change the
domain.tld to your domain! :)
- When deciding on a format for your favicon, remember that our old friend IE does not play well with
- When checking your favicon in IE, you may have to sacrifice to idols to make it appear.
- IE 5 may only recognize favicons that are named “favicon.ico”.
- Internet Explorer 6 may only support the
.icoformat for favicons.
- In general, favicons are far more flexibile than IE would have you believe. Other browsers support a mucher broader implementation of favicons, including support for alternate file names, different file types, and multiple file sizes. Non-IE browsers even facilitate the easy loading of the favicon into your browser! Wheee! ;)
No leave the favicon in the root directory and make sure that the HMTL source code is correct for the sub-pages. You also want to make darn good and certain that your browser cache is clear and maybe even restart the browser. For old IE and Firefox (and possibly Chrome) you also need to bookmark the page and restart the browser for the favicon to be displayed.
ok. do I need to add that line of code to other pages?
I have checked the site in IE, and no favicon shows up on any of the pages. I will try closing a restarting the browsers.
Put this in the
<head>section of all your pages:
<link rel="shortcut icon" href="http://domain.tld/favicon.ico" type="image/x-icon" />
And change the “
domain.tld” to that of your site. Then make sure that your favicon is actually at that location (i.e., root) by loading that URL – http://domain.tld/favicon.ico – in your browser.
You should be good to go – just remember to absolutely flush your browser cache and restart browser.
How doi I “to upload it and serve it to your visitors. Begin by uploading your favicon to the root directory (www) of your website. ”??? Could you help me with that? I appreciate it.
@sueli: The easiest way is to use a FTP program to connect to the server on which your site is hosted. Then once you have a connection, upload the file to the directory that contains your site files. Your host should be able to help you with this.
Thanks for this tutorial. It helped me with one of my sites! Good stuff here!
Thanks to you perishable, for the IE conditional statement, been running round in circles for weeks now trying to get a .gif icon to appear in ie8, cleared cookies and everything but nothing worked. Gonna go with a static one now and an animated one in firefox and other browsers? When the new blog post layout gonna appear then?
Hi Pinto and Perishable.
The “missing” favicon issue is actually caused by the latest version (8.0.1) of FF that you may have upgraded to.
Like you, my favicon is missing. And it happened after the upgrade. See this FF support article: https://support.mozilla.com/en-US/questions/890741?page=1
Cor-el from the article offered some code solution to be added. However, I am not sure which wordpress template file this code should be added to. Do you have any pointers / tutorial you can provide?
Hey Sharon, looking at Cor-el’s code, it looks like something that you would add to your browser, so it’s only a local fix and won’t change anything on other people’s browsers. Adding the code anywhere in WordPress will do nothing, unfortunately.