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.
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
- 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:
Upload all these files to your webserver. Place them in the same folder as your homepage’s index file.
<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.
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,
Keep in touch
Join 323 others on my free Espresso ☕️ list and you'll receive:
- 🔍 blog updates
- 📘 free ebooks
- 💰 discounts on consultancy
- 🎟 offers and secret stuff