Favicons in the retina age | Hacker News Reader

Favicons in the retina age

nashape.com

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.

Also, I'd recommend using ConvertICO [2] instead of the X-Icon Editor. It generates much smaller files (4 kb vs. 32 kb).

[1]: http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-sta... [2]: http://news.ycombinator.com/item?id=4164119

Good pick up, fixed that error now. Thanks for the link too!

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.

The only caveat is that a good large icon does not necessarily make a good small icon. Icon designers will do each size by hand to make it fit the format, getting rid of extraneous detail along the way. It would be difficult to model this actual process. But, for a quick and dirty process to get something running without paying money, a site like this would indeed be useful. There are plenty of favicon generators, but nothing for the modern age.

Ok guys theres enough interest, i'll code it up this weekend so watch out for the Show HN post. :)

Might as well add in apple touch icons... Look forward to seeing this!

I use Faviconit ($0.99) http://itunes.apple.com/us/app/faviconit/id436681083?mt=12

But yes, a nice website will be a better bet. Use when I need it. With the image quality is not degraded when smaller size comes out of the big ones.

Launched! https://news.ycombinator.com/item?id=4529963 Upvotes appreciated.

The author of the posted linked to this site which does some of the sizing conversions: http://www.xiconeditor.com/ but the tool you describe (and hopefully will create) would be much better.

Allthefavicons doesn't win it for me from xiconeditor. I need to be able to retouch the shrunken icons, on this pixel level whatever image you'll put in will most likely look a bit quirky.

I think I remember seeing a similar tool on Reddit a few months ago. I tried to Google for it, but couldn't find anything so perhaps it's not around any more.

Either way, it'd be a very handy tool so I say go for it!

Out of interest, what language will you write it in?

Compare http://www.favicon.cc/ for ordinary small .ico's.

Clean and Lean wordpress plugin would be nice addition too, (hope I am not asking too much ;)

Do it. Do it now :-)

Not that it matters much, but Apple didn't actually have to redefine a CSS pixel. They foresaw this when writing the CSS specification:

    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.

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.

If the favicon turned out to be the first place where we finally get widespread SVG usage, I'd go into seizure.

To start, vector icons don't look as good at 16x16 or 32x32 as they do at higher resolutions. Pretty much every desktop environment that supports both large and small icons (whether with a native vector format or many scaled versions of large "master" icon) features separate, hand-edited icons for the lower resolutions, and often a completely redrawn simpler icon for the lowest (usually 16x16).

The Tango Icon Theme Guidelines state this explicitly: http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines\

Unfortunately Mozilla, Microsoft, and Apple are dragging their feet on SVG support: http://en.wikipedia.org/wiki/Favicon#File_format_support

Yet another article written from a mac-only user point of view. Most desktop monitors are still around 100 dpi, far from "retina" standards.

Sorry about that – the point of the article definitely wasn't to exclude non-Retina users, it was just to document what I was encountering when I came to creating a favicon for the site.

As if "the retina age" were an actual thing. How many people have them now?

You don't think screen resolutions will continue to increase? I give it a couple of years, maybe less, before the "retina" resolution is standard hardware.

I don't want to think what beastly GPU I will have to buy to run next crisis on native resolution on ~150 dpi 21" monitor.

That's most likely going to be a >200dpi screen, where you can simply use 2x upscaling for better performance (with no visual degradation compared to current monitors).

That was my submission, not the author's words.

The article mentions supporting multiple favicon sizes and old browsers. Did you even read the article or was it too hard to read on your low dpi display?

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.

And the great thing about it, of course, is every browser supports it. Even the Nintendo DS.

Using the suggested generator (http://www.xiconeditor.com/) it turned a 5kb .png into a 32kb .ico - Looks lovely but seems v.excessive..

Was anyone else disappointed to see no favicon for this site?

I'm seeing one.

http://nashape.com/favicon.png http://nashape.com/favicon.ico

html5boilerplate recommends all the way up to 144x144, and here is a awesome psd template to make all the sizes in one fell swoop: http://drublic.de/blog/html5-boilerplate-favicons-psd-templa...

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.

And because favicons are now being used in many other places, such as Safari’s Reader and IE9’s pinned sites, the best approach is to supply a higher resolution favicon, at least 64x64 pixels.

Damn I totally missed that, thank you very much. The Reading List in Safari may use 64x64 for the Retina display.

Microsoft suggests 24x24: http://msdn.microsoft.com/en-us/library/cc849094(VS.85).aspx...

This site is about IE8. This one is about IE9 on Win7: http://msdn.microsoft.com/en-us/library/ie/gg491740%28v=vs.8...

The optimal sizes are the same as the author's but 24x24 px. is missing in the recommended size list.

The site links to a blog entry about Pinned Sites in Win8. You can re-use the 144x144 px. PNG for a pinned site.

Reply on news.ycombinator.com