Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm busy on a WordPress site and have come to the stage to add the finishing touch, being the favicon. I'm primarily a developer so graphics and icons aren't my strongest point.

What are the best practices when creating a favicon (in terms of sizes etc, I already have the design)? I'd like to accommodate for every possible device, be it mobile, tablets, retina displays etc. Also I don't want it ending up blurry so I need to know what pixel density to use and everything.

If there are some Mac apps or online tools that will do this for you (and do it properly) that would be great as well. Otherwise I know how to find my way around Illustrator and Photoshop.

All in all, just some advice on the best practices to use when doing favicons in the future which is - 2014.

share|improve this question
6  
Last Years news but: stackoverflow.com/questions/19029342/…. Any reason those won't cover your needs? – KMSTR Feb 4 '14 at 8:01
    
Thanks @KMSTR, that cheat sheet github.com/audreyr/favicon-cheat-sheet is exactly what I was looking for. – Dean Gibson Feb 4 '14 at 8:12
    
@KMSTR you should make that your actual answer and link to the github so you can get credit and we can get this question accepted :) – Johannes Feb 7 '14 at 22:21
up vote 24 down vote accepted

The basics from Favicons - Best practice for 2013:

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Tile Icon tileicon.png (144x144)

Apple Touch Icon apple-touch-icon-precomposed.png (152x152)

And a "painfully obsessive" cheat sheet to favicon sizes/types on GitHub.

Always worth a read: http://www.jonathantneal.com/blog/understand-the-favicon/

share|improve this answer
    
I have been reading that up to 180x180 is now called for with iOS 8. – Drewdavid Jul 14 '15 at 0:18
    
Can you link a source? – KMSTR Jul 14 '15 at 4:37
    
Sure. I'm seeing 180px now mentioned in quite a number of places, but this is the best I could find from Apple: developer.apple.com/library/ios/documentation/UserExperience/… – Drewdavid Jul 14 '15 at 15:40

This tool is a super time saver. Try it out! It takes care of everything for you.

Upload your image at something around 800px x 800px so its nice and crisp.

http://realfavicongenerator.net/

Also add this meta tag so you can name your icon if some saves to there iOS device.

<meta name="apple-mobile-web-app-title" content="Website Name">

Hope that helps!

share|improve this answer

Use this GRUNT task to generate all possible variants:

https://github.com/gleero/grunt-favicons

Generates all known types and sizes icons from PNG image. Uses ImageMagick.

Input: square logo in png. You can also keep near the source files with resolution prefix e.g. source.16x16.png.

Output:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Adds changes to html file.

share|improve this answer

What to include?

The Minimum

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

For the Obsessive

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico is the oldest of the favicons, it has worked since before a lot of people reading this were born and still works perfectly today.

Microsoft recommends including images sized 16x16, 32x32 and 48x48.

The standard way to define your favicon:

<link rel="shortcut icon" href="/favicon.ico" />

Browsers will search the root directory of your website for favicon.ico so you can omit the link. Some older browsers will default to the declared favicon.ico even if there is a more appropriate sized PNG declared, so leaving the ICO undeclared in the root and declaring different sized PNGs may be a good idea.


favicon.png

HTML5 introduced the sizes attribute to help declare multiple sized icons. Using specific PNGs gives you greater control over the sizes used and means only the correct image is being loaded.

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

The sizes you declare depends on the devices you want to support. Some common and not-so-common sizes:

  • 32x32
  • 48x48
  • 64x64
  • 96x96
  • 128x128 Chrome Web Store icon
  • 160x160 Chrome for Android
  • 192x192 Chrome for Android
  • 195x195 Opera Speed Dial icon
  • 196x196 Chrome for Android
  • 228x228 Opera Coast icon

Apple Touch Icon

iOS web clip icons come in a number of sizes for different devices and resolutions. You can specify one or a number of sized icons, if no icon at the relevant size is found, the generic icon with no declared size will be used.

If no icons are specified using a link element, iOS will search the root directory for icons with the apple-touch-icon prefix. iOS devices aren't (strangely enough) the only devices to use these icons (Android Chrome, for example) so declaring them is the safer option.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

Windows Tiles

Tiles are used when you pin a website to the start screen on either Windows or Windows Phone and come in a number of sizes.

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

The recommended image sizes are larger than the names of those images suggest. These are the recommended sizes from microsoft.com

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

Tile color and title

The default behaviour of tiles is to take the title of the tile from the <title> tag and respect any transparency in the tile images, showing the background color. You can customise the color and title using these meta tags:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

All the msapplication meta tags can be removed and replaced with an XML file in the root folder called browserconfig.xml. The XML file should look like this:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Further Reading & Resources

share|improve this answer
    
Bonus points for providing all the further reading and resources, particularly RealFaviconGenerator.net. That is an excellent resource. – bemdesign Apr 21 at 22:00

http://faviconit.com

will create about 15 different icon sizes for all devices from one hi-res PNG.

share|improve this answer

I too was looking for a favicon solution and didn't want to rely on any third party web services. I couldn't find any generic solutions that would work as a simple build step so I created faviconbuild. It relies on ImageMagick so you can download the latest version of that for your system or use some I have provided in my releases.

I have released it under the MIT license so anyone is free to use it for commercial or personal use, or simply get some inspiration from it. If you find any bugs or want to extend it feel free to get involved.

I will be updating the project page with more detailed information, but it already has a really handy and standard help menu and works on Unix, Mac, and Windows.

You simply run either the .bat or .sh script in your terminal.

ex for Windows:

faviconbuild.bat -h

or for Unix / Mac (or Windows if using Cygwin):

faviconbuild.sh -h

This will give you the version information along with the available options. The script is designed to take an input image and output all the various images required along with the required html markup to include on your website.

This is an example of how I am using it in one of my project currently:

./faviconbuild/faviconbuild.sh -i ./source.png

I simply placed the faviconbuild folder into a project specific folder so I didn't have to touch the actual project files and along side that I placed my source.png. The default behavior of the script is to put everything into a nested build folder that is gitignored so it doesn't clash with the project if you are using git.

If I am missing anything please submit a feature request.

I also have a blog post with more information.

I hope you find this useful.

share|improve this answer
    
Your "Example" downloads the entire project... – KMSTR Nov 4 '15 at 10:47
    
The "Example" currently downloads the last packaged release which includes ImageMagick binaries for Mac/Windows and an example source png so you can just run it to see the output. It is a little out of date as of this post by one commit as well but not missing much other then handling paths with spaces. I didn't include Linux binaries as there are a few different flavors and you can get that from a package manager. I'm open for suggestions if you have any. :) – Matthew Sanders Nov 4 '15 at 13:39
    
Just from a UX point of view, I don't think that "Example" leads to the expectations of a download but rather... an example. Maybe explain what exactly happens? Like, "Download latest Release". You have two buttons saying "download, but 3 downloading things. In that light I think visitors would expect a gallery or sorts behind "Example". – KMSTR Nov 4 '15 at 13:43
    
Gotcha, Thanks! I'm a software engineer by trade so my first pass at UX/UI is usually minimal :P. I will do something to make this more clear and possibly add an on page example with more info. – Matthew Sanders Nov 4 '15 at 14:11
    
I replaced the GitHub generated page with a Hexo.io generated page. I also removed the "Example" link and included it at the bottom of the page after more explanation. – Matthew Sanders Nov 5 '15 at 6:15

protected by Darth_Vader Dec 25 '14 at 7:25

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.