Favicons are those tiny icons you see next to the site name in your browser’s tab. They’re a quick and easy way to tell which site you’re on at a glance.

Surprisingly, many people don’t know what they are or why they matter. A lot of sites don’t have them. Some sites use them inconsistently. But before we get into the details, let’s answer the most important question first:

What Are Favicons?

A favicon (pronounced as "fave-icon") is a tiny, iconic picture that depicts your website. 

Favicons are most commonly found in the address bar of your web browser, and they're often used in bookmark lists in internet browsers and feed aggregators. Well-crafted favicons are chosen to complement your website's logo or theme, so users can quickly and easily identify your website at a glance.

Why are favicons so important?

Designing a favicon is a simple but significant step in building a company website. It adds credibility to your site and helps improve your online branding and the faith of potential customers. They are an instant visual marker for the website that enables fast and straightforward recognition for web users and unifies all the different browser features into a well-branded browsing experience.

What kind of image file should your favicon be?

While most current browsers can recognize favicon GIF, PNG, and JPG formats, the old Internet Explorer still requires .ico files.

What size is my favicon supposed to be?

Another valid reason to employ the ICO format is to incorporate different favicons of various sizes in an ICO file. It's ideal to have a 16x16 pixel version, at least. 

Usually, I also include 32x32 and 48x48 versions. if users move the bookmark to their desktop, they'll see a smoothly scaled version of the icon rather than the 16x16 version spread out.

What are the formats I can use for a Favicon?

Unlike the past, where a favicon used to be in Windows ICO format, there are now a few multiple formatting choices. We are going to have a more in-depth look at each one below:

• Windows ICO: ICO seems to be the most commonly supported file in the digital world. The ICO's advantage is that it can incorporate various resolutions and bit depths that function very well and are particularly useful for Windows. ICO also provides a 32-pixel icon that is useful for the Windows 7 Internet Explorer taskbar. It's also the only format that doesn't use the feature.

• PNG: The PNG format is beneficial for several various reasons. You do not need fancy tools to make a PNG file, making it quite user-friendly. It offers us the smallest file size possible and supports alpha transparency. However, one major drawback of this style is that Internet Explorer does not support a PNG file and only supports ICO files.

• GIF: This format does not offer any benefits beyond the use of old browsers. Though they will attract more attention to users, they also tend to be irritating, and the overall opinion is that they are by no means an advantage.

• SVG: This format can be used and is recognized by the Opera browser.

• JPG: While this format may be used, it is not popular and will not offer additional resolution quality as good as PNG. Also, given the small size of the favicon, the JPEG ends up losing all its benefits.

• APNG: It is just an animated version of PNG, and while Firefox and Opera can support it, it has the same issues as animated GIF, confusing users while going through their interface.

Where are you going to see the favicon?

Favicons can be found next to anything that helps to identify your website. This involves tabs, history results, bookmarks, toolbar applications, and search bars. Take a closer look at the examples in the images below:

• History drop-down menu and browser history

• Browser tabs

• Bookmarks drop-down menu

• Search bar

Are favicons essential for SEO?

Favicons are not entirely responsible for your Search Engine Optimization, but they are partially responsible and are an essential tool to boost your search engine ranking. Below are a few examples of how a favicon will improve your SEO.

User-friendly and experience

Getting a user-friendly website implicitly increases the search engine rankings. Having a favicon available on your bookmarks, browser tabs, history archives, etc., enables your users to conserve time by enabling them to locate and search your website quickly, thereby increasing the chances of user engagement with your website. This will boost the time spent and user interactions with your website, ensuring that more eyes will be on your website for longer, thereby enhancing your SEO.

Branding your business

A favicon is a pictorial display of your website and company, so users can connect with your brand depending on the Favicon you use. Search Engine Optimization is all about marketing and branding, and the more prominent your website is, the more people you are likely to click on your website and know who you are.

How to make a good favicon

Several things need to be considered carefully when designing and creating a favicon for your website. Although it's small and basic, it can (and should) have a significant impact. It's necessary to ensure you deliver the best Favicon you can, as this is what users would associate with your brand. Here are a few things to remember when you build your Favicon:

Use the whole space

