I created a photoshop action after being annoyed with favicons and all the variants. It's on GitHub for download. There's quite a bit to it but it creates 13 icons in total. The support list is loooong! I tried to cover everything and this includes (but not limited to): 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.

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
128x128 smalltile.png 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
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
270x270 mediumtile.png Medium Windows 8 Start Screen Icon
(not in action)
558x270 widetile.png Wide Windows 8 Start Screen Icon
(not in action)
558x558 largetile.png Large Windows 8 Start Screen Icon
(not in action)

Install

  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
  3. Locate the Favicon Creator

Using the action

The default image must be square and above 228 x 228 pixels (I personally recommend using higher than this). Click play and the action will create 13 icon sizes in PNG.

Optimization

Unoptimized PNGs from Photoshop tend to be quite large. I highly recommend for macOS users the free application ImageOptim for lossless PNG compression. It's brainlessly easy. Drag and drop all the newly created PNGs to shave off valuable KBs off your images without any quality hit.

For the more obsessive, macOS users, ImageAlpha (works in tandem with ImageOptim) as it allows users to use indexed color profiles to even further reduce file sizes. PNGquant works natively from Photoshop and TinyPNG provides a free service usable from your web browser. See favicon cheat sheet for CLI utilities.

Favicons and you

As mentioned above this suite of Favicons includes support for (but not limited to): 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.

So what does that leave off? IE8-IE10 and Windows Start Screen Icons. IE8-10 require .ico formats. Notably if you opt to include a favicon.ico, Safari will use the Favicon.ico (macOS/OSX) over the PNG version. This means you will need to create a retina caliber icon. See DaringFireball's guide.

Due to the unusual formats of the Windows 8-10 tiles, I'd recommend creating these separately.

HTML (place in your head) 

    <!-- generics -->

<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32">

<link rel="icon" href="/path/to/favicon-57.png" sizes="57x57">

<link rel="icon" href="/path/to/favicon-76.png" sizes="76x76">

<link rel="icon" href="/path/to/favicon-96.png" sizes="96x96">

<link rel="icon" href="/path/to/favicon-128.png" sizes="128x128">

<link rel="icon" href="/path/to/favicon-228.png" sizes="228x228">

<!-- Android -->

<link rel="shortcut icon" sizes="196x196" href="/path/to/favicon-196.png">

<!-- iOS -->

<link rel="apple-touch-icon" href="/path/to/favicon-120.png" sizes="120x120">

<link rel="apple-touch-icon"  href="path/to/favicon-152.png" sizes="152x152">

<link rel="apple-touch-icon" href="path/to/favicon-180.png" sizes="180x180">

<!-- windows -->

<meta name="msapplication-TileColor" content="#FFFFFF">

<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

Is all of this really necessary/is there any penalty to including all these images?

How often do you really bookmark websites? It's an honest question. Favicons are most useful for desktop browsing as they give a nice indicator. The 32x32 is the only Favicon that truly matters, the rest are Favicons for bookmarking sites. If you only created a single 32x32 favicon, you'd support roughly 95% of desktop users and mobile users (albeit with caveats). The biggest losers are mobile Safari, Chrome for iOS, Opera Mini, Blackberry browser being the odd men out either requiring their own formats or not supporting the 32x32 at all. iOS Safari/Chrome only use use the favicon touch icon sizes for bookmarks within the dock. Chances are your users would never see the icon.

Today, Web browsers are very smart. The only requests made are for the favicon that matches your browser's parameters. Since it takes almost no effort with this action, you may as well include all the favicons for the edge case users.

Twitter Cards and FaceBook OpenGraph is the new Favicon

Users now expect Favicons and social media shares to be equally as compelling. Both OpenGraph and Twitter Cards take a little more effort to support: you need to fill out additional meta data but the image sizes can be found below. Either set can be used with regular meta data to make other services (Slack or iOS's Messages in iOS 10/macOS's Messages) social sharing with more beautiful site previews.

FaceBook Best Practices for Images practices

Twitter Summary Card with Large Image

Google MetaData Console

Future Plans

Next up is creating an OS X automator version of this, so you won't need Photoshop at all :D