Favicons in the retina age

http://nashape.com/blog/2012/09/12/big-favicons/

by michaeltwofish • 14 years ago

87 38 14 years ago

TamDenholm3• 14 years ago

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.

hellweaver666• 14 years ago

Do it. Do it now :-)

Brajeshwar• 14 years ago

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.

EnderMB• 14 years ago

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!

heptat4• 14 years ago

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

drharris• 14 years ago

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.

crisnoble2• 14 years ago

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.

Roelven• 14 years ago

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.

TamDenholm3• 14 years ago

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

togasystems• 14 years ago

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

mturmon• 14 years ago

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

vmialik• 14 years ago

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

TamDenholm3• 14 years ago

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

stream2• 14 years ago

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.

bbrks• 14 years ago

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.

stream2• 14 years ago

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

heptat4• 14 years ago

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

cremno• 14 years ago

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.

darkstalker• 14 years ago

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

heptat4• 14 years ago

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.

WayneDB• 14 years ago

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

mannkind• 14 years ago

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?

crisnoble2• 14 years ago

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

taylorfausak• 14 years ago

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

heptat4• 14 years ago

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

wallunit• 14 years ago

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.

colanderman• 14 years ago

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

morsch• 14 years ago

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

ANTSANTS• 14 years ago

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\

ronansprake• 14 years ago

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

bajsejohannes• 14 years ago

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.

Falling3• 14 years ago

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

abraham• 14 years ago

I'm seeing one.

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

TazeTSchnitzel• 14 years ago

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.

Favicons in the retina age

Related Stories