Favicons, Apple-Touch-Icons, and MS-Tiles

Once upon a time, a website had one "favicon" (a picture bookmark), and it was called favicon.ico, and life was good.

Then Apple came along, in the best Microsoft traditions of taking something simple, and making it labyrinthine, obfuscated and over-complicated, introduced a whole suite of favicons. Then Microsoft got in on the game. And Android. So now a website need loads of favicons in different sizes.

This website does it all. Upload an image, and it generates all the favicons you could ever dream of, and the HTML you need to go with them.

http://realfavicongenerator.net/

Top tip.

The favicons ideally need to be at the top level to work, e.g. www.website.com/favicon.ico - but having all these files there makes you website untidy. Solution - place them in a directory, e.g. /icons, and use .htaccess to take care of the links

##favicon pollution
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^favicon(.*)            /icons/favicon$1
RewriteRule ^apple-touch-icon(.*)   /icons/apple-touch-icon$1
RewriteRule ^mstile(.*)             /icons/mstile$1
RewriteRule ^browserconfig.xml      /icons/browserconfig.xml

Our favicons - 1 is no longer enough!

apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon.png
apple-touch-icon-precomposed.png
browserconfig.xml
favicon-160x160.png
favicon-16x16.png
favicon-196x196.png
favicon-32x32.png
favicon-96x96.png
favicon.ico
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
mstile-70x70.png