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! ;)
HepCat_, I am not entirely sure what you mean.. As far as I know, favicons are delivered via a directly associated page using a
linkelement. Text links, or any kind of links for that matter, may be associated with other types of icons, but not favicons. If there isn’t a “landing page”, does that mean that the links are involved in pop-ups or Ajax functionality?
In this instance I ask the user to drag these links into their bookmarks toolbar. I would like to have an icon on these links but I don’t think there is a way to accomplish this.
Hmmm, I think I understand now..
If the links that the users are adding to their bookmarks toolbar are pointing to actual web pages, I would look into adding the favicons via user/link-specific
I hope this helps!
Something else you can have fun with is the creation of the animated and transparent favicon, which are active in both Netscape and Firefox. Because Internet Explorer want’s the stuffy old static favicon, you have to have an IF construction in your Head Section when calling up the favicon. Check out our link above for complete details and be sure to view our site in both IE and Firefox just to see what happens when a favicon comes to life.
@Amyobus Key: very nice tutorial — thank you for sharing it with us! For the record, I am going to post the required
<link>attributes and the conditional IE call for easy reference:
<link rel="icon" type="image/gif" href="http://domain.tld/path/filename.gif" />
<link rel="shortcut icon" href="http://domain.tld/path/favicon.ico" type="image/vnd.microsoft.icon" />
..and, for anyone interested in reading the full story of how to implement dynamic favicons on your own site, check out Amyobus Key’s excellent tutorial, Creating the Animated Favicon. Five stars!!
Pretty nice toturial :D (and ABSOLUTELY ASTONISHING website!!! :D)
anyway… i have a question:
Is there a way to force a favicon to appear from within a frame?
@Mario: Thanks for the positive feedback — much appreciated! :) To answer your question, I think all you would need to do is link to the favicon on the
framesetdocument, assuming of course that I understand you correctly.
Thanks for your reply :)
that’s what i thought to… but since i don’t have anyway to configure that page (it belongs to the service!) it makes it impossible to set an favicon…
My only hope was that you knew about a script or some other way around to make it appear without touching that frame set…
Anyway… thanks for your reply…
Thanks so much, you’re the most detailed post about this subject I found! And I searched like nuts!
any idea why my favicon shows up on my main page, but sub pages like /photos etc it’s missing?
http://www.jumpingbook.com and http://www.jumpingbook.com/photos for the example
@Mike: I think the URL you’re using for the favicon path is messing things up:
<link rel="shortcut icon" href="Mike Hedge's Jumping Book/favicon.ico" />
It’s like that on both pages, but the home page is showing the favicon anyway because that is the default behavior (when favicon is in root of site).
Fix the path and you should be good to go.
ok. in the header.php I changed it to the line of code you just gave me…. it works for the main page… but sub pages like /photos or /tour still show now favicon in the Chrome browser.
should I also put the favicon also in another folder?