homepage Welcome to WebmasterWorld Guest from 54.211.181.45
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Favicon Primer
A Summing-up of Webmasterworld and Beyond
hakre

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 2385 posted 10:19 am on Apr 26, 2006 (gmt 0)

Favicon Primer
A Summing-up of Webmasterworld and Beyond

This primer is about how to create and implement a favicon on your site the best way possible (and why). I needed a research on the topic, so i gathered the forum-wide info and questions together, picked some off the web and added some of my own knowledge. Most of the info is best-practise, because there are no default standards (at least not de-facto). As far as I know, internet explorer started using favicons if you bookmarked a page (they call it: favorites), but that was quite lame. with myie (a tabbed one) it got cooler, because tabbed browsers often display favicons in the tabs. today, most browsers have got favicon support, so it's a must. If you like to see an usage example, grab yourself a copy of opera and play around with tabbed browsing, bookmarking and link dropping anywhere in the userinterface (well, yes, firefox will do similar i guess).

The main problem is, that there are some standarized implementations by the W3C but it's not the de-facto standard. In short, there are the following best-practise recommondations so far:

  • Create an microsoft .ico file with 2 images: 16x16 pixel, 16 colors and 32x32 pixel, 16 colors. Add 256 color images as well if needed.
  • Save it as favicon.ico and place it into your sites root folder.
  • Add the following 2 tags into the head section of your xhtml/html file: <link rel="icon" href="/favicon.ico" type="image/x-icon"/><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>.

    Some more detailed info follows below and there are even some resources what to do if you have no graphical talent or skill to create favicons.

    name:
    favicon (short for Favorites icon), also called website icons or page icons

    fileformat
    .ico is a raster bitmap file format by microsoft, also called windows icon. there is no standard mimetype, most webserver implement it as image/x-icon and the IANA registered it as image/vnd.microsoft.icon. since ms started with favicons, for compability reasons, this file format should be used. But: you can follow the W3C recommendations instead and use any fileformat (like png or gif) by choosing the according mimetype (known to be supported by mozilla). I think it's based on your audience and "real coolness" to have such stuff supported in upcoming Useragents (like RSS-Readers etc. pp.). But this primer is about webpages firsthand, so I skip this.

    For the .ico image format - which is best-practise to be used up to today for websites - there are the following recommendations in more detail as far as known by me:

    image-size:
    16x16 pixel (default), an ico-file can contain multiple sizes, so it's adviseable to include a 32x32 version, too.

    color-depth:
    start with 16 colors to keep filesize small and add 256 color variants if needed. there are miscaleneous approaches by different browsers, some tend to 16 colors, some to 256 colors, but this seem to be more opinion then factB.2.

    filename:
    favicon.ico

    Location:
    In the siteroot (http://www.sample.domain/favicon.ico).

    (X)HTML Tag in HEAD Section:
    To link your html or xhtml file to a favicon, there are some different approaches:

  • Standard: <link rel="shortcut icon" href="/favicon.ico" />
  • W3C Standard "best practised": <link rel="icon" type="image/x-icon" href="/favicon.ico" />
  • DepreciatedA.1:<link rel="SHORTCUT ICON" href="/favicon.ico" />A.3)

    So it is best practise to use just 2 tags:

    <link rel="icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>

    Supporting Bowsers

  • internet explorer (since version 5)
  • mozilla / firefox (incl. gif and png)
  • safari
  • opera

    Why using a favicon?

  • helps to orientate your site users in tabbed browsers (useability)
  • prevents you from getting 404 errors in your logs
  • brands your site in modern browsers
  • will often be saved within the history, bookmarks, links-bars (see your logo as button within opera, firefox etc. - this really helps the user a lot and "looks damn hot")

    Online (Fav-)Icon Editors and Resources
    How to get a favicon at hand? Some Resources from very fast down to your very own ones.

  • Favicon Generator based on text input [antifavicon.com] (Just type in your message.)
  • Search Engine which display favicons in Serps [search.gridwell.com] (Just search for a favicon.)
  • Online Favicon Converter: Dynamic Drive [tools.dynamicdrive.com] (Converts PNG, GIF, JPG and BMP files.)
  • Online Favicon Converter: graphicsguru [graphicsguru.com]
  • Online Favicon Converter: html-kit favicon from pics [html-kit.com]
  • ImageAuthor - Java-Applet Image Editor [imageauthor.com]
  • Photoshop Tutorial about creating a favicon [photoshopsupport.com]

    Icon Applications (Offline)
    Convert your own images into .ico files with there apps and tools:

  • IcoFX [icofx.xhost.ro] (Win; Freeware, Small, Tested: Cool, but no palette matching/import)
  • Adobe Photoshop and Elements plugin [telegraphics.com.au] (Win, Mac; Open Source, Untested)
  • Imagemagick (Linux, Mac, Win; Untested) convert picture.png -resize 16x16! favicon.ico
  • Icon Forge (Win; Untested)
  • IconBuilder (Mac; Untested)
  • Graphic Converter (Mac; Untested)

    Copyright
    In some countries favicons might not be copyright-able at all because the image as a work is too small so there is not enough "creativity in it". Maybe this is compareable to pictures and animations for cell-phone-displays.

    Problems

  • Internet explorer does not show the favicon by default, the icon next to the URL needs to be dragged-dropped over little distance a few times.
  • Sometimes safari has caching issues with favicons [webmasterworld.com] and they do don't show up.
  • Internet explorer does only open .ico files.

    Appendix A: Standards/References

  • A.1W3C: How to Add a Favicon to your Site [w3.org] (start here for further use)
  • A.2Wikipedia (EN): Favicon [en.wikipedia.org]
  • A.3Microsoft: How to Add a Shortcut Icon to a Web Page [msdn.microsoft.com]
  • A.4Webmasterworld Glossary Entry [webmasterworld.com]

    Appendix B: Related Threads:

  • B.1 Favicon Questions (link tag, color depth, browser differences) [webmasterworld.com]
  • B.2 Favicon -- what's the best palette? [webmasterworld.com]
  • B.3 favicon.ico (Graphics Skills Suck... Free Place to have one done?) [webmasterworld.com]

    finally. what's not in this primer is the whole part about finding favicon requests in your logs and how to deal with it. another thing left out is a browser comparison chart about implementing favicons in the different ways and standards. if you're looking for that maybe you can post your own sum-up, these are some additional resources so far:

  • Multiple favicon requests [webmasterworld.com...]
  • Seeing "GET / FAVICON.ICO" in my logs (whats it mean?) [webmasterworld.com...]

    (and a question left open for me: does the link can be relative?)

    //edit:

  • Browser Comparison Chart: [lewisfrancis.com...]

  •  

    encyclo

    WebmasterWorld Senior Member encyclo us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 2385 posted 1:34 am on Apr 27, 2006 (gmt 0)

    That's a great post, hakre! Thanks for the summary!

    I'm unclear on one point, though, you mention that using the rel="shortcut icon" is deprecated, but the referenced W3C article is rather incomplete, suggesting the use of a profile attribute on the opening head tag with the URL http://www.w3.org/2005/11/profile - which is a non-existent page (and profile links in general are deseprately under-defined anyway).

    Is there any particular advantage/disadvantage to either of the two proposed linking methods? Also, does the presence or absence of an explicit link in the markup make any real difference if the linked icon uses the standard favicon.ico name and is stored in the root folder?

    hakre

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2385 posted 6:31 am on Apr 27, 2006 (gmt 0)

    thanks, i think sometimes my english needs to improve.

    Is there any particular advantage/disadvantage to either of the two proposed linking methods?

    the one is accepted by internet explorers ("shortcut icon") the other one by others (and by others in the future since this is not marked as depreceated). so the advantage is, that it is no problem to use both and keep in touch with upcomming implementations with ease. (i only hate that these are some more bytes in each request!)

    in general you can use the link element to identify one favicon per html / xhtml document, so theoretically, you could change that on a per document basis.

    Also, does the presence or absence of an explicit link in the markup make any real difference if the linked icon uses the standard favicon.ico name and is stored in the root folder?

    the proposed points at the beginning (favicon.ico, root folder and link-tags) is just the combination of the whole to play safe. i can imagine for example that a useragent is not requesting the favicon if the link tag is missing. or an older browser request each time just in the root folder for a file called favicon.ico blindly but it would not if the tag exists. but maybe this could be part of a comparison chart which needs to be researched in that detail first.

    and for answering this completely: you can use the link in the markup to use a favicon on another server/ other filename. just put [sample2.domain...] in it for example.

    the "missing" profile looks like a small mistake in the w3 article only not to mention that it does not exists as file. [w3.org...] has more info about profiles, they even do not need to be retrieved at all, so it can be an URI "as is" only.

    limbo

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2385 posted 9:20 am on Apr 27, 2006 (gmt 0)

    Hi HakreHakre - excellent post - surely a library contender.

    One thing I to add - I find that I get better cross browser results if I use an absolute link to the favicon rather than a relative.

    E.G. <link rel="icon" type="image/x-icon" href="http://mysite.tld/favicon.ico" />

    Somebody feel free to jump in and debunk this theory cos I have not done any significant testing, but for those sites that I have done this it seems to hang around in the cache for a little longer...

    larryhatch

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2385 posted 9:59 am on Apr 27, 2006 (gmt 0)

    Hi Hakre: Some confusion here. You wrote:

    # Create an microsoft .ico file with 2 images: 16x16 pixel, 16 colors and 32x32 pixel, 16 colors.
    Add 256 color images as well if needed.

    # Save it as favicon.ico and place it into your sites root folder.

    - - -

    You are describing two or possibly three images; 16x16, 32x32 and a possible 256 color job too.
    WHICH ONE is saved as favicon.ico? All three? I can't get my head around that.

    I have a single 16x16 favicon image saved as favicon.ico in my root directory at host ISP.

    I have NO <link rel="icon" stuff in my HTML at all.

    Am I doing this all wrong? -Larry

    bcolflesh

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2385 posted 1:17 pm on Apr 27, 2006 (gmt 0)

    For the Icon Applications (Offline) section:

    GIMP will save several image types in the various .ico color depth formats.

    GeneVincent

    10+ Year Member



     
    Msg#: 2385 posted 1:21 pm on Apr 27, 2006 (gmt 0)

    I find that I get better cross browser results if I use an absolute link to the favicon rather than a relative.

    A few days ago I notices that bloglines wouldn't update the favicon on a feed with a relative link, but nicely updated it after I used the absolute URL.

    So, yes, that seems to bring you on the safer side.

    jdMorgan

    WebmasterWorld Senior Member jdmorgan us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 2385 posted 1:31 pm on Apr 27, 2006 (gmt 0)

    You are describing two or possibly three images; 16x16, 32x32 and a possible 256 color job too.
    WHICH ONE is saved as favicon.ico? All three? I can't get my head around that.

    Both 16x16 and 32x32 image sizes are saved in the .ico file -- It is a defined part of the format.

    For an example, drag the WebmasterWorld favicon from your browser to your desktop. While it shows as a 16x16 image in the browser address bar, it will appear as a 32x32 image on your desktop.

    Jim

    moltar

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2385 posted 1:45 pm on Apr 27, 2006 (gmt 0)

    Isn't rel="shortcut icon" is the same as declaring two separate <link>'s with rel="shortcut" and rel="icon"? Sort of like having two different CSS classes class="widget sale"?

    Sweet Cognac

    10+ Year Member



     
    Msg#: 2385 posted 1:56 pm on Apr 27, 2006 (gmt 0)

    I dragged the webmasterworld icon to my desktop and it showed up as an Internet Explorer icon. Why?

    But, still nice to know you can do this, thanks for the tip.

    Leonard0

    5+ Year Member



     
    Msg#: 2385 posted 3:22 pm on Apr 27, 2006 (gmt 0)

    Another advantage of using favicons is that it shows how many visitors find your content interesting.
    AWS stats tabulates the percentage of visitors that clicked on "Add to favourites".
    My favicon stats range from 20% a couple years ago to 10% more recently.

    Tastatura

    5+ Year Member



     
    Msg#: 2385 posted 3:31 pm on Apr 27, 2006 (gmt 0)

    very nice post!

    sweet cognac wrote:
    I dragged the webmasterworld icon to my desktop and it showed up as an Internet Explorer icon. Why?

    Grab the icon from the toolbar (drag operation), move your mouse around a bit but don’t release mouse button. Now ‘put it back’ in the tool bar – watch icon change from default internet explorer to WW icon. Now drag it to your desktop (and this concludes our daily fun with IE :) ).

    sgaze

    5+ Year Member



     
    Msg#: 2385 posted 3:38 pm on Apr 27, 2006 (gmt 0)

    Could you explain me what is the method used by google to show the "G" icon there : https://www.google.com/adsense/

    I didn't see any <link rel="icon"> tag in the source code of this site.

    Brian_M

    5+ Year Member



     
    Msg#: 2385 posted 4:46 pm on Apr 27, 2006 (gmt 0)

    >>I didn't see any <link rel="icon"> tag in the source code of this site.

    You don't really need anything like this in the source code. Just put the favicon.ico file in the root, and it will appear until the next time that Microsoft updates IE (and all of the icons disappear).

    Then you will need to remember the great tip above from Tastatura about dragging the default icon around (you may also need to close your browser and start it up again to see the result).

    :)

    Brian_M

    5+ Year Member



     
    Msg#: 2385 posted 5:26 pm on Apr 27, 2006 (gmt 0)

    P.S. The only time you need that code is when you want to put the icon in a subdirectory other than the root, or give it a name other than "favicon.ico," such as:

    <link rel="icon" href="/s/msn.ico" />

    This code is on MSN's search site (but you may still need to play the dragging game to see it in IE).

    :)

    Oliver Henniges

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2385 posted 6:09 pm on Apr 27, 2006 (gmt 0)

    Great summary, indeed.

    Two questions, one of which BrianM seems to have answered implicitly:

    1) All my favicons have dissappeared one by one from my ie-favourites. Is that really due to MS-updates?

    2) What do requests for favicons in the logfiles actually say: Does it mean that
    a) someone has put my site to his/her favourites/bookmarks? or
    b) simply someone has visited my site with his/her browser looking for a favicon at any time?

    hakre

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2385 posted 7:39 am on Apr 28, 2006 (gmt 0)

    limbo:
    I find that I get better cross browser results if I use an absolute link to the favicon rather than a relative.

    Thanks for the feedback. As I wrote at the end, i am really unsure about this behaviour (relative/absolute). As far as i know, i run into some probs using a "real" relative link like "../../favicon.ico" which seems not to be parsed rightly by some UAs because i got this exact same link (with dots) in my access logs. Most modern webservers will redirect that today because of traversal attacks, but anyway that tends me to say that absolute seems to be more failsafe here. Because of this (and the other suggestion about using the rel attribute for two types of relations at once) I need to study the link documentation a bit more.

    Anyway, I researched all this for best practise so, I need to add that there should be an absolute URI in it, even if the docs [w3.org] say that's not intended.

    bcolflesh:
    For the Icon Applications (Offline) section: GIMP will save several image types in the various .ico color depth formats.

    Yes, GIMP, shure! If you have not already, grab yourself a copy, great piece of software. I installed the GIMPshop variant which is easier to handle if you're used to photoshop. This is great for palette manipulation, sizing, pixeling etc. if you really want to do the graphical work on your own.

    moltar:Isn't rel="shortcut icon" is the same as declaring two separate <link>'s with rel="shortcut" and rel="icon"? Sort of like having two different CSS classes class="widget sale"?

    I just recently learned that this works for class= (gosh, doing straight html webdesign since 2.0 - and you keep digging with webmasterworld!) and that's what's in the docs:

    The value of this attribute is a space-separated list of link types.

    Source [w3.org]

    So it might be just straight to only use one (1) link-tag. Thanks moltar to point that to me. and for best practise I assume that standard compilant browsers will work that out perfectly anyways, so the rel="shortcut icon" is not as deprecated as I thought.

    Oliver Henniges:
    All my favicons have dissappeared one by one from my ie-favourites. Is that really due to MS-updates?

    I am not aware of any specific MS update that disables favicons, but I don't pay that much attention to IE anymore. Since MS disables something from time to time within the Browser I won't worry about such things within that proggy so much. Normally I would think, that the Icon is removed from cache or something like that. Re-Visit the page and will come up again maybe.

    What do requests for favicons in the logfiles actually say: Does it mean that
    a) someone has put my site to his/her favourites/bookmarks? or
    b) simply someone has visited my site with his/her browser looking for a favicon at any time?

    both can be true. a) is true for internetexplorer (not really true, becaue you don't need to bookmark it to let IE fire the request, just drag-drop a bit as described above). b) seems to me the best interpretation, because someone even visits your site if he/she is bookmarking it. but anyway as of today it might be an rss reader, another blogging website or similar so I won't speculate with favicon request data too much. It might be interesting to investigate on a specific site or for specific requests (combined with UA headers) but for a general propose I would tend to say it means that someone visits your site.

    hakre

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 2385 posted 8:15 am on Apr 28, 2006 (gmt 0)

    gosh this time limit on edits didn't give me enough time to make a phonecall and edit my recent post to add the following:

    ERRATA

    As written in the best-practise recommondations at the beginning of the document:

  • Add the following tag 2 tags into the head section of your xhtml/html file: <link rel="icon" href="/favicon.ico" type="image/x-icon"/><link rel="shortcut icon" href="http://www.sample.domain/favicon.ico" type="image/x-icon"/>.

    (blue added, red removed)

    and the (X)HTML Tag in HEAD Section should be changed according to the discussion.

  • DoingItWell

    10+ Year Member



     
    Msg#: 2385 posted 3:00 pm on Apr 28, 2006 (gmt 0)

    hakre, re: programs to create icons with - I use Irfanview, either to create the .ic from a 32x32 graphic created elsewhere, or to directly create a blank 32x32 graphic and save it as .ico. I've never bothered with the 16x16 size.

    jo1ene

    10+ Year Member



     
    Msg#: 2385 posted 6:45 pm on Apr 28, 2006 (gmt 0)

    Great post. The list format is very helpful.

    I don't have a great way of cretaing favicons so I have a blank one on hand and upload it for the sake of avoiding 404 messages. Boy, they can pile up!

    getxb

    5+ Year Member



     
    Msg#: 2385 posted 4:34 am on Apr 29, 2006 (gmt 0)

    A very well compliled post on favicon. Thanks

    Demaestro

    WebmasterWorld Senior Member demaestro us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 2385 posted 8:39 pm on May 1, 2006 (gmt 0)

    Thanks for the great post. I have had my favicon.ico on all my sites for some time but I was not aware that you could use the <link> tag as well.

    Yes it works without it, but switch icons or add one where there wasn't one before and you will see that without the <link> tag it takes a long time to detect it where as it seemed faster with the <link> tag.

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved