Forever we all made 16×16 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 32×32 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 16×16 and 32×32 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">
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!
nice one ! thx you Terence !
Nice, gonna try that (as I´m working on a PC).
Thanks.
I too use X-Icon Editor. I used to use Dynamic Drive’s FavIcon Generator, but switched when someone recommended X-Icon Editor and I saw that it will generate a favicon.ico with 16×16, 24×24, 48×48, and 64×64.
According to the Microsoft article Customizing the Site Icon, IE9+ may use any of those sizes up to 64×64 in various places. That article also recommends X-Icon Editor.
I guess that verb tense is what they call the “future past”…
Icon Slate, according to my Apple Store, isn’t available in the US …?
Thanks Terence…. good for a free tool.
Chris, I commented on your YouTube listing but I thought I would add the same here:
H5BP Multi-layer Favicons
Jon
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
Firefox Nightly is about to get HiDPI favicon support:
http://firefoxnightly.tumblr.com/post/46495750365/fx-nightly-is-about-to-support-hidpi-favicon-on
Woo!
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.
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.
Sounds like a good research project and blog post!
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
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!
The Apple Developer Tool “Icon Composer” does exactly the same for free.
Thanks for this nice Tut!
This seems to work well for Windows if you want to go up to 128px http://sourceforge.net/projects/icobundlextract/
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.
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
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!
Gimp, an open source photoshop type program, can export to .ico, I use it.
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..
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.
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 ;)
I use imagemagick way to generate favicons:
and you can generate all the required icons, in a heartbeat, using something like
Yes! A designer just handed me two favicon files.
I created a single
favicon.ico
file with: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.
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.
This works wonderfully! Thank you.
yes! thank you sir.
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.
+1
I have successfully converted my pngs (16, 32 and 64 pixel size) to a simgle ico file. I used ConvertICO free online app.
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.
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?
you can use 16×16 32×32 or 64×64 they all work the same
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 …
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.
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?
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
Looks promising from a first look at it. Thanks for sharing
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.
bookmarked that tool! thanks for posting…
You seriously summed up my favicon knowledge perfectly by 1:30 lol, I think we all made this journey
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…