Often a favicon can't just be a mini version of your brand logo Consideration should be given to the total size of your Favicon. You better stick to 16px since this applies to all browsers (but you can find other examples below). If you resize your logo, make sure your spacing takes up the whole 16px, otherwise, your favicon might decrease in size.

Take a look at this example:

If you are planning to convert your logo-to-favicon, you can see that WordPress is cropping in the perfect size for your favicon. However, you can see spacing and parts of the websites name showing, you can see how it will show up:

This is a better example:

Simplicity

Although the Favicon is your brand's visual identity, you would want to make your design as simple as possible. The simplest favicons are the best. Due to the small size of the Favicon and the simplicity of the shapes used, colors are important for catching the attention of potential customers. Excessive detail will render the Favicon look messy and cluttered.

Brand Identity

Your Favicon is the visual representation for your brand, so its visual elements should tell users what your business is all about. This shows them immediately what your brand is all about and what it's doing. Even though this is quite difficult to do with such a small and cheap design, try to be innovative. 

The YouTube favicon is a perfect example, you can immediately grasp what the brand is (video) and what they signify at first sight.

Abbreviating

Getting the best visual may not be feasible for what your business is doing. The viable alternative is to use the first letter of your business name or acronym. You may also opt to use the abbreviation of your business name. Play around with a few different combinations, pick the ones that fit perfectly for you.

Coordination of color

The choice of color should play an important role, as well. Contrast colors make it easy for the eye to perceive shapes and your favorite central theme. Due to the limited nature of favicons, you need to reflect your company to the consumer, and the use of color can be crucial. Please remember that all browsers are a bit different from each other. For example, some of them have a gray, black, or white background over which your Favicon will be put. 

Where am I going to add a favicon?

Previously, favicons had to be explicitly renamed as favicon.ico and put at the root of your domain (e.g., http://www.mydomain.com/favicon.ico). This suggested that you could only get one Favicon for each domain, per time. However, more versatility has been introduced as favicons have been standardized. There are presently two methods to this. If you add a favicon without linking it to your HTML, you will note that some browsers can still find and view it. This is only possible if the Favicon is in the root directory.

One Favicon for the entire domain

If you want just one Favicon for your overall domain, just save the favicon.ico file to your website's root folder. When uploaded, it must be readily accessible from http://www.mydomain.com/favicon.ico. As soon as the file is uploaded, your browser should start showing the icon for all the pages on the website. If not, clear the cache of your browser and reload the tab.

Page-Specific Favicons

If you want more flexibility (and to be a little more consistent with standards), you can assign favicons on a page-by-page premise. To use this method, save the.ico file anywhere inside your web, such as an image/folder. Attach the following code to your page: Update the marked path to the latest icon file link. Note that we use the site-relative path (beginning with a slash) to be a valid link irrespective of the path of the current page. When using this method, you would always want to upload a backup icon to http://www.mydomain.com/favicon.ico for scenarios where a user is surfing or bookmarking non-HTML content (such as a PDF).

Check your Favicon for errors

Basically, searching your website on google will help you to see how your Favicon is displayed when you search instantly, or you can use this link example just to pull up the Favicon of your site: 

https://www.google.com/s2/favicons?domain=enteryoursite.com 

There is another way to confirm how Favicon appears on various devices: using special internet services, such as Realfavicongenerator. Nevertheless, if your Favicon doesn't turn up appropriately or at all on Google for some reason, probably check out the following:

1. Is the graphic image in the root folder of the resource in the PNG ICO or GIF file format?
2. Is the code that leads to the picture on the resource pages written correctly?
3. Is the Favicon basic and unique?
4. Is the favicon file open to the crawler search?

I want to highlight that the path to the image has a significant effect on how well the Favicon is shown. If you'd like to remove or modify your Favicon somehow, all you need to do is delete or change the favicon.ico file (GIF, JPEG, PNG). Even if you do all right on your end, broadly speaking, bear in mind that it takes time for search engines to archive favicons. Actually, there's a whole solely devoted bot that doesn't do anything but this. It uploads website icons to its server, so it can take up to a few weeks for your graphic image to be indexed.

Conclusion

Favicons are like those small details that we typically don't pay too much attention to. Still, the reality is that far from being meaningless, they are a significant part of the network, both from a user interface point of view and from a branding point of view. Some claim that big things come in small sizes.