Website Favicons!

The little icon no one ever thinks about

It’s no secret. Every major website has a favicon. This is a tiny little 16×16 pixel image that shows up on the top of your browser tab and bookmarks menu. Favicons serves only one purpose. That purpose it to identity your website. Just like your brand, logo, and color scheme a favicon must match the rest of your site.

Why use a favicon?

Some people will argue that a favicon is the something people see but don’t ever notice. They are only half correct! While it is an icon our eyes glaze over most of the time; it is still very important for distinguishing your website from the pack. Think about all the open tabs you have and how hard it would be to find the website you want when switching between them if we didn’t have icons. Think about all of your bookmarks and how hard it would be to find the webpage you want to view when reading the just the titles. All of those page titles start looking very similar after a while. This is why you use a favicon and distinguish your website from the pack.

Create a Favicon

It actually isn’t hard to create one of these little icons. The hard part is fitting what you want into 16×16 pixels. That’s not much room at all. A quick Google search will reveal that there are a lot of tools on the internet you can use to accomplish this but I will go over a couple.
This is a great tool for creating simple favicons.
This website allows you to upload an image and create a favicon from it. Your image uploaded must be a square for this to work properly.
Adding the Favicon to your website

Once you have created the little favicon you will be left with a file called favicon.ico. This file should go right into your root directory. Then in your header you can call it using this line of code.

< link rel="shortcut icon" href="favicon.ico" >
Animated Favicons!

That’s right. You read the title. There are animated favicons out there in the wild. If you are viewing this website with Firefox you will already notice my favicon is animated. As of writing this article Google Chrome does not support animated favicons. You are probably wondering how these work? Well they are not .ico files at all. They are actually .gif images. So in reality any 16×16 pixel gif can be a favicon. All you need to do is add this line of code to your header.

< link rel="icon" href="animated_favicon.gif" >
That’s All?

Actually, yes! Favicons are very simple to create and add to a website. Why you wouldn’t take ten seconds to add one is beyond me. It does a world of difference and sets your website apart from the pack.

Supported Browsers

Last Modified: November 19, 2017

Other Articles

Other Articles


Leave a comment!