How to Make and Add a Favicon to Your Website: A Complete Guide

In this article, the Promodo team explains what is a favicon and provides all the necessary information on how make favicon and add it to your website.

What is a Favicon?

A favicon is a small icon associated with your website. An interesting fact is that the name of this icon combines the words "favorite" and "icon." The favicon was first introduced in Internet Explorer 5, with a size of 16x16 pixels, and was placed next to the site in the bookmarks list. The purpose of the icon was to make it easier for users to recognize resources by adding an image that makes the site stand out among others.

Nowadays, the site icon is displayed in:

Browser tabs next to the page title
Bookmarks lists
Search results
Browser history and other places

‍

‍

A favicon helps in quickly identifying a website among others.

‍

Advantages of Using a Favicon

Increased brand recognition: A favicon helps create a recognizable visual image for the brand, making it easier for users to identify the site among competitors and enhancing its overall recognition.
Professional appearance: Having a favicon gives the site a finished look, which helps increase trust from users and potential clients.
Improved user experience: A favicon simplifies navigation, allowing users to easily find the site among numerous open tabs in the browser.

‍

Favicon and SEO

Favicons do not have a direct impact on SEO, but they can organically improve your site's rankings in search results:

Site identification: Favicons help Google and other search engines identify the site, using the icon for display in search results.
Brand recall: The number of clicks on the resource will increase if users recognize the site’s icon.

‍

How to Create a Favicon

Let's view how to generate a favicon in details. A favicon is an adapted and somewhat simplified logo of your brand. Its appearance visually reflects your brand's identity. At the same time, we recommend using simple and clear elements without small details for the icon.

Before uploading the favicon to your website, make sure it meets the following specifications:

Main size 16x16 pixels: Experts consider this size suitable for regular monitors. However, for Retina displays (mostly in Macbooks), a size of 32x32 pixels is recommended, as these screens have twice the pixel density.

The image should be square.

‍

How to Add aFavicon to Your Website

Upload the .ico file to the root directory of your website. This can be done via an FTP client or through your hosting control panel.
HTML Code: Generate the required code using an appropriate resource, such as Realfavicongenerator.net. Add this code to the <head> section of your HTML file:

‍

‍

To ensure compatibility with different browsers and devices, we recommend uploading multiple formats and sizes of your favicon. The appropriate codes can also be generated on the service. Here are the codes we generated:

‍

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

‍

Checking Favicon Display

Once we've figures out how to insert favicon, you may need to clear your browser's cache to see the changes on your website.

If the favicon loads, we recommend checking how it displays on different devices and in other browsers. At this stage, you might realize that some adjustments are needed, such as adding a background or changing details in the design for better visibility.

‍

In conclusion, a favicon, though a small design element, significantly enhances brand recognition and trust in the website, while also improving the user experience.

‍

Need Help with Any Marketing Challenges?

Our Digital Marketers are Right at Hand to Enhance Your Performance!

Learn more