
Favicon Cheatsheet - eliot_sykes
https://github.com/audreyr/favicon-cheat-sheet
======
NelsonMinar
This collection of vendor-specific hacks is an excellent demonstration of the
failure of the Web standards process.

~~~
evmar
Historically, the web standards process was theorized to work like:

1) vendor introduces new feature, tagged with vendor name to not pollute the
namespace (e.g. -webkit-foo, or msapplication-TileColor from the OP)

2) once feature becomes popular enough to warrant its permanence, vendors
agree on some new standard name for the agreed-upon behavior

3) ???

4) everyone uses the new standard name

The problem with this idea is that step 3 is missing. Browsers can't drop
their -webkit CSS support because old pages rely on it, and new pages still
use -webkit to work on old browsers. The original name is effectively
permanent so there's little incentive to even take step 2, because all that
produces is two names for the same thing (e.g. you use an attribute with
"apple" in the name to choose the Android icon).

In recognition of the failure of this process, Blink (and other browsers) is
using a different approach, where new features are not namespaced; instead,
they'll require users to individually opt-in to nonstandard features, under
the idea that it's hard for an idea to become permanent if it requires each
user to individually configure their browser:

[http://www.chromium.org/blink#vendor-
prefixes](http://www.chromium.org/blink#vendor-prefixes)

I am a little skeptical that this will only result in going too far the other
way -- new features will wither because you can't experiment with them enough
to get enough mass behind them to standardize them -- but at least it's not
retreading the known broken path.

~~~
ftwinnovations
5) wait another 7 years for IE to implement it, with their own "twist".

6) wait another 5 years for IE to properly implement it.

~~~
leokun
I haven't tested nor cared how something appears in IE in years. Since like
2009. I have worked on major frontends for a couple of big companies all this
time and recently a startup. IE is the new opera. IE needs to make sure that
everything works. It may have large marketshare, but it's the market that's
irrelevant to anything I've worked on (IT and business related tools and
control panels).

~~~
dspillett
Lucky you. Investment banking compliance software here. IE8 and little else
every-'king-were...

If I ever win the lottery I'm taking out full page ads in the national
newspapers asking the general public if they know how stupidly out of date
certain banks are internally and asking it it fills them with confidence or
not!

------
TamDenholm
For what its worth i made a tool a while back that takes a big image and makes
a bunch of sizes for you as well as the code etc.

I've not touched it in over a year but it still gets used every now and again.

