We use cookies to make Serpstat better. By clicking "Accept cookies", you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Learn more

Report a bug

Cancel
2162
How-to 6 min read

How to add a favicon to a website

The secret to successful site management lies in the details ignored by sites' owners. To ensure normal operating, the site needs to be unique and memorable. Most of the managers think that SEO is enough for effective site promotion. Nowadays, growing attention is given to details like design elements which are unobtrusively taken into the reader's account because they are easily remembered. One of these elements is favicon.

What is favicon?

Favicon is a small icon representing the site's logo. It can be seen in browser's tabs, in bookmarks, in front of a page's name and in browsing history. For some browsers, the favicon is also located in a search bar before the URL.
Favicon example in browser
Favicon example in the browser history
Other than a logo, favicon can include a symbol mirroring the subject of the site (the first letter of a company's name). The icon's size is usually 32x32 or 16x16 pixels.

What is favicon for?

The icon, provided by favicon, plays an essential role in site branding. A concise image helps users to memorize the site. Thus, granting its uniqueness: a site without the favicon looks unattractive in comparison to others. Users just see a default Windows icon instead of the eye-catching and memorable picture. Such an icon had been used even before a flat screen was invented.
Site favicon in Google Chrome
Moreover, favicon usage provides other advantages:
1
Confidence. First of all, users pay attention to the way the site looks. They value how professionally the design is made and whether all the details are taken into account or not. Sites lacking such an icon will struggle to get the trust level earned by those paying attention to small details.
2
Recognition. Favicon means comfortable searching as well. When a user is looking for a certain page in tabs, bookmarks or history, the first visible thing is an icon. Nobody pays attention to the text. Imagine that you are looking for something on the Internet and there are about 20 opened pages in the browser. You will see almost nothing except the icons.
Sites icons in the browser

How to create a favicon?

The icon is easy to create. You don't have to be a designer or have some professional skills to do this. Using online-services, favicon is created in just a couple of minutes.

All the sites below are user-friendly. We gathered several services that allow you to create a unique icon for free.

It's a simple and clear service. You can draw your own favicon or import existing images from your PC. Likewise, you can add animation, make several images or just choose an already-made icon.

This service allows creating icons not only for PC browsers but for mobile and tablet apps too. Here you can also import your own image or find already existing ones via search.

Besides favicons generating, this site can give you an idea about the way your site looks on different devices. It will point out some drawbacks and help you to deal with them too.
Favicon generator online
Every service creates a code which you should paste into the site catalog. The favicon adding process will be explained below.

You may use professional design services to create the favicon or do it yourself using Photoshop or any other editor but these tools are not always cheap and simple.

How to add a favicon to a site?

To make the icon visible for every user, it needs to be added to the site catalog. A browser will find it and show it on the site if the icon's format is 16x16 pixels. The browser can't show 32x32 images automatically; you will have to do this manually. But it is recommended to make icons in both formats.

Type the favicon display in the page code:

  1. Add a favicon.ico file to the root folder — a site catalog;

  2. Type the following in the pages' code:
<link href="http://your-website.com./favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="http://your-website.com/favicon.ico" type="image/x-icon">
Browsers cash icons, so if you decide to change the favicon in the future, it's better to use temporary code. Otherwise, you will change the image on a server but users' browsers will still display the old one for some time.
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />
Here v=2 means icon version. Add 1 every time you change the image (v=3, v=4) and browsers will save the latest version. After you definitely know the exact favicon you want to use, delete this link without any hesitation.

Conclusion

Favicon is an important part of any website. The high-qualified and unique image becomes the second face of the brand. It helps users to remember the site and find it among lots of other ones in a subtle way.

Creating and adding the favicon will take you less than 10 minutes. There are a lot of free online services with different functions and a great choice of samples.

This article is a part of Serpstat's Checklist tool
Checklist at Serpstat" title = "How to add a favicon to a website and why it is important 16261788301938" />
Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.
Try Checklist now

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us