Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security
BBQ Pro: Block Bad Queries
BBQ Pro: The fastest firewall to protect your WordPress.
Related Posts

Everything You Ever Wanted to Know about Favicons

[ Image: Fifty of my Favorite 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:

[ Image: Snook favicon in Firefox ]
Have you seen the new FireSnook browser?
[ Image: Snook favicon in Opera ]
Jonathan Snook rebrands Opera
[ Image: Snook favicon in Internet Explorer ]
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:

[ Image: Snook page without a favicon as seen in Opera ]
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:

[ Image: Firefox toolbar featuring missing 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:

  • .ico
  • .gif
  • .png
  • .jpg

..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 .gif and .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 .ico format:

  • 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 .gif and .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 .gif or .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.

rel="shortcut icon"
The rel attribute tells the browser the purpose of the linked resource. All browsers understand a rel value of “shortcut icon,” but only certain non-IE browsers such as Mozilla and Opera correctly interpret a rel value of “icon.” Thus, using rel="shortcut icon" is optimal.
type="image/x-icon"
The type attribute 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 .gif, .jpg, or .png, the correct MIME type is “image/ico,” as represented by type="image/ico".
href="http://domain.tld/favicon.ico"
The href indicates 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! :)

Footnotes

  • When deciding on a format for your favicon, remember that our old friend IE does not play well with .png.
  • 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 .ico format 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! ;)

About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
WP Themes In Depth: Build and sell awesome WordPress themes.

33 responses to “Everything You Ever Wanted to Know about Favicons”

  1. Perishable 2008/05/28 5:11 am

    HepCat_, I am not entirely sure what you mean.. As far as I know, favicons are delivered via a directly associated page using a link element. 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?

  2. They are links that use JavaScript to build the link on the client side. (href=javascript:functions) Due to the fact that the URL isn’t assembled until it gets to the client’s browser I was wondering if there were any other ways to force a favicon on a link.

    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.

    Suggestions?

  3. Perishable 2008/05/31 3:01 pm

    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 <link> elements dynamically added to the target page. Otherwise, if you must associate favicons to the links before the page is loaded in the browser, or for links that do not target actual web pages, it may be possible with some custom JavaScript, but that goes beyond my level of expertise.
    I hope this helps!

  4. Amyobus Key 2008/06/23 6:45 am

    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.

  5. Perishable 2008/06/23 4:08 pm

    @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" />
    <!--[if IE]>
    <link rel="shortcut icon" href="http://domain.tld/path/favicon.ico" type="image/vnd.microsoft.icon" />
    <![endif]-->

    ..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!!

  6. Hello,

    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?

    Thanks

  7. @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 frameset document, assuming of course that I understand you correctly.

  8. Hi,

    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…

  9. Thanks so much, you’re the most detailed post about this subject I found! And I searched like nuts!

  10. neat post!!!

    any idea why my favicon shows up on my main page, but sub pages like /photos etc it’s missing?

    Mike
    http://www.jumpingbook.com and http://www.jumpingbook.com/photos for the example

  11. @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.

  12. 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?

    thanks!

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.