The 2019 Guide to FavIcons for Nearly Everyone and Every Browser

How to Create Favicons for Your Website

Once upon a time, creating a favicon only required making a single 16x16 pixel icon, and placing it in the root directory of a website. This still works today, albeit with some caveats.

Posted:

Viewpoints

With modern devices, displays tend to feature high density (retina) displays. These devices and displays feature more pixels per square inch. The end result is much sharper text and images, however generally graphics need to be optimized for high resolution displays. The classic 16 x 16 pixel favicon appears pixelated on these devices and displays thus additional steps are needed. To make matters more confusing, many newer devices, for example, iOS and Android, have their own preferred favicon replacements.

This is a how-to guide for creating favicons for (almost) every conceivable browser.

The goal is to provide the best results (non-pixelated) with the least amount of work, and most importantly maintaining one’s sanity while doing so.

NPR favicon?
Image: NPR.org does not have a retina display favicon thus it appears pixelated

Specific interests? Jump ahead! Here's what we cover in this article:

A brief history of the Favicon.ico

The Favicon was originally introduced in March 1999 by Microsoft alongside Internet Explorer 5’s new “Favorites” tab. Microsoft’s nomenclature dubbed bookmarks in Internet Explorer as “Favorites”. Bookmarks in the favorites tab had the option of including a favorite icon next to each URL. If a website had a favicon.ico file placed in the root directory of its domain, the favorite bookmark entry would include the custom icon. Shortly after, in 2000, the World Wide Web Consortium (W3C) adopted the favicon for the HTML 4.0 (with intentionally vague specifications).

As early as 2001, web browsers began to adopt the favicon next to the URL and soon became ubiquitous across the web, migrating to the now familiar browser tabs. Later, both Firefox and Safari added PNG support for Favicons, marking the first major change to the Favicon format. In 2008, after the launch of the initial iPhone, the favicon took one more major turn after Apple introduced the “apple-touch-icon.png”, a higher resolution version of the Favicon used for pinning to iOS’s dock. This created the precedent for multiple favicon sizes and helped cement PNG as the preferred format over Microsoft Windows’ ICO file format.

The W3C, Recognizing the necessity for versatility, in HTML5 included a standard for multiple sizes for the favicon which proliferated due to high density displays, new operating system user interfaces, browser changes and mobile devices. Today we have custom favicons for everything from Google TVs to Microsoft Windows Metro tiles.

A (mostly) complete list of all the known Favorite Icon Sizes

Below is a compiled list of the current known favorite icon sizes, this list is based off of the Favorite Icon Cheat Sheet.

Size Name Purpose
32x32 favicon-32.png Standard for most desktop browsers
57x57 favicon-57.png Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
76x76 favicon-76.png iPad home screen icon
96x96 favicon-96.png GoogleTV icon
120x120 favicon-120.png iPhone retina touch icon (Change for iOS 7: up from 114x114)
128x128 favicon-128.png Chrome Web Store icon & Small Windows 8 Star Screen Icon*
144x144 favicon-144.png IE10 Metro tile for pinned site*
152x152 favicon-152.png iPad touch icon (Change for iOS 7: up from 144x144)
167x167 favicon-167.png iPad Retina touch icon
(change for iOS 10: up from 152x152, not in action. iOS 10 will use 152x152)
180x180 favicon-180.png iPhone 6 plus
192x192 favicon-192.png Google Developer Web App Manifest Recommendation
195x195 favicon-195.png Opera Speed Dial icon
(Not working in Opera 15 and later)
196x196 favicon-196.png Chrome for Android home screen icon
228x228 favicon-228.png Opera Coast icon

