Add a favicon to your website

Do you want your website to stand out when your viewers look at their browser bookmarks? In this post, John Espirian explains an easy way to create ‘favicons’ – the small images that represent each site.

Back in 2012, my colleague Louise Harnby wrote a post about how to get a favicon for your website. I thought it was about time to revisit that topic and recommend a new and easy way of creating and displaying your own favicon.

What is a favicon?

A favicon is simply an image that is used to represent a website. You’ll often see favicons in your browser’s address bar, tabs, bookmarks or other overview screens. Here’s an example.

Favicons are images that represent sites

Favicons are images that represent sites

You’d think that creating an image like this would be easy. Just scale down your logo or photo and you’re done, right? Well, no. There are now so many browsers and devices with different display requirements that creating a single favicon image really won’t do the trick any more. Instead, you need to create multiple favicons and then link to them all in the <head> section of your site’s pages.

How do I create a favicon?

The most comprehensive way for creating a favicon is to use the following service.

Real Favicon Generator – realfavicongenerator.net

A simple, free service for creating favicons

The site asks you to upload a source image and then proceeds to generate the necessary favicons for you as well as the HTML code that needs to go on your website.

When supplying a source image, remember the following:

  • Use an image that is at least 260×260 pixels
  • Whatever its size, make sure the image is square

Download your favicons

Once you’ve supplied the source image, Real Favicon Generator will generate several favicons that you can then download to your computer as a zip archive. Here’s what my download looks like when the folder is opened:

Espirian favicons

These were all generated automatically

Upload all these files to your webserver. Place them in the same folder as your homepage’s index file.

Edit the <head> of your pages

On the page where you download the favicon image archive, you’ll see a block of code like this:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#112277">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Copy this code into the <head> section of your site’s pages.

Note that because some customisable options are presented when you supply your source image, the resulting code you see might not be identical to what I’ve shown above.

Once you’ve uploaded the images and edited the <head> section of your site’s pages, your favicons will start working straight away. You might need to refresh your browser cache to kick things into action, but that’s about it.

If the process doesn’t work, it’s almost certainly because

  • the images have been uploaded to the wrong folder, or
  • the code has been pasted into the wrong place.

I’ve used the service enough times to know that it works very well.

Conclusion

Favicons are one of those things that tend not to be noticed unless they’re really bad or missing altogether. You can take the hassle out of creating and displaying your own favicons by using Real Favicon Generator. Give it a whirl and add an extra touch of professionalism to your website.

Update (14 November 2014): If you’re using a system that doesn’t give you full access to the webserver, you may need to jump through some other hoops to display your favicon. For example, Weebly users should follow the advice in this Weebly favicon article.

Thanks for reading,

John Espirian

Subscribe for tips

Join 410 others on my free Espresso ☕️ email list to receive:

  • blog updates
  • free ebooks
  • discounts on consultancy
  • offers and secret stuff

🔒  No spam, I promise • privacy policy