diessi.caBlog
September 06, 2015

A Guide to Favicons and Touch Icons

Favicon is a simplified visual element associated with a particular website, page or event, which you once found only in your browser’s address bar or bookmarks. Nowadays, the scenario is different: they are everywhere.

Introduction

Favicons provide a important visual indicator to people, and help them to easily associate your content (which can be a website, a particular page or even events like a new message) when browsing.

Formerly, they, also called shortcut icons or bookmark icons, were just tiny pieces of art designed to help users to browse through their tabs or bookmarks. Today, shortcut icons can also provide an app-like link on operational systems (Windows 8, Android, OS X and so on), and should therefore be considered for achieving a pleasant cross-platform experience.

This is a guide for using favicons today, the right way. At the end of this article, I’m sure you’ll be excited about SVG favicons.

Usage

Favicons in different dimensions are needed, so devices and browsers can pick the picture that fits best based on sizes attribute (little exception for Mozilla Firefox, which always gets the last favicon declared and scale it if necessary).

The images are not requested when not used. As said, browsers will get only what fits them best, therefore it’s important to provide the favicon in the required dimensions to avoid ugly scaled images.

General

<!-- I'm lazy -->
<link rel="icon" href="favicon.png" />

<!-- Browser tabs -->
<link rel="icon" href="favicon-16x16.png" sizes="16x16" />

<!-- Safari on OS X, IE10 Metro -->
<link rel="icon" href="favicon-32x32.png" sizes="32x32" />

<!-- Google TV -->
<link rel="icon" href="favicon-96x96.png" sizes="96x96" />

<!-- Chrome on Android -->
<link rel="icon" href="favicon-192x192.png" sizes="192x192" />

No need for type="image/png" when using HTML5.

You’ll need to provide a manifest in order to Chrome on Android’s icon to work properly. See manifest.json example.

<link rel="manifest" href="manifest.json" />

Lacking of PNG support on IE: a workaround

Internet Explorer until version 11 and Safari don’t support PNG favicons. However, you can provide a fallback for IE up to 9:

<!--[if IE]> <link rel="shortcut icon" href="favicon.ico" /> <![endif]-->

Notice the shortcut, which is a non-standard. Also, providing this fallback within a conditional comment is necessary; otherwise Chrome will use the ICO favicon, even if it supports PNG ones.

I don’t recommend it, though, because IE 10 doesn’t support conditional comments (so it won’t get any favicon, as seen that it doesn’t support PNG too), and also because it encourages the use of the non-standard and confusing shortcut.

Luckily, you can workaround everything just placing a favicon.ico in the root directory (the browser will look for it automagically). Then link only the PNG favicon and don’t worry.

Web Clip bookmarks

iOS users can add websites to their home screen – shortcuts called “Web Clip bookmarks”. The default icon is a thumbnail screenshot of the page, but developers can specify one instead.

You will need to provide a lot of dimensions in order to support both new devices and older (iOS6 and prior), however.

There’s a no-HTML way and a HTML way to provide those icons. It’s up to you.

No-HTML: Touch Icon file

Add a apple-touch-icon-*.png file, where * is the size to the root directory, instead. iOS Safari will look for the appropriate icon size, and if it doesn’t find any that fits best, it’ll use apple-touch-icon.png.

You can reuse the image of another favicon specifying a href (not possible while using the solution above).

<!-- Non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png" />

<!-- Non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />

<!-- Non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png" />

<!-- Retina iPhone pre iOS 7 -->
<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="apple-touch-icon-114x114.png"
/>

<!-- Retina iPhone iOS 7 -->
<link
  rel="apple-touch-icon"
  sizes="120x120"
  href="apple-touch-icon-120x120.png"
/>

<!-- Retina iPad pre iOS 7 -->
<link
  rel="apple-touch-icon"
  sizes="144x144"
  href="apple-touch-icon-144x144.png"
/>

<!-- Retina iPad iOS 7 -->
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="apple-touch-icon-152x152.png"
/>

<!-- iOS 8 -->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="apple-touch-icon-180x180.png"
/>

Using apple-touch-icon-precomposed instead of apple-touch-icon, which prevents iOS icons defaults like rounded corners and reflective shine, isn’t necessary, as seen that there isn’t shiny effects on iOS 7 and up anymore.

Windows Tiles

Tiles are icons that appear on the Start screen, linked as apps. By default, the image on the tile is the website’s favicon or a default IE11 logo.

To cover a wide range of devices, use an image 1.8 times the standard tile size so the image can be scaled up or down as needed.

There’s a no-HTML way and a HTML way to provide those icons. It’s up to you, again.

No-HTML: Browser config file

Provide a browserconfig.xml file and save it at the root of your server. Internet Explorer 11 will automatically read the file when the user pins the website. See browserconfig.xml example.

Metadata tags

msapplication-TileColor is the background color of the tile, and msapplication-TileImage is the icon, which can be tiny (70 × 70px), square (150 × 150px), wide (310 × 150px) or large (310 × 310px).

<!-- Windows Tile -->
<meta name="msapplication-TileColor" content="#000" />
<meta name="msapplication-TileImage" content="tile-icon.png" />

<!-- Different Windows Tiles (optional) -->
<meta name="msapplication-square70x70logo" content="tile-icon_tiny.png" />
<meta name="msapplication-square150x150logo" content="tile-icon_square.png" />
<meta name="msapplication-wide310x150logo" content="tile-icon_wide.png" />
<meta name="msapplication-square310x310logo" content="tile-icon_large.png" />

Bulletproof favicons

  • For Touch Icons, add apple-touch-icon.png and apple-touch-icon-*.png files, where * is the size, to the root directory.
  • For IE support, add a favicon.ico file with both 16 × 16px and 32 × 32px resources to the root directory.
  • For Windows Tiles, add a browserconfig.xml to the root directory.
  • For Chrome on Android icon, add a manifest.json to the root directory.
  • Add the following HTML to <head>:
<!-- Chrome on Android -->
<link rel="icon" href="favicon-192x192.png" sizes="192x192" />
<link rel="manifest" href="manifest.json" />

<!-- Google TV -->
<link rel="icon" href="favicon-96x96.png" sizes="96x96" />

<!-- Safari on OS X, IE10 Metro -->
<link rel="icon" href="favicon-32x32.png" sizes="32x32" />

<!-- Browser tabs -->
<link rel="icon" href="favicon-16x16.png" sizes="16x16" />

Order matters here! Mozilla Firefox ignores sizes and always get the last favicon for the browser tabs. :-(

Or you can add all the favicons through meta and link tags.

Favicon as SVG

Not encouraged as an unique solution, as seen that isn’t widely supported yet.

I’m excited about this:

<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml" />

Final words

I’m sure you are now excited about SVG support for favicons. Providing a lot of different images is quite boring.

I encourage you to support favicons everywhere (or at least retina-ready ones), but unfortunately there’s no human-friendly way to do it nowadays. Use favicons package on npm or, if you are not comfortable with the command line, refer to RealFaviconGenerator.

Don’t be lazy.

References