Grow your CSS skills. Land your dream job.

#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">

Comments

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

    Jon

  3. 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. Permalink to comment#

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

    http://tools.dynamicdrive.com/favicon/

    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.

  5. fogor
    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.

  6. 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:

    http://www.telegraphics.com.au/sw/product/ICOFormat

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

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

    Thanks for this nice Tut!

  9. Caleb
    Permalink to comment#

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

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

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

  11. Charlie

    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?
    Thanks

  12. Tony

    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!

  13. Antache
    Permalink to comment#

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

  14. Alex
    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..

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

  16. 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 ;)

  17. 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
    
    • Permalink to comment#

      Yes! A designer just handed me two favicon files.

      Favicon_16x16.png
      Favicon_32x32.png
      

      I created a single favicon.ico file with:

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

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

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

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

    http://convertico.org/Multi_Image_to_one_icon/

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

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

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

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

  24. daniel
    Permalink to comment#

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

  25. 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 …

    • Maliha
      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.

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

  27. Matt

    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 :)

    Cheers

  28. Alex

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".