#122: The State of Favicons

Forever we all made 16x16 graphics and got them into the .ico format somehow. I probably used this converter tool a million times. Somewhere along the line it started to get more confusing. Browsers can support .png favicons too. And now there are retina displays, and nothing looks worse on retina than little tiny graphics scaled up. Browsers are starting to support 32x32 favicons now too. What are we to do?

The situation is that if you provide both, many browsers ignore the .png and use the .ico. Jonathan Neal has the whole story. So, let's just use that .ico for both. It's a unique format that is built for handling that anyway.

  • Make both 16x16 and 32x32 version, using your best pixel-crafting skills to hone both
  • Save them out as full quality PNGs
  • Make a new project in Icon Slate (via)
  • Drag the versions into the respective "wells"
  • "Build" to create the .ico
  • Link up that .ico as normal: <link rel="shortcut icon" href="/favicon.ico">


  1. User Avatar
    Permalink to comment#

    very nice – never used Icon Slate, I’ll have to checked it out a little more.

    I’ve used http://xiconeditor.com/ in the past which can output favicon.ico files with both 16×16 and 32×32 pixel sizes – never had any problems!

  2. User Avatar
    Jon Humphrey
    Permalink to comment#

    Chris, I commented on your YouTube listing but I thought I would add the same here:

    …there’s been a lot of work recently on favicon creation, I won’t bore you with the conversation; however, the outcome of this has been a simplified process in Photoshop based on the H5BP FavIcon work and maybe you would like to take a look? Check out the “H5BP-Multi-Layer-FavIcons” repo on my github if you get a chance and let us know what you think?

    H5BP Multi-layer Favicons


  3. User Avatar
    Permalink to comment#

    Oh Chris, this is exactly one week to late. Took me some hours to find out the whole evilness with PNG…

    ICO in multiple sizes is the right way to go

  4. User Avatar
    Tod Robbins
    Permalink to comment#
  5. User Avatar
    Permalink to comment#

    When you googled a favicon generator, you came across this site:

    This is actually then one I’ve used for a long time. It can import PNG files with an alpha channel and make a transparent favicon AND it can merge with a 32×32 and 48×48 icon. All online.

  6. User Avatar
    Permalink to comment#

    Have you considered the problem with multi-icon degradation? This can happen if the same file name exists with multiple name extensions. The web server searches for the file name part and gets confused with the extension and it sends the wrong extension to the browser.

  7. User Avatar
    Permalink to comment#

    I installed this plugin that allows you to save documents in the .ico format in Photoshop a long time ago, and I’ve been using that with success for a while – it’s just nice to not have to rely on another program or site – there are so many different programs in my workflow already!

    Here is the plugin:

  8. User Avatar
    Marius Giurgi
    Permalink to comment#

    Great tips, Chris! Er.. that’s plural, btw, since aside form the ico magic you’re showing I also picked up another great tip (behind the scene) : the fancy tabbed finder you’re using :) yep, now I have the “Total Finder” in my hands :) total awesomeness!

  9. User Avatar
    Permalink to comment#

    The Apple Developer Tool “Icon Composer” does exactly the same for free.

    Thanks for this nice Tut!

  10. User Avatar
    Permalink to comment#

    This seems to work well for Windows if you want to go up to 128px http://sourceforge.net/projects/icobundlextract/

  11. User Avatar
    Court Kizer
    Permalink to comment#

    Or you could do what Apple and everyone else does. Save your favicon as a PNG file in photoshop. Rename favicon.png to favicon.ico. That’s all.

    Nobody is actually using the .ICO format anymore, it just looks that way.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      You should write a blog post about it with research on it that.

      In all the research and reading that I’ve done on this, I’ve never heard of doing it that way. I’d be surprised if “nobody” is using the techniques I present here, which I gathered from other well-researched sources.

  12. User Avatar

    Great post, but still not so sure about the build settings. Should I choose icns (apple icon image) and ico (microsoft windows) or are you saying just choose ico? If so, will this serve an ipad/iphone version too?

  13. User Avatar

    So, regular photo editor programs like Gimp should be ok right? I mean i can take any png scale it down and export it as ICO…. ?

    Note this is also becoming insane. I just noticed that HTML5Boilerplate doesnt include them by default in markup, and furthermore it seems so many more are required:

    as per: http://mathiasbynens.be/notes/touch-icons#sizes

    This is crazy man!

  14. User Avatar
    Permalink to comment#

    Gimp, an open source photoshop type program, can export to .ico, I use it.

  15. User Avatar
    Permalink to comment#

    Came across this article.. Thanks for the input Chris.

    I’ve gave a try to Icon Slate… nice looking and neat app and good price.. though for some reason with transparent icons it creates greyish border/outline along the curves of the shapes.. X-Icon Editor seems still the best one for me..

  16. User Avatar
    Permalink to comment#

    Thank you very much for sharing the link. In fire fox .png or .jpg file shows. But for showing the favicon at Chrome .ico format is must.

  17. User Avatar
    Goncalo Espinha
    Permalink to comment#

    IconSlate’s magic is nice! But does it really work? Is it that simple to make it cross-platform compatible?

    I mean, what about the other bookmark and desktop link favicons (for Opera and even desktop shortcuts)? Can we build a whole .ico file with them all and it simply works?

    This is incredible anyway ;)

  18. User Avatar
    jose reis
    Permalink to comment#

    I use imagemagick way to generate favicons:

    $convert favicon.png  -bordercolor white -border 0 \
              \( -clone 0 -resize 16x16 \) \
              \( -clone 0 -resize 32x32 \) \
              \( -clone 0 -resize 48x48 \) \
              \( -clone 0 -resize 64x64 \) \
              -delete 0 -alpha off -colors 256 favicon.ico

    and you can generate all the required icons, in a heartbeat, using something like

    $convert favicon.png -resize 114x114 apple-touch-icon-114x114.png
    • User Avatar
      Permalink to comment#

      Yes! A designer just handed me two favicon files.


      I created a single favicon.ico file with:

      $ convert Favicon_* favicon.ico
  19. User Avatar
    Hugh Guiney
    Permalink to comment#

    I’m a fan of Icollator, which is free, has a GUI, and does the same thing (minus ICNS support, but that’s irrelevant).

    • User Avatar
      Hugh Guiney
      Permalink to comment#

      Though, it should be noted it only combines existing ICOs into one, not PNGs—but these are easily exportable with the Photoshop plugin.

  20. User Avatar
    Permalink to comment#

    Searching about favicons, I discovered I needed more than 10 kinds of files to work in all browsers and devices :(

    I got tired of creating these files by hand and created my own favicon generator, that create all these files and the correct HTML header for each one of them: http://faviconit.com/

    Please, check it out.

  21. User Avatar
    Milan Balaban
    Permalink to comment#

    Icon Slate is really cool software, however, there is an online free app to do such a thing real quick:

    It combines few png into one ico. There are other options as well.

  22. User Avatar
    Permalink to comment#

    I have successfully converted my pngs (16, 32 and 64 pixel size) to a simgle ico file. I used ConvertICO free online app.

  23. User Avatar
    Permalink to comment#

    The Gimp does a wonderful job. Just create an xcf file with multiple layers, one for each icon size and export it as a .ico file.

  24. User Avatar
    ura soul
    Permalink to comment#

    i first used gimp to do this and created a 90Kb file – which is too big for me.

    so i squished the png layers down and the total came to around 40Kb, which is just about acceptable.
    however, when i reimported the smaller pngs into gimp and output the new ico file, the result was still 90Kb.. which confused me.
    so far i haven’t discovered why this is.

    does anyone know? what size ico files are we seeing from this process?

  25. User Avatar
    Permalink to comment#

    you can use 16×16 32×32 or 64×64 they all work the same

  26. User Avatar
    Permalink to comment#

    I have used a free online icon converter to convert my png image into an icon with multiple sizes. Thing is, the output .ico file is a single file which holds all of these sizes. So, when I upload this icon file to my theme directory, basically I’m assuming it’s taking all of these sizes. And now my icon is not showing. I have read somewhere (also know from previous experience) that icons can take up to a couple of days to show up after you have changed it, but my concern is, do the browsers know to show the correct icon image? Or is this whole multiple-format-in-one-file going to confuse the browsers and not show anything at all? Does anyone know something about this?

    I know this is an older thread but hoping for someone to see my comment …

    • User Avatar
      Permalink to comment#

      Updating the previous comment: Looks like browsers are OK with multiple favicon in one file. It’s working just fine now. For reference, I used http://www.icoconverter.com/ to convert my .png to .ico.

  27. User Avatar

    heres a challenge – how do I add a favicon on a redirected url where i dont have access to the tag or the root server?

  28. User Avatar

    Hi everyone,

    I just wanted to share a resource ive been using for quite some time in creating icons. Real Favicon Generator.

    It’s an awesome service that does EVERYTHING in terms of icon generation, even generating the CSS for you so you dont have to write it out manually, just copy/paste. I took a couple of screenshots using a chrome icon rework off the net just to demo its capabilities.

    When you first upload the image you want to use you are presented with this screen. The first 2 dialogues allow for customization for iOS and windows 8 icons.

    The 3rd dialogue box is where it gets interesting. As you can see, as long as you know the name of the directory you want to store to icons in beforehand, you just specify a relative or absolute path and it will use this to generate your css (ill just call it icons).

    It also allows you options with regards to image compression, and mousing over each option will give you a pixel by pixel comparison capability.

    Finally it gives you a choice of scaling algorithms used. The default is mitchell but as shown in this screen in this instance Lanczos gives a more aesthetic result.

    Once your done tweaking hit generate and you’re presented with the following screen, download the icons, copy the css and you’re done.

    NOTE the homepage says the following:
    Submit a square picture, at least 70×70. Your picture should be at least 260×260 for optimal results.
    I just thought i’d clarify that the 260×260 isn’t the upper limit, the chrome icon i used was 512 x 512 so as long as the aspect ratio of the image is correct you will achieve the desired result.

    If anyone can point out any faults with the service or knows of a comparable desktop program that provides an all-in-one solution, please reply :)


  29. User Avatar

    Looks promising from a first look at it. Thanks for sharing

  30. User Avatar
    Permalink to comment#

    I found this http://faviconit.com/en site. It’s the ultimate favicon generator around. All that is need is for you to export and upload a nice 300×300 png file and it will do all the rest, even supply you the code to put into the head.

  31. User Avatar
    Permalink to comment#

    bookmarked that tool! thanks for posting…

  32. User Avatar
    Michael Roach
    Permalink to comment#

    You seriously summed up my favicon knowledge perfectly by 1:30 lol, I think we all made this journey

  33. User Avatar
    Permalink to comment#

    I’ve tried many sites for favicons and I recommend this http://onlinefavicon.com/ , you can create favicon with drawing tool or generate from jpg file to 16×16 or 32×32 ico file, also you have gallery of favicons from other users, it was easy for use, you have explanation how to set up favicon to your site, try it…

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.