Create a Favicon Using PNG Images

By

Favicons are those tiny images that websites display on browser tabs and in bookmarks, as in the blue Fynydd square icons above.

The file favicon.ico sits in the root of your website, and a simple meta tag is used to tell browsers that it's there.

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

What you may not know is that they can be created such that many different image sizes are all contained inside the single favicon.ico file.

The big question is how to create this file. There are tools out there to do this, but if you're interested in creating one yourself and already have (or can create) the images as PNG files, you can do it at no cost.

Install ImageMagick

The first thing you need to do is install ImageMagick. This is a cross-platform image manipulation and transformation tool that doesn't have a visual interface. It's a command line utility. It's been a popular tool for years, and many other apps use it under the hood.

OS X

For Mac users who use the Homebrew package manager, you can simply type this in Terminal:

brew install imagemagick

This will get you the latest version, and is the recommended method for installation. Use the Homebrew link above to install that first, if necessary.

If you would rather install ImageMagick without using Homebrew, you can visit Cactus Labs and download the installer they've put together.

Windows

Windows users can visit the ImageMagick website and download the installer directly from them. Use their recommended installer. The others are for special use cases.

Test the Installation

From the OS X Terminal or Windows Command Prompt, run the command below to test the installation.

convert -v

You should see a long list of instructions for using the tool.

ImageMagick version information

Create the Favicon

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

convert file1 file2 file3 [...] favicon.ico

So, gather your PNG images. There should be a file for each of the following pixel dimensions: 16x16, 24x24, 32x32, 48x48, and 64x64. Name them something like "favicon-16.png", "favicon-24.png", etc.

In your Terminal or Command Prompt, change the working directory to the location of those PNG images. And then execute the command below to create the favicon.ico file.

convert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.ico

How to Use the Favicon

The favicon.ico file is part of an old technology, and as such, it's not very flexible in where it can be placed. So make sure you put it in the root of your site. And also make sure you reference it with an absolute URL (include the http and such). Below is an example.

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

Site Icons for iOS and Android

Modern desktop and mobile browsers make use of PNG images as the site icon. So it's always a good idea to include tags for those as well.

Below is an example of proper tag usage for these icons. Place these tags within the <head> area of your page markup. As in the previous example, the numbers in the file names represent the pixel width and height of the image.

<link rel="apple-touch-icon" sizes="57x57" href="http://fynydd.com/icons/favicon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://fynydd.com/icons/favicon-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://fynydd.com/icons/favicon-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://fynydd.com/icons/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://fynydd.com/icons/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://fynydd.com/icons/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://fynydd.com/icons/favicon-152.png">

Site Icons for Windows 8 Tiles

Windows 8 tiles can also use icons in much the same way as modern browsers use PNG images. The syntax is similar, with the addition of defining a background color for the tile itself. Place these tags within the <head> area of your page markup.

<meta name="application-name" content="Fynydd.com">
<meta name="msapplication-TileImage" content="http://fynydd.com/icons/favicon-144.png">
<meta name="msapplication-TileColor" content="#08F">

Michael directs all design initiatives, heads marketing, and builds cool software for Fynydd. He's also a husband, father, avid reader, advocate for reason and science, and autodidact.

Fynydd is a software design and development company that creates awesome user experiences for all kinds of devices. Our expertise has helped people to do things like:

  • Create a new product or service.
  • Automate processes and workflows.
  • Bring a mobile strategy to life.
  • Better interact with their customers.

How can we help you? Contact us and let us know.