This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
167
How-to 6 min read July 25, 2019

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
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

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits