Important notice: Beware of fraudulent recruiter messages on WhatsApp! More details on our LinkedIn profile

How to Create and Add a Favicon to Your Website

Digital Marketing
June 20, 2024
5 min
Content

In this article, the Promodo team explains what is a favicon and provides all the necessary information on how to create 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

Favicon Examples
Favicon Examples

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

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.

favicon image requirements

How TO ADD A FAVICON TO YOUR WEBSITE

  1. 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.
  2. 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:

how to add favicon

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

After adding the 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!
Published:
June 20, 2024
Updated:
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
Subscribe to our newsletter
This is some text inside of a div block.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
List of the US Trust worthy Automotive Forums
DOWNLOAD

You may also like

Check our similar articles

Choose quality and trusted services to improve the presence of your company on the Internet, and feel free to contact our UK team if you have any questions.

Digital Marketing
How to Get More Reviews on Shopify: Strategies for Success

49% of shoppers rely on online reviews. Promodo experts know how to get more customer reviews for your Shopify store!

July 19, 2024
15 mins
Analytics
How to Set Up Custom eCommerce Reports in GA4: Templates from Promodo

Compared to Google Universal Analytics, GA4 offers fewer standard ready-made reports.

July 16, 2024
6 min

Boost your effectiveness

We at Promodo are ready to help you improve your performance across all digital marketing channels.

Get started
Contact us
Get a free strategy session

Let us look at your business challenge from a different angle and share our ideas.

Valid number
Send message

By clicking on “Send message” button, you agree to our Privacy Policy, and allow Promodo to use this information for marketing purposes.

Please check your inbox for a new email containing a list of reputable automotive forums.
Got it
Oops! Something went wrong while submitting the form.