Favicon: A Changing Role

Syed Fazle Rahman

Many developers pay insufficient attention to the importance of favicons and thereby miss an opportunity to make their websites that much more distinctive and memorable.

Far from being just a funny little dinkus propped at one end of a browser’s address bar, favicons today have become a key part of the identity of a website and are used for branding purposes. Proper use of them can help you in creating not only a good first impression among site visitors, but a lasting one.

The concept of favicons was first introduced by Internet Explorer in 1999. They were produced in ICO format and were dropped in the root folder of the domain as /favicon.ico. Since then many things have changed. They are now used for multiple purposes in different devices.

The most basic format of using favicon for a website is as follows:

<link rel="shortcut icon" href="favicon.ico"/>

The rel Property

The important part of the above declaration is the rel property. It is this property which helps the browser identify the favicon and show them properly. Traditional IE browsers used “shortcut” and “icon” both to identify the image and to display it in the browser title and shortcut bar. After the release of HTML5 this has been changed to only “icon” as the global representation of favicon.

The Type Property

The type property can sometimes define whether the browser will display the favicon or not. Internet Explorer sees only the server MIME of the ICO file, otherwise it ignores the file. In general one has to declare the favicon in following ways, for IE:

<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/x-icon">
<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- For IE6+ -->
<link rel="shortcut icon" href="path/to/favicon.ico" type="image/vnd.microsoft.icon">

One of the best upgrades to the use of the favicon in recent times has been the acceptance of PNG files. You can use transparent images with rounded corners as the favicon for your websites. Rounded corners with transparent edges were too difficult to achieve in ICO format. Browsers like Google Chrome and Mozilla Firefox allow the use of PNG favicons.

An important point to note here is that if both ICO format and PNG format are declared the ICO format will be used by all browsers, irrespective of the order in which they are declared.

<!-- Works in Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- Works in Firefox, Opera, Chrome and Safari ->
<link rel="icon" href="path/to/favicon.png">

The Size

Another development in the role of the favicon is the size. Older browsers used 16×16 as the standard size of a favicon while modern browsers allow 32×32 size icons which are later scaled down to appropriate size. IE10 uses the 32×32 size icon to display in the address bar.

<!-- For IE 6-10 -->
<link rel="shortcut icon" href="favicon.ico"/>
<!-- For all other browsers -->
<link rel="icon" href="favicon.ico"/>

With the use of PNG favicons, another new property is added called size” which determines the size of the file specified in the href property. For example:

<link rel="icon" href="favicon16.png" sizes="16x16">

<link rel="icon" href="favicon32.png" sizes="32x32">

<link rel="icon" href="favicon48.png" sizes="48x48">

<link rel="icon" href="favicon64.png" sizes="64x64">

<link rel="icon" href="favicon128.png" sizes="128x128">

In general, Firefox and Safari will use the favicon which comes first in the declaration. Different versions of Chrome have different preferences. Chrome for Windows will use either 16×16 or ICO, whichever comes first. Chrome for Mac will use an ICO favicon if present or else it will go with 32×32 size favicon and scale down to 16×16 for higher clarity in non-retina devices. Opera on the other hand doesn’t have any such preferences; it randomly selects any one from all the favicons presents.

icons

Best Use

Since Internet Explorer does not support PNG files and other modern browsers do, we can wrap ICO files in the conditional statement and leave the PNG files open. For example:

<!-- For IE -->

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- For Modern Browsers with PNG Support -->

<link rel="icon" type="image/png" href="path/to/favicon.png">

But we have an issue in the above declaration! IE 10 doesn’t support conditional statements and neither do PNG files. What should we do now?

We can drop the ICO files in the root directory and make declarations for PNG files only. This way, Internet Explorer will ignore the <icon rel="icon"> and prefer the ICO image in the root directory. Modern browsers will find the <icon rel="icon"> declaration and use PNG files.

For Apple Devices

Apple devices with iOS 1.1.3 and later require a special type of rel property which can be recognized only by such devices. The rel property in such devices use apple-touch-icon and apple-touch-icon-precomposed.

Here the favicons are used not only to display in browsers but also when a website is bookmarked to the apps screen. Such favicons need to be of a higher resolution and custom-made in order to stand out among other apps.

apple icons

<!-- For rounded corners and reflective shine in Apple devices -->

<link rel="apple-touch-icon" href="favicon.png" />
<!-- Favicon without reflective shine -->

