The section about iOS home screen icons has an error. Retina iPad icons are 144 pixels square, not 114. I wrote a blog post [1] that covers that.<p>Also, I'd recommend using ConvertICO [2] instead of the X-Icon Editor. It generates much smaller files (4 kb vs. 32 kb).<p>[1]: <a href="http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/" rel="nofollow">http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-sta...</a>
[2]: <a href="http://news.ycombinator.com/item?id=4164119" rel="nofollow">http://news.ycombinator.com/item?id=4164119</a>
If there isnt already a website that lets you just upload a large image and then creates all the different sizes for you and provides the code to paste in for you then there needs to be. If it doesnt exist and people here are interested, i'll make it this weekend.
Not that it matters much, but Apple didn't actually have to redefine a CSS pixel. They foresaw this when writing the CSS specification:<p><pre><code> If the pixel density of the output device is very
different from that of a typical computer display,
the user agent should rescale pixel values. It is
recommended that the reference pixel be the visual
angle of one pixel on a device with a pixel density
of 96dpi and a distance from the reader of an arm's
length.</code></pre>
Using SVG for favicons would be a much better approach. Otherwise we would just end up in a few years, where we are now. But SVGs are scalable and look as good when rendered as 16x16, as 64x64 as 1024x1024. Of course that won't work for photos and stuff, but you can pretty easily turn most favicons into a scalable vector graphic.
Microsoft's icon format is remarkably flexible and backwards-compatible. It's grown from what was once a 32x32 1-bit icon format, to one which supports multiple versions of the same icon, from resolutions ranging from the tiny 16x16 to the huge 256x256, and supporting 1-bit, 16-bit, 24-bit, and now even 32-bit (alpha transparent) colour, with PNG compression.<p>And the great thing about it, of course, is every browser supports it. Even the Nintendo DS.
Using the suggested generator (<a href="http://www.xiconeditor.com/" rel="nofollow">http://www.xiconeditor.com/</a>) it turned a 5kb .png into a 32kb .ico - Looks lovely but seems v.excessive..
html5boilerplate recommends all the way up to 144x144, and here is a awesome psd template to make all the sizes in one fell swoop: <a href="http://drublic.de/blog/html5-boilerplate-favicons-psd-template/" rel="nofollow">http://drublic.de/blog/html5-boilerplate-favicons-psd-templa...</a>
Could someone explain why the author suggests 4 sizes in the favicon.ico including 24x24 and 64x64? Why not use an ICO with only 16x16 and 32x32 image formats? Thanks in advance.