

Favicons in the retina age - michaeltwofish
http://nashape.com/blog/2012/09/12/big-favicons/

======
taylorfausak
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...](http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-
images/) [2]: <http://news.ycombinator.com/item?id=4164119>

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

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

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

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

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

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

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

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

~~~
heptat
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
As if "the retina age" were an actual thing. How many people have them now?

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

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

~~~
ricardobeat
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).

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

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

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

~~~
abraham
I'm seeing one.

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

------
crisnoble
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...](http://drublic.de/blog/html5-boilerplate-favicons-psd-template/)

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

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