<link rel="apple-touch-icon-precomposed" href="favicon.png" />

The value apple-touch-icon-precomposed is used to instruct the device not to add reflective shine to the favicon and use it as it is.

The recommended basic size for Apple devices is 57×57 with 90 degrees corners. For higher resolution screens use 114×114 size images. iPad 2 uses 72×72 size while iPad 3 uses 114×114 for retina display.

For Windows 8

Windows 8 uses the concept of tiles and has the option to pin a website to the home screen. The favicon in such should be of good quality in order to get look good on the screen.

windows8

<meta name="msapplication-TileColor" content="#D83434">

<meta name="msapplication-TileImage" content="path/to/tileicon.png">

Note that in the above declaration I have used the meta tags instead of a link tag. Windows 8 prefers to see the meta declaration for images in the tiles. The msapplication-TileColor tag specifies the colors to be filled in the tile and msapplication-TileImage specifies the image to display at the centre of the tile.

Limitations to favicons

Favicons can sometime create extra traffic for your website due to repeated checking for it in the same location. Sometimes these can even create garbage 404 errors in the log files if not found.

Another important limitation of these favicons is the inability to load the new favicons automatically. This problem is mostly found in older browsers such as IE6-9.

The rel attribute is also not standardized by W3C, so different user agents define their own version.

Favicons have been the main target of many types of phishing attacks and eavesdropping in past such as showing the secured icon when they are not certified to be secured.

These are all points to be taken into consideration when deciding whether and how to use favicons on a website. None of them should stop you using favicons creatively.

