All Favicons for All Devices and Sizes

A site doesn’t seem complete without having a favicon. For some reason, I will usually immediately notice when a site doesn’t have one. It leaves me questioning the legitimacy or quality of the site over something that’s so seemingly irrelevant.

Favicons have evolved beyond being a simple bookmark “favorite icon” though. They’re even more relevant now with responsive design and mobile devices. A user can now “pin” any website or webapp to their home screen (or desktop) to give them the feeling of a quick-access native application. With Windows 8, Microsoft has even gone so far as to let any old website or application even send notifications to the favicon (“tile” in this case).

My Thoughts

I think it’s definitely worth setting up favicons for as many different devices as possible. You never know who will want to pin or favorite the site on whatever device they have. That extra bit of effort can go a long way, as with many things in development. The problem is the standard for favicons is terrible right now. Between all the different devices, operating systems, browsers, and screen resolutions out there, to support everyone is a huge pain and it pollutes the head of your HTML document with numerous lines of link tags. To be perfect every single time requires lots of research and testing.

I like the concept of an .ico file supporting multiple sizes in a single file, but what I really want is vector support for favicons (like an SVG image). This way I could do it once and know I’m supporting everyone’s needs, but that will probably never happen.

Note: It’s probably worth saying that favicon images need to be custom tailored in some cases. For example, you may want a different image depending on the size. So even if a vector image was possible, it may not be ideal.

Below you will find my default go-to for setting up favicons. There’s a ton of information on the web, and many favicon generators seem to generate different sizes to which they think the standards are. Skip to the bottom of this article if you’d like to check out those resources and references to create your own.

Creating a .ico file with multiple sizes

If you didn’t know, a .ico file can contain multiple .png or .bmp images. This is awesome because now you can support multiple sized favicons with a single file and line of code in your document’s head. This is what we will be creating:

<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">

This single file actually has five different images. It’s actually pretty easy to convert multiple .png images into a single icon file. There’s probably a ton of applications you can download to do it for you, but I’ll show you how to do it for free from the command line.

The first thing you need to do is install ImageMagick. For Mac users who use Homebrew package manager, you can simply type this from your terminal:

brew install imagemagick

If you don’t have Homebrew installed or that doesn’t work, there’s this installer. Lastly, if you’re hardcore or still having trouble, try to follow these instructions.

If everything was successful, you should see a huge list of instructions from the command line when you type:

convert -v

Now to convert multiple .png files into a single .ico file, just follow this format from the terminal:

convert pathtofirstfile pathtofsecondfile pathtothirdfile [...] outputname.ico
convert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.ico

The last thing that I think is important to note is to make sure you put the newly created favicon.ico file in the root of your site, and make sure you reference it with a full absolute URL. This:

<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">

Not this:

<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/favicon.ico">

And not this:

<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/images/favicon.ico">

For Windows users, you can install ImageMagick here. It should work in a similar way.

Favicons for Android, iPhone and others

Android-vs-iOS

Again, this is something you should look into yourself to make sure it fits your needs and works for you, but this is nonetheless a good starting point.


<link rel="apple-touch-icon" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/wp-content/themes/thirty/img/icons/favicon-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/wp-content/themes/thirty/img/icons/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/wp-content/themes/thirty/img/icons/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/wp-content/themes/thirty/img/icons/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/wp-content/themes/thirty/img/icons/favicon-152.png">
        

You’ll also want to add this in your document’s

<meta content="yes" name="apple-mobile-web-app-capable">
            <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Favicon for Windows 8 Tile

Microsoft-Will-Tweak-the-Windows-8-1-Start-Screen-to-Act-Like-a-Start-Menu

This is just for the most basic icon. They recently added support for even more sizes though.


<meta name="application-name" content="Scotch Scotch scotch">
<meta name="msapplication-TileImage" content="/wp-content/themes/thirty/img/icons/favicon-144.png">
<meta name="msapplication-TileColor" content="#2A2A2A">
        

And All Together


<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/wp-content/themes/thirty/img/icons/favicon-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/wp-content/themes/thirty/img/icons/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/wp-content/themes/thirty/img/icons/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/wp-content/themes/thirty/img/icons/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/wp-content/themes/thirty/img/icons/favicon-152.png">
<meta name="application-name" content="Scotch Scotch scotch">
<meta name="msapplication-TileImage" content="/wp-content/themes/thirty/img/icons/favicon-144.png">
<meta name="msapplication-TileColor" content="#2A2A2A">