Favicons for all browsers

After much Googling and research, what follows is code that adds favicons to your site in all browsers that are young enough to not be allowed into bars.

<meta name="apple-mobile-web-app-title" content="Icon Title">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="/favicon.ico"><![endif]-->
<meta name="msapplication-TileColor" content="#1E355E">
<meta name="msapplication-TileImage" content="/tile-icon.png">

You will need:

  • favicon.ico (16px, no padding, transparent background)
  • favicon.png (32px, no padding, transparent background)
  • apple-touch-icon.png (153px, padding & background)
  • tile-icon.png (558px, padding but no background)

Put these files in the root of your site, set the `content` of `apple-mobile-web-app-title` to whatever you’d like the icon text to be when saved to iOS homescreens and you’re good to go!

Leave a Reply

Your email address will not be published.