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.
|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|
|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)
- Download the Photoshop Action and double click to decompress
- In Photoshop in the actions menu, click the hamburger menu and select load actions
- 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.
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.
Next up is creating an OS X automator version of this, so you won't need Photoshop at all :D