What Is a Favicon and Why Does It Matter

What Is a Favicon and Why Does It Matter
1 Star2 Stars3 Stars4 Stars5 Stars (34 votes, average: 4.71 out of 5)

5

Loading...
Table of Contents Table of contents

What is a favicon

Favicon is the classic ICO file of 16 × 16, with 16 or 24-bit color and transparency support. Much later, it appeared in a 32 × 32 size, but older browsers still reduce it to 16 × 16. Today, it is an important component of the website interface, which also plays an important role in advanced web applications. It is shown at the top of web browser. 

This component is a kind of visiting card, so it should be created in the same style as the site – the more your website and icon have in common, the better. The main function of such branded icons is to visualize the website’s main functions in one little image. In addition, the icon should be relevant and clear: the user should immediately understand what is drawn on it, and it also has to be memorable.

Favicon Checker

Check if your website has favicon and how it is displayed in different browsers

Why a favicon matters

The main reason your website should have a favicon icon is improving user experience. 

Obviously, it is much easier to find the needed bookmark by image, associated with a certain website, rather than looking through different URLs. Today, you can find favicon used by all popular and modern websites and browsers in its browsing tabs.

Global companies have recognizable (popular) icons, which help them stand out from the crowd of other web resources (those are good favicon examples to look at). Without a doubt, it is a useful tool for sites of all kinds. It was created for a fast visual search of the necessary website among thousands of bookmarks on the Internet, which helps your target audience to find you faster and easier.

img-border
Displaying favicons in the browserimg-close

The website without personally-identifiable icon will go with the generic symbol of a browser, which means that it is a must-have for you if you care about your web resource branding.

Be attentive, some search engines show website favicon on the search engines results page. Google started to do it in 2019.

Favicon examples

As favicon became an outstanding element in web design and website creation, to inspire yourself on making your own favicon, see the examples below. There are the most recognizable favicon images of popular websites you see very often in the web browser:

img-border
favicon examples in browserimg-close

To get more information about how it is displayed in different devices or browsers, use our on page SEO checker and make all the needed corrections.

img-border
sitechecker favicon exampleimg-close

How to create a website favicon

To get a favicon of your dream you can hire a web designer or use online generators. The first option is preferable, but it needs money. The second one is quite convenient and simple, but there is a chance you won’t get the unique image for your website (as it free, it is used by everyone). 

First of all, you need an icon. Let’s search through some databases with free icons –  Iconfinder or Freepik. After you picked up your future favicon image, it is time to resize it properly. Here is the list of favicon generator tools:

logo

Check website for SEO mistakes

No favicon hurts website's usability, but missing Title and Description tags can lead to traffic loss.

Website audit

As you see, you even do not need a graphic designer to make it. However, if you are planning to launch a global site and going to have worldwide branding, then probably you should better turn to a professional designer in order to create something unique and matching your brand.

Nevertheless, if you are going to make it yourself, it can take about 10 minutes for a simple one – you only need to upload your website logo to one of the sites mentioned above and download the ready file. It is just as easy! 

How to create an icon in Photoshop

Photoshop is a great program for working with images! It is a useful tool that will help you out in many different situations and even allow you to create a custom website icon. If you are a designer, of course, it is the best option to use Photoshop program, but if not – we would recommend to use the websites we mentioned before and save some time. The problem is that Photoshop does not support “.ico” files. Therefore, you need to download and install its plugin from Telegraphics.

In the selection menu, folder FILE, you should create a new file, with canvas 64×64 pixels (it is easier to work with the bigger size), paste your logo into the document, and make all the necessary changes.

After that, select IMAGE folder, go to IMAGE SIZE and change it to 16×16 pixels, and do not forget to make sure your icon does not blur by clicking on RESAMPLE IMAGE and BICUBIC SHARPER. When you are happy with the results, open FILE folder, and press SAVE AS.

How to add a favicon to the website

Once you have a ready file, it won’t be too much of a deal to place it on the server. Firstly, you need to get access to the text editing tool and root folder on your website. It helps you to adjust the HTML code of your website. Below it is a quick guide:

  1. Upload the relevant file to your server. Then write your browser address bar to your FTP server. Press enter button, log in, and just upload the file to the root folder.
  2. Change HTML page of your website. Find and download “header.php” or “index.html” file from the server. If your site made with HTML plain, you should insert the code in the head area of the “index.html” file:
<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">

If you are working with WordPress, insert the code in the head area of the “header.php” file:

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">

That is it! You will be surprised by how easy it really is.

 

email__icon

Be the first to know about new articles

Reset Password

Enter your e-mail to reset your password

Your email

Check Your Email

We have sent you a new link to change your password. Check your email and follow instructions envelope

Your password has been reset successfully!

close
conversation

Contact us

Consult our market intelligence experts, and learn how you can benefit from Sitechecker.

ERROR: The Name field is empty.

ERROR: The Last Name field is empty.

ERROR: The Work Email field is empty.

ERROR: The Message field is empty.

Thank you for registration!

We are redirecting you to PayPal

Check Your Website SEO Performance

analytics

Launch website audit to find issues and increase website SEO score

Must be a valid URL with http:// or https://
No limits! Upgrade your account to crawl this domain