Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pragmatic Touch Icons

NOTE I'm trying to find the most optimal fav/touch icon setup for my use-cases. Nothing new here. Read Mathias Bynens' articles on re-shortcut-icon and touch icons, a FAQ or a Cheat Sheet for all the details.

I'd like to hear how you approach this: @valuedstandards or comment on this gist.

The issue

You have to include a boatload of link elements pointing to many different images to provide (mobile) devices with a 'favicon' or 'touch icon':

Touch Icon Links

Why all these different images are necessary is quite complex: Cheat Sheet, Mathias—pedia—Bynens. Many online generators attempt to automate this for us, but most are incomplete or simply wrong. realfavicongenerator seems to be the best out there…

Even with automated generation I, personally, don't want to have to add all this extra markup to my HTML.

Avoiding the links

Because of browser convention we do not need to link to either the favicon.ico or apple-touch-icon-*.png: simply prepare all the different images, give them the appropriate filename and upload them at the root of your site. This works in 90% of the cases.

According to Mathias—Pedia—Bynens you need the following images:

  • favicon.ico including various sizes: 16x16, 32x32, 48x48?
  • apple-touch-icon-57x57[-precomposed].png for non-Retina iPhone and iPod Touch (@1× display)
  • apple-touch-icon-72x72[-precomposed].png for the iPad mini and the gen1 and gen2 iPad (@1× display) on iOS ≤ 6
  • apple-touch-icon-76x76[-precomposed].png for the iPad mini and the gen1 and gen2 iPad (@1× display) on iOS ≥ 7
  • apple-touch-icon-114x114[-precomposed].png for iPhone 4+ (with @2× display) on iOS ≤ 6
  • apple-touch-icon-120x120[-precomposed].png for iPhone 4+ (with @2× display) on iOS ≥ 7
  • apple-touch-icon-144x144[-precomposed].png for iPad 3+ (with @2× display)
  • apple-touch-icon-152x152[-precomposed].png for iPad 3+ (with @2× display)
  • apple-touch-icon-180x180[-precomposed].png for iPhone 6 Plus (with @3× display)
  • touch-icon-192x192.png for Chrome for Android
  • apple-touch-icon-precomposed.png and apple-touch-icon.png as a fallback for everything else (possibly including non-Apple devices).

That's a lot of images… (and misses some other stuff such as Win8 Tiles (browserconfig.xml), Adroid 'Add to Homescreen' (manifest.json), etc.

One Icon to Rule Them All

…or actually two, if you count favicon.ico ;-)

…and not really all: it only handles apple-touch-icon*.png

The obvious work-around to avoid having to generate all these images is to rewrite requests:

RewriteRule ^apple-touch-icon(.*).png$ apple-touch-icon.png [L]

Which is how the man himself karate-kicks his apple-touch-icons in submission with one 152x152 png. Bruce Bynens

Notes

  • This obviously means you will provide one size apple-touch-icon.png for all apple-touch-icons. Make it at least 152x152 & optimize the crap out of it.
  • Often the image will be down-scaled which is not always pretty. KISS your DRY Icons.

Doing only the above will provide icons to many desktop and mobile browsers, but you'll miss:

However, it does handle 90% of what you need.

It Depends

I will probably stick with the the following most of the time (all in the root):

  • A favicon.ico (16x16 and 32x32)
  • One apple-touch-icon.png (180x180)
  • RewriteRule ^apple-touch-icon(.*).png$ apple-touch-icon.png [L] for all touch icon requests

I'll make sure my icon is:

  • Simple (design)
  • Scalable (down/up scaling does not distort quality too much)
  • Lightweight (compressed/optimized)

When I'd need more control over specific use-cases, such as 'add to Homescreen', Windows Tiles, etc I'd add:

  • A browserconfig.xml with Tile images and colors for 'Windows (Wide) Tiles'
  • A manifest.json with images and colors for 'Web Apps'

What about you?

@mathiasbynens

This comment has been minimized.

Copy link

commented Apr 16, 2015

Hardcore designers probably prefer crafting pixel-perfect versions of the icon in all the required sizes and serving them up separately. The question is where you draw the line. As a non-designer, I don’t really mind downscaling the same touch icon for my personal website.

@jvhellemond

This comment has been minimized.

Copy link

commented Apr 16, 2015

Hihi, you said "hardcore designers" ;)

@davidhund

This comment has been minimized.

Copy link
Owner Author

commented Apr 16, 2015

@mathiasbynens Exactly: IMO this pragmatic solution is 'good enough' for 80% of use-cases but I'm sure many designers ('hardcore' or otherwise) would disagree :-)

In any case: it seems to be either 'hand-craft pixel-perfect icons for all cases' or 'go pragmatic'**.
(I seriously doubt hardcore designers would be satisfied with auto-generated icon sets…)

**'Pragmatic' could be: 'throw realfavicongenerator.net generated icons in root' or 'add rewrite rule'.

@blucube

This comment has been minimized.

Copy link

commented Apr 16, 2015

I love the mod_rewrite idea!

@sintaxi

This comment has been minimized.

Copy link

commented May 8, 2015

Thank you for putting this together. This is fantastic!

I have used this as a guide for adding favicon hotness on surge.sh. Surge now does all these rewrites for you automatically. No need to configure.

All of the following is rerouted to /favicon.png...

/apple-touch-icon-57x57-precomposed.png
/apple-touch-icon-72x72-precomposed.png
/apple-touch-icon-76x76-precomposed.png
/apple-touch-icon-114x114-precomposed.png
/apple-touch-icon-120x120-precomposed.png
/apple-touch-icon-144x144-precomposed.png
/apple-touch-icon-152x152-precomposed.png
/apple-touch-icon-180x180-precomposed.png
/apple-touch-icon-57x57.png
/apple-touch-icon-72x72.png
/apple-touch-icon-76x76.png
/apple-touch-icon-114x114.png
/apple-touch-icon-120x120.png
/apple-touch-icon-144x144.png
/apple-touch-icon-152x152.png
/apple-touch-icon-180x180.png
/apple-touch-icon.png
/touch-icon.png

The regexp rule looks like so..

/^\/(apple-)*touch-icon-*(\d*x\d*)*[-precomposed]*.png/

This means you only need the following two files in your project root to cover the vast majority of use cases...

  • /favicon.ico
  • /favicon.png

Notes

  • if the requested file exists it will serve it so hardcore designers can pixel shift away.
  • this only happens if favicon.png exists,
  • touch-icon.png and apple-touch-icon.png gives you the same behaviour (if that is your naming pref).
  • this works when using a catchall 200.html file.

To test this out you need node installed then run the following...

> npm install -g surge
> surge path/to/web/project

depending on your system you may need to install with sudo npm install -g surge.

Let me know if you have any feedback.

@MylesBorins

This comment has been minimized.

Copy link

commented May 8, 2015

hawt

@davidhund

This comment has been minimized.

Copy link
Owner Author

commented May 8, 2015

Awesome work @sintaxi!

@rowe-morehouse

This comment has been minimized.

Copy link

commented May 19, 2015

Whoa, what's up Myles @thealphanerd. Stumbled into you on a github comments thread, cool. Anyway, nice work on digging into this problem surrounding icon generation, @davidhund.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.