[http://allthefavicons.com/](http://allthefavicons.com/)

~~~
thisishugo
I remember this from the the original hacker news thread and still use it.
Anything 'real' gets custom rendered icons for each size, but for side
projects where the icon quality isn't critical it's very convenient.

~~~
tagawa
For reference, the original HN thread:
[https://news.ycombinator.com/item?id=4529963](https://news.ycombinator.com/item?id=4529963)

------
audreyr
Hi, author of the cheatsheet here.

I'm thinking of changing the snippet under "The Basics" to be what's suggested
in issue #3 ([https://github.com/audreyr/favicon-cheat-
sheet/issues/3](https://github.com/audreyr/favicon-cheat-sheet/issues/3)). Any
feedback before I make the change?

------
oneeyedpigeon
"Forcing a Favicon Refresh ... For yourself and all site visitors: Append a
query string. (TODO: find out if any browsers have problems with this.)"

Don't do this - it prevents the file from being cached by some proxies [1].
Instead, use a filename-based approach to 'cache busting' [2].

[1] [http://www.stevesouders.com/blog/2008/08/23/revving-
filename...](http://www.stevesouders.com/blog/2008/08/23/revving-filenames-
dont-use-querystring/) [2] [https://github.com/h5bp/server-configs-
apache/blob/master/.h...](https://github.com/h5bp/server-configs-
apache/blob/master/.htaccess#L500-514)

------
ianstormtaylor
Don't you always want your favicon at / regardless because everything that
grabs favicons automatically will look there, and not parse your /index.html
to figure out what the meta tag is?

Other than that, this seems very handy!

------
lyndonh
I think I'm going to vomit if I see another web page written in the 21st
century that condones the use of ICO format.

Please, please, please can we have some kind of multi image PNG format ?

How about multiple PNG images wrapped in a TIFF container ?

With cross browser support, pretty please.

Anything but ICO. ICO format is nasty.

~~~
audreyr
That's what I thought too, until I did more research on ICO and couldn't come
up with an answer for "Why use png in addition to ico?" in the FAQ (well,
except for touch devices where ico isn't supported). Notice how that FAQ
question is empty.

But if you could submit a pull request with a bulleted list of PNG advantages
over ICO, I'd be happy to include it. Seriously.

~~~
lyndonh
PNG is a properly specified format with written documentation.

ICO has many undefined and assumed values.

The only reason you would use ICO for favicons instead of PNG is that it
supports multiple images.

~~~
audreyr
What's your GitHub username? I'd be very interested in hearing more specifics
and possibly collaborating to adjust the recommendations if needed.

------
HipstaJules
[http://www.jonathantneal.com/blog/understand-the-
favicon/](http://www.jonathantneal.com/blog/understand-the-favicon/) this is
really related and clear!

------
sergiotapia
Here's an idea for an app:

1\. Upload a large, centered image, and have it spit out all of these
different sized, optimized favicon images for me.

The initial image should be large enough to accommodate all lower sizes.

Any takers? :)

~~~
thisishugo
[http://www.allthefavicons.com/](http://www.allthefavicons.com/)

------
eliot_sykes
Could not believe we should be considering giving so many different favicon
sizes from 195px (Opera Speed Dial) down to 16px. Wider SVG support in
favicons would be welcome.

~~~
masklinn
> Wider SVG support in favicons would be welcome.

I believe SVG still has no support for hinting (or not enough to be worth
talking about).

Because of the resolution range, either extremely strong rasterizer hinting
(supporting not only pixel-snapping but the complete addition or removal of
features and the like) or multiple bitmaps is necessary to avoid getting
either blocky output at "high" resolutions or a blurry and unusable mess at
low ones. You can see the issue by comparing OSX's actual Pictures folder
icons[0] with what you get just by scaling the biggest icon down[1] or the
smallest one up[2]. [0] looks good and recognizable at all sizes, [1] is a
blurry mess from 32px down and [2] looks terrible above 32px (and not too good
at 32px either).

And even at constant resolution, different densities (and thus different
physical sizes) require different levels of details: Opera puts 195px in up to
4.5~5cm (as far as I can see by opening Opera, maximizing it and looking at
the speed dial screen) where an iPad puts 144px (152 in iOS7) in about 1cm
(not measured as I don't have one, if somebody can provide the exact
dimensions of app icons it would be great). You can't[3] put precise
information in an iPad icon as most users will be unable to see it, whereas a
huge icon and nothing else would be a waste of space on Speed Dial.

[0]
[http://media.tumblr.com/tumblr_l456vgN8oa1qz50x3.png](http://media.tumblr.com/tumblr_l456vgN8oa1qz50x3.png)

[1]
[http://media.tumblr.com/tumblr_lurpsf1owX1qz50x3.png](http://media.tumblr.com/tumblr_lurpsf1owX1qz50x3.png)

[2]
[http://media.tumblr.com/tumblr_lurpyq9FPu1qz50x3.png](http://media.tumblr.com/tumblr_lurpyq9FPu1qz50x3.png)

[3] well you can, and it makes for great easter eggs, Apple's icon designers —
amongst others — are known to have great fun with that[4], but I'm sure you
get the point

[4] [http://gigaom.com/2009/07/27/a-closer-look-at-apples-
icons-s...](http://gigaom.com/2009/07/27/a-closer-look-at-apples-icons-secret-
messages-easter-eggs/)

~~~
giovannibajo1
SVG has a "shape-rendering:crispEdges" option that you can use to snap lines
to pixels. See this blog post for more details:
[http://simurai.com/post/19895985870/icon-sharpness-
limbo](http://simurai.com/post/19895985870/icon-sharpness-limbo)

------
marban
I declare 2013 as the year of Favicon Wars.

------
joeblau
There is also this: [http://favicon.io/](http://favicon.io/)

------
cgtyoder
This is so incredibly handy. I've been searching the internets for this page
for years now.

------
mherkender
Why don't we have mipmapping on the web? I've never heard anyone suggest it
before, but it seems like a good solution to this problem and all the other
pixel ratio kinds of problems.

~~~
cben
If you mean ability to supply several, potentially hand-crafted images for
different sizes — that's exactly what .ico already offers.

If you stick to the precise definition of mippmapping, where they're exact
downscalings of one texture, that solves a different problem — efficient
downscaling, only sampling O(1) texture pixels per displayed pixel.

On the web CPU isn't the problem; there are 2 other reasons so serve several
sizes:

(1) Tiny images (like favicons) don't scale well, you might want manual
intervention. (2) Too large images waste bandwidth => you want negotiation,
especially to transmit less to mobile devices.

.ico was a quite elegant solution to (1) actually. I guess all the mess comes
from icon resolutions growing enough to turn the problem into (2)...

There several efforts to solve this generally — google "Responsive Images",
"srcset". I'd think progressive JPEG and PNG could have solved (2) well — just
stop downloading when you had enough quality — but many people say that's not
enough :-(

------
aquarin
Here is my solution to the "problem". In Nginx config:

location = /favicon.ico { return 204; access_log off; error_log off; }

~~~
psychometry
Those of us who like to bookmark sites on our bookmarks toolbar without any
text will find your suggestion very annoying.

~~~
tombrossman
This is exactly what I do, too. I've got the Bookmarks Toolbar in Firefox with
just favicons all the way across. I don't need the text alongside and prefer
to remove it to fit more icons instead.

------
TallboyOne
More favicon goodies:
[http://pineapple.io/tags/favicons](http://pineapple.io/tags/favicons)

------
benguild
Updated it as follows: 64x64 ... Safari Read Later sidebar in HiDPI/Retina

------
the1
pollute yo metadata with vendor crap. just like jpeg.

