Favicon: What It Is and How to Create & Add It

When you have ten tabs open, the small icon next to the site name helps you find the one you need. That is the favicon. It is also called a site icon.

Usually, it repeats the company logo or a simplified version of it. This icon makes a site recognizable and helps it stand out among other pages. In this article, we explain why a site needs a favicon, how to create it, and how to install it correctly.

What is a favicon

A favicon is a small graphic file that the browser loads together with the page. You can see it in tabs, bookmarks, browsing history, and mobile shortcuts. Today, a favicon has become a standard: every modern website uses this element.

Definition and meaning of a favicon

The term appeared in the late 1990s and comes from “favorite icon” — an icon for bookmarks. At first, it was displayed only next to websites saved in the Favorites menu of Internet Explorer, which was the leading browser at that time.

Over time, browsers began showing favicons in the address bar, in tabs, and on the bookmarks bar. Today, they are visible even in search results and in messaging apps when you share a link.

The favicon has become part of a website’s basic infrastructure: without it, a site looks technically unfinished.

The role of a favicon in UX and branding

For users, it is a visual marker that saves seconds when working with multiple tabs. For businesses, it is part of brand identity. The tiny icon reinforces the visual association with the brand. This way, a favicon serves two purposes at once: it helps with navigation and strengthens the company’s identity.

Even at a tiny size, the icon supports brand recognition. The more often a person sees the same symbol, the stronger the association with the website becomes.

Why a website needs a favicon

A favicon shapes the first impression of a website even before the user opens the page. It is an element of trust and branding that influences click-through rates and user behavior.

Brand recognition and click-through rates

A favicon works like a miniature logo. It makes the site look more professional, builds trust, and helps create a recognizable image. When the icon appears in bookmarks, search results, or browser history, users can identify your site faster among others. This increases the chances of return visits and clicks on a familiar symbol.

Impact on SEO and user behavior

Search engines do not use a favicon directly in ranking, but it affects user behavior metrics.

• Since 2019, Google has been showing site icons in mobile search results. Studies show that a familiar symbol next to a result increases CTR.
  
• A site with a clean, well-designed favicon looks more trustworthy. Users are less likely to close the page right away, which lowers the bounce rate.
  
• An appealing icon in bookmarks or on a smartphone screen increases the chance of return visits.
  

These improvements influence behavioral factors that search engines take into account. That is why a favicon indirectly supports SEO.

How to create a favicon: overview of methods and tools

Creating a favicon does not require advanced skills. The main point is to consider its sizes, formats, and where and how it will be displayed. First, you need to prepare the image in the right form, and then choose a tool to generate the favicon. 

Requirements for a favicon

A favicon should display correctly across different browsers, on desktops, and on mobile devices. That is why it is best to prepare several versions in different sizes and save them in popular formats.

Tools for creating a favicon

You can create a favicon in several ways:

• Online generators (favicon.io, realfavicongenerator.net). You just upload your logo, and the service automatically prepares a package of icons in different sizes.
• Graphic editors (Photoshop, Figma, GIMP) are suitable if you need to refine the icon manually.
• Converters allow you to transform a ready-made image into the .ico format.

For simple tasks, online services are enough. But if your brand requires strict adherence to the style guide, it is better to use graphic editors and create the icon manually.

How to add a favicon to a website

When the icon is ready, it needs to be placed on the site correctly. The process is simple: prepare the files, add the code to the HTML, and check the result.

Preparing the favicon

Before uploading, make sure the icon is saved in the required sizes and formats. It is recommended to create a package of several files: favicon.ico (for compatibility with older browsers), favicon-32×32.png, favicon-16×16.png, and a separate file for the Apple Touch Icon. It is best to store them in the root directory of the site or in a separate /icons folder.

Adding code to HTML

To make sure browsers display the icon correctly, add the following lines inside the <head>:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Adding a favicon in CMS

Many content management systems have a built-in option for this:

• WordPress: Appearance → Customize → Site Icon.
• Squarespace: Design → Browser Icon (Favicon).
• Wix: Settings → Favicon.
• Joomla/Drupal: field available in template or module settings.

In this case, you don’t need to edit the HTML manually — the CMS will add the code automatically.

Checking and fixing display issues

After uploading, refresh the site in your browser. If the icon doesn’t appear:

• Clear the browser cache or open the site in Incognito/Private mode.
• Check that the file path in the code is correct.
• Make sure the server returns the right MIME type (image/png or image/x-icon).

For verification, you can use:

• RealFaviconGenerator Check;
• Chrome DevTools (Application panel → Manifest).

Additional tips for working with a favicon

A favicon should be kept up to date, just like any other element of brand identity.

This section will help you avoid mistakes and make sure the icon works well across all devices. 

Using favicons on new devices and in PWAs

Today, a favicon appears not only in browsers. It is also needed for shortcuts on mobile screens, bookmarks in iOS and Android, and progressive web apps (PWAs). To make sure the icon displays correctly, prepare separate versions for different platforms:

• 180×180 px for iPhone and iPad.
• 192×192 px and 512×512 px for Android and PWAs.
• The standard 16×16 px and 32×32 px for browsers.

Tip: Use services like RealFaviconGenerator, which automatically create a complete set of icons for all devices and generate the ready-made code for <head>.

Updating a favicon without harming SEO

If you change your logo or brand style, you should also update the favicon. To make browsers load the new version, change the file name or add a version parameter to the URL, for example:

<link rel="icon" href="/favicon-32x32.png?v=2" sizes="32x32">

This way, old copies will not be cached, and users will immediately see the update.

Testing and automation

Before publishing, check how the favicon is displayed on different devices. You can use Chrome DevTools or online testing services for this.

If you manage several projects, it makes sense to automate the process: connect a generator to the build pipeline and update the favicon with every redesign.

Using favicons on new devices and in PWAs

Today, a favicon is displayed not only in browsers. It is also needed for bookmarks on mobile screens, icons in iOS and Android, and progressive web apps (PWAs).

A PWA is a website that can be installed on a smartphone as an app. It opens in a separate window without the browser address bar and looks like a full-fledged application.

For such apps, the favicon acts as the home screen icon. That is why not only the standard 16×16 px is important, but also larger versions — 192×192 px and 512×512 px. 

Conclusion

A favicon may seem like a small detail, but elements like this shape the overall impression of a website. It helps users navigate tabs faster, builds trust, and supports brand recognition. In addition, the icon affects user behavior and can indirectly improve SEO performance.

If your website still doesn’t have a favicon, it’s worth adding one. This is a simple step that makes your site look more professional and noticeable in the eyes of users.