That’s a grand total of 14 different icon sizes and there’s a few extreme edge cases not listed here (Google's Web App Manifest notes that Chrome accepts favicons in increments of 48px, and defaults to 192 or 512) . The icons denoted by an * require even more work. Microsoft requires msapplication-TileColor and msapplication-TileImage meta tags in order for IE10 on Windows 8 to recognize the Favicons, and IE11+ and Windows 10 requires a browserconfig.xml.

Seems like a headache doesn’t it? To meet the favorite icon specifications of all the current browsers we need:

  • 14 favicons
  • Links in your website’s <head> tag for each size
  • Special IE10 meta tags in your <head>
  • A special XML file for Windows’ (8.1 and above) start menu tiles

Why Not SVGs?

Some readers looking at this list may be wondering about Scalable Vector Graphics (SVG) as a smarter solution instead of generating icons at every conceivable resolution, as icons are one of the best use cases for vector imagery. As of writing this only Firefox and Safari support SVG favicons (with some caveats) See CanIuse.com for more details.

(Author’s note: while writing this, after checking about 50 major websites, Instagram was the only site that had an SVG favicon option on its website)

Sanity Check: Photoshop / Automator Actions / Sketch Template

I’ve created three separate ways to generate 14 favicon sizes. The three options are as follows:

  1. Photoshop Action - If you have Adobe Photoshop, this will allow you to use a Photoshop action to quickly generate 14 icons from a source file. Photoshop Actions allow Photoshop to perform automated tasks like resizing and exporting files.
  2. Automator - macOS/OS X provides an OS level scripting utility that allows one to automate tasks such as moving/renaming files or tapping into various application functions like Preview. I’ve created an automator script that will perform the same functionality as the Photoshop action. The advantage is this does not require Photoshop but does require a Mac.
  3. Sketch Template - This is the least automated function. It is a blank template with all the exports set up with the 14 separate sizes. Simply paste the icon within the guides and hit export, and it will export all 14 favicon sizes as PNGs.

What you need absolutely need:

  • A square PNG image, 228 x 228 or greater.
  • Photoshop (Win/Mac) or macOS/OS X or Sketch

Nice to have:

  • An Image with an Alpha layer (transparent background)

Supported Browsers:

IE11, Edge, Chrome 4+, Firefox 2+, Opera 10.1+, Safari 3.1+, iOS Safari 6+, Google TV, Android Browser 2.1+, Chrome for Android, Firefox for Android, UC Browser for Android, Samsung Internet, QQ Browser, Chrome Store, Windows 8+ pinned sites.

What these utilities will not do:

Sadly, this utility will not create a classic favicon.ico file. Photoshop still has no way to create a .ico file nor does Automator or Sketch. See: Supporting IE6 - IE10 (and the Safari problem) in this post for more details.

Also, this will not “treat” the icons. 32 x 32 pixel and 16 x 16 pixel icons may require manual touch up in a graphics program. Remember, it is more than possible to create individual versions of icons based on resolution. This utility is a shotgun approach that will allow a base minimum for you to improve upon once all the icons have been created. For the best looking low resolution icons, I highly recommend considering performing manual touch up for the 16 x 16 pixel icon and the 32 x 32 pixel icon.

Downloading the Photoshop / macOS Automator / Sketch Template

You can either go to the github project found here or click the direct download link.

How To Install Favicon Photoshop Action

  1. Download the Photoshop Action and double click to decompress
  2. In Photoshop in the actions menu, click the hamburger menu and select load actions
     FavIcon - Actions
  3. Locate the Favicon Creator

Using the Photoshop Action

The default image must be a square and above 228 x 228 pixels (I recommend using a higher resolution source image). Open the image you’d like to use for your favicon. Click play and the action will create 14 icon sizes in the PNG format.

Using the Automator Script

FavIcon Creator

Drag and drop the file into the Automator script. The default image must be square and above 228 x 228 pixels (I recommend using a higher resolution source image). Click play and the Automator will create 14 icon sizes in PNG.

Using the Sketch Template

Open the sketch file. Paste your graphic within the guides and hit export, and select the “favicon” export.

Optimization

Unoptimized PNGs from Photoshop tend to be quite large. I highly recommend for macOS users using the free application ImageOptim for lossless PNG compression and Linux users use Trimage. Both are easy to use. Drag and drop all the newly created PNGs to shave off valuable kilobytes off images without any quality reduction. macOS/Linux users can also use PNGOUT, a command line interface utility for PNG optimization.

For the more technically savvy, macOS users, the PNG optimization utility ImageAlpha (works in tandem with ImageOptim) allows users to use indexed color profiles to even further reduce file sizes.

Lastly, PNGquant works natively from Photoshop for Windows/OS X and TinyPNG provides free service usable from your web browser on any platform.

Supporting IE6 - IE10 (and the Safari problem)

For the truly obsessive, IE10 and below do not support PNG favicons, only ICO. Depending the source, IE10 and below still makes up for roughly 0.2%-1.4% North American web users in April 2017. Fortunately, month by month, this keeps decreasing but differs based on regions of the globe and even on a per-country / language basis. IE10 was released on September 4th, 2012 as the default browser in Windows 8 and included in Windows 7 SP1 but as Windows 10 slowly replaces Windows 8, Internet Explorer users are increasingly switching to Microsoft’s IE replacement, Edge.

If you choose to include a favicon.ico for old IE users, there is a major Safari caveat. As of writing this, if both a ICO and PNG are included in your HTML, the desktop version of Safari will use the ICO file instead of the PNG. This is a problem since most icon generators only create 16 x 16 pixel icons. Retina displays will show the less appealing 16 x 16 icon instead of the beautiful 32 x 32 PNG. However, at no expense to IE users, MS’s .ico file format can support both a 16 x 16 pixel and 32 x 32 pixel icon in a single file. IE10 and below users will see the 16 x 16 icon whereas retina Safari users can enjoy the much higher resolution 32 x 32 pixel favicon.

It takes a few extra steps to create retina compatible favicons, below is an adapted version of John Gruber’s “DaringFireball.com: Creating Retina Caliber Favicons” recommendation. This method requires purchasing IconSlate ($5).

Using IconSlate to create a retina favicon (The DaringFireball method)

  1. Open up IconSlate and create a new project. Only select .ico format, click the arrow next to the ico and check only the 32 and 16 check boxes.
  2. Name your icon “favicon” (no quotes)
  3. Highlight the 32 square and paste in your 32 x 32 pixel icon
  4. Highlight the 16 square and paste in your 32 x 32 pixel icon or if you have a custom 16 x 16 pixel, paste that file into it.
  5. Click the Build icon (if for some reason the Build icon is greyed out, go to File -> Build

Online HTML + XML generator

Below is a quick online code generator I wrote. It will generate the necessary HTML and XML to use your icons.

  1. Enter the path to your favorite icons. (if you elected to create a favicon.ico, place that in the root of your domain regardless of your other icons).
  2. Select a background color for your icon for Windows tiles.
  3. Scroll down to the code and copy and paste it or download the files.
  4. Place the XML file in the same directory as your favorite icons.

See the Pen Favicon HTML/Browser XML Generator by Greg Gant (@fuzzywalrus) on CodePen.

Web App Manifest

A Web app manifest is a simple JSON file the details how a web app should function when an web app is "installed" (linked within Chrome's app panel). This JSON file includes declarations for Favicons. For more info, see Web App Manifest

Congrats! You’re done!

A good way to test your new favorite icons is to use a mobile device or mobile simulator and pin your website to your dock/home screen. You should see your new favicon icon on your dock/home screen.

Join in the Fun: Contribute to the github project here: https://github.com/fuzzywalrus/Photoshop-FavIcon-Action

 

[Updated 12/7/2018 for 2019] 

comments powered by Disqus