Today, favicons have an importance of their own. Their visual impact will continue to grow and you should expect them to grow in functionality, as well.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Liam

    What do you mean by “should use 90 degree corners”? Do you mean no corner radius?

    Also, I’m sure I have read somewhere that a single “.ico” file can be used by all browsers and Windows 8 “Metro” interface, providing it has the right sizes available (16×16, 32×32 and 64×64). Would it be possible to also cater for iOS devices (and potentially Android, and any other OS) using a single “.ico” file?

    • http://www.extremecss.com/ Syed Fazle Rahman

      That’s what I have tried to explain. You have to together use different sizes and different formats to make favicons appear in all the platforms.

      • Liam

        So, no, it isn’t possible to cater for all with a single image.

        Well, that’s rather annoying, and incredibly time consuming for something that should be consistent across all browsers, given their first appearance being more than a decade ago.

  • Steve

    Just wanted to let you know that the spacing of your attributes in the samples got all messed up (e.g. there is no spacing) – might want to tweak that ;-)

    Otherwise thanks for the concise writeup!

    • http://www.extremecss.com/ Syed Fazle Rahman

      Edited. Thanks! :)

  • http://www.mattearly.com Matt Early

    Whoa! I have been looking for an article like this for a long time. I am a huge fan of favicons :)
    One question, is it really best practice to have so many favicon requests on a webpage? Matt x

  • Peter
  • Stephen Bunt

    I have a strong feeling of déjà vu…

    • Stephen Bunt

      Seems the URL I had in my comment was either incorrectly formatted, or moderated out, so it didn’t appear, but what I was trying to get across was that a very similar article called ‘Understand the Favicon’ was published by Jonathan T. Neal on January 16, 2013.

      • http://www.onsman.com Ricky Onsman

        Your link certainly wasn’t moderated out, Stephen. But what’s your point? Are you saying this author plagiarized Jonathan’s article?

      • Stephen Bunt

        Ricky (sorry, can’t seem to reply directly to your comment… there’s no Reply link), it’s not for me to make that determination, but the similarities are remarkable.

      • http://www.onsman.com Ricky Onsman

        I’ve never been a fan of the passive-aggressive approach. Either you think Fazle plagiarized the article or you don’t. If you do, then say so and let the author respond. If you don’t, then why raise it in the way you have?

      • Stephen Bunt

        OK, sorry, clearly, I am a commenting noob. I was actually trying to avoid outright accusation; I felt _that_ was aggressive…

        But, yes, I do think this article is, at least, a paraphrased version of Jonathon’s. It’s probably a bit better structured and formalised. And while it is certainly possible that 2 authors can write similar articles at similar times, without being aware of each other, in this instance it doesn’t appear to be the case.

        I’m not trying to flame or troll here. To me, it appears that one was derived from the other. The code snippets are probably the most telling.

        Check out Jonathon’s version http://www.jonathantneal.com/blog/understand-the-favicon/

        The reason I am concerned about this, is that I had used Jonathon’s post in a discussion here at work and felt that the SitePoint article might further that discussion, but I found it to cover the pretty much the same material in a similar way, which I found disappointing for such a credible publication.

        I’m happy for you to remove this thread entirely if you think it’s unjustified or unfair.

      • http://www.onsman.com Ricky Onsman

        Understood, Stephen. I have read Jonathan’s article (just now, I didn’t know about it before). It seems to me the code samples are the only area where there is duplication of wording. There is a similarity in overall coverage, but that’s not unexpected. I have also seen at least two other articles (one pre-dating JN’s article, one published after it), that use at least some of the same code samples. Being as objective as I can, I can’t see a case for plagiarism, but I’d like Fazle to respond. If we need to add an attribution (the correct way to handle one author using another’s work), then we’ll do that. I’m also happy for this to happen in public – I don’t see a need to hide anything. I appreciate your raising the issue, although it would have been clearer without the smart alecky “deja vu” reference, with or without the link to JN’s article.

      • Stephen Bunt

        All fair points. Thanks for your diligence.

      • Stephen Bunt

        An entirely expected response and I understand you feel aggrieved at the accusation.

        I am happy to acknowledge that your article is well written and informative.

        I used the expression déjà vu – not to be snarky or aggressive – but simply because that was exactly how I felt as I read it. To me, the information and the way it was presented in both articles mimics each other.

        As to your specific queries regarding that I claimed you “copied codes from him”, if I understand what you’re saying, you claim that the code snippets you used came from Wikipedia, not Jonathon Neal. Yet the Wikipedia entry on Favicons does not contain the code snippets used in either of your articles…

        It is certainly true that there may be a limited number of ways of writing that code, and that it is entirely possible to repeat them inadvertently.

        As I have no proof, my initial comment was simply to raise awareness. I did not intend offense.

        A rookie mistake on my part.

        If Ricky is convinced that there is no case to answer, then I concede that, and retract any and all assertions of impropriety and offer my sincere and heartfelt apologies.

        I hope that can be the end of it and I wish you well.

    • http://www.extremecss.com/ Syed Fazle Rahman

      Just saw Jonathon’s article. Stephen can you please respond to few queries which I have?

      You said I have copied codes from him. Can you please tell me a different way of representing a favicon other than the one we both have used? I can’t modify the standards and say something out of the box. Right?

      The point which you have raised is absurd. If you go to wikipedia you will find same codes written that we both have shown. So will you claim we both have copied contents from Wikipedia?

      Man. there are hundreds of websites who have used standard methods to show use of Favicons. You just can’t go say “déjà vu…” to everyone!

      I don’t think my article is plagiarized and Yes, your way of pointing this was “Aggresive”! Thanks.

      • Stephen Bunt

        And to compound my sins, I just realised I have replied to the wrong portion of the thread.

        Please see above…

      • http://www.onsman.com Ricky Onsman

        I’ve had a number of additional comments to this, evenly split in supporting both views on this. None of them has advanced matters in any way, and I don’t see any point in publishing them. This thread of discuission is now closed. If anyone has issues with that, please email me direct at ricky@sitepoint.com.

  • Len

    Thanks, really good article. I will be able to use this at work to bring up favicons, especially with the development of touch screens. I do have one issue I hope you can clarify, it was not clear – to me – what you are saying in the following paragraph:

    ‘We can drop the ICO files in the root directory and make declarations for PNG files only. This way, Internet Explorer will ignore the and prefer the ICO image in the root directory. Modern browsers will find the declaration and use PNG files.’

    • http://www.extremecss.com/ Syed Fazle Rahman

      Thanks for liking it. :)

      In that para I meant, you can upload the ICO favicon file in the root directory of your website and then make favicon declaration of PNG file only in your webpage. This way browsers like IE which do not support PNG favicons will ignore declaration and look for ICO favicon files in root directory. Browsers with support for PNG files like Google Chrome will use the declaration and ignore the file present in root folder.

      • Len

        I get it now.
        Cheers,

  • http://directory-printer.com Luiz Marques

    Nice article. I’ve been bothered with the favicon for my sites for a while, but didn’t realize the new sizes (and PNG method) were available. Thanks.

    • http://www.extremecss.com/ Syed Fazle Rahman

      Glad to know that the article helped you. :)

  • http://creativecactus.in deepali rajput

    Thnxs For sharing this article…its really useful for me…thnx