Patrick Bougie — web developer / entrepreneur from Montréal, Canada. Founder of WorkSked — a web app to manage employee work schedules and time off.

Favicons & Co.

Adding a favicon to your website is no longer as easy as adding favicon.ico to the root of your web server. Different browsers and versions use different file names, formats, sizes, and declarations. High pixel density displays also complicate things.

After some research, I developed this combination of images and code. The following are meant to be a minimalist version that covers as much as possible. By no means is it complete. Adjust for your individual circumstances.

Six images need to be created:

File Details
favicon.ico ICO format in three sizes — 16x16, 32x32, 48x48 pixels
favicon.png PNG format, 256x256 pixels (resampled by browser)
favicon.svg SVG format (hopefully the future)
apple-touch-icon.png PNG format, 256x256 pixels (resampled by browser)1
safari-pinned-tab.svg SVG format, transparent background, monochrome foreground2
ms-tile.png PNG format, 256x256 pixels, transparent background (resampled by browser)3

Best to place these images in the root of your web server but you can place them in folders by adjusting the paths in the HTML declarations below, except the favicon.ico file (see below). The PNG images are slightly higher resolution to accommodate future high pixel density displays.

Add this HTML block to the <head> section of your webpages:

<link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#004477">
<meta name="msapplication-TileColor" content="#004477">
<meta name="msapplication-TileImage" content="/ms-tile.png">
<meta name="theme-color" content="#004477">

The favicon.ico file is not declared in the HTML and must be placed in the root of your web server. Modify the color attributes used for Safari pinned tabs2, Microsoft pinned sites3, and Chrome for Android toolbars4.

These are the results using various browsers with the above configuration:

Browser Version File(s) Used
Chrome for Mac 46 favicon.png
Firefox for Mac 40 favicon.svg5
favicon.png5
Firefox for Mac 42 favicon.svg
Opera for Mac 33 favicon.png
Safari for Mac 9 favicon.png
apple-touch-icon.png1
safari-pinned-tab.svg2
Safari for iOS 9 apple-touch-icon.png1
Microsoft Edge 20
(Windows 10)
favicon.png
ms-tile.png3
Microsoft Internet Explorer 11
(Windows 8.1)
favicon.png
ms-tile.png3
Microsoft Internet Explorer 10
(Windows 8)
favicon.ico
ms-tile.png3
Microsoft Internet Explorer 9
(Windows 7)
favicon.ico

25-Nov-2015 — Source Code

Code used for this article can be found on GitHub.

26-Nov-2015 — Update for Firefox

Firefox 42 is exhibiting odd behavior related to Bookmarks and History favicons. I’m using a MBP 15 with Retina display for testing purposes. With simpler SVG favicons, they appear perfectly in Tabs, Bookmarks, and History. I have a more complex SVG favicon and unfortunately, the SVG is replaced by the PNG format in Bookmarks and History — but the Tab icon appears perfectly. The resampling of the 256x256 PNG is also grossly distorted. Therefore I had to add a 32x32 pixel PNG image, aptly named favicon-32.png. The updated HTML:

<link rel="icon" type="image/png" sizes="any" href="/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#004477">
<meta name="msapplication-TileColor" content="#004477">
<meta name="msapplication-TileImage" content="/ms-tile.png">
<meta name="theme-color" content="#004477">

I hope Firefox fixes their favicons in Bookmarks and History. Seems odd that the Tab icons always look great but the other icons look terrible on a HiDPI display.

Next 5 Articles

Instagram

Monthly Mentions

February 2017

  • LibreTaxi: Free and open source alternative to Uber/Lyft.
  • TTY: Toolkit to build CLI apps in Ruby.
  • Underlock: Ruby API for encrypting and decrypting.
  • Flutterby: Ruby static site generator.
  • Piskel: Free, web-based pixel art and sprite editor.
  • Commits.io: Create posters from source code.
  • wuzz: Interactive CLI tool for HTTP inspection.
  • Ping GPS: GPS locator with Bluetooth and cellular.
  • DuckDuckGo Short URL: Alternate short URL for the DuckDuckGo search engine.
  • Scoop: Watch yet-to-release movies and give feedback.
  • GridTab: Grid-based responsive tabs.
  • Minicron: Manage and monitor cron jobs.
  • Hopper: App for finding lowest air travel fares.
  • Typewolf: Typography resource for designers.
  • Open Source Guides: Learn how to launch and grow open source projects. By GitHub.
  • HTML Reference: A free guide to HTML elements and attributes.
  • Cliqz: Security and privacy focused web browser.
  • Stuff in Space: Realtime 3D map of objects in Earth orbit.
  • Vault: A tool for managing secrets such as API keys, passwords, certificates, and more.
  • What The Fuck Just Happened Today?: Daily news about Donald Trump and national politics.
  • Check! Before You Launch: Checklist before launching a new website or app.
  • Dat: Secure and distributed package manager for data.
  • Auth-Boss: Learn about different authentication methodologies on the web.
  • Logobook: Logos, symbols & trademarks from around the world.

Feel free to contact me if you require development services or have any questions / comments.