The adage “small things are good things” certainly applies to favicons. These little brand badges have been around since the days of Internet Explorer in the 1990s, appearing on browser tabs and bookmarks. Favicons are visual elements that help customers associate your website with your company’s brand identity.

It’s time to go beyond the typical browser icon. Create a favicon that stands out (and helps customers navigate easily in a browser window full of tabs).

What is a favicon?

A favicon is a small graphic that appears next to your web browser's tabs, bookmarks bar, favorites bar, browser history results, and search engine results pages (SERPs).

A portmanteau of the word 'favorite icon', a favicon acts as a visual bookmark for a website, helping users easily identify web pages when they have multiple tabs open. When a website is minimized, a favicon can appear as a taskbar shortcut icon. When a user bookmarks a website, the favicon is also used as a bookmark icon, making it easy to find the website among other saved web pages.

On some operating systems, dragging a URL from a browser window to the desktop will create a desktop shortcut icon. Browser favicons are often reused as these shortcut icons.

Benefits of using favicons

• Increase click-through rate (CTR)
• Building brand awareness
• Improving user experience and dwell time

While favicons won’t magically boost your website’s search engine optimization (SEO) rankings, adding a favicon and other UX design improvements can make your website more user-friendly. Some of the more important effects a favicon has on your website’s performance include:

Increase click-through rate (CTR)

Google and other search engines display favicons in search results. A prominent or easily recognizable favicon increases brand awareness, making people more likely to visit your website. This increases your click-through rate (CTR), which is an important e-commerce metric for SEO.

Building brand awareness

When a favicon reinforces your brand logo, it can increase brand awareness by serving as free advertising on users' bookmark bars, tabs on your website, and search engine results pages (SERPs).

Improving user experience and dwell time

An instantly recognizable favicon increases the likelihood that users will bookmark your web page, which is seen as a positive signal by search engines like Google. These small improvements to the user experience can lead to repeat visits, which in turn increases website traffic and dwell time (the amount of time a user spends on a web page before returning to the search engine results page).

Guidelines for creating website favicons

• Choosing the right size
• Select a compatible file format
• Consider animated favicons

A good favicon must adhere to certain size and file format requirements:

Choosing the right size

The ideal size for a favicon is 16x16px, although some favicons are designed to be 32x32px or 48x48px. The 16x16 size is the safest choice as it is supported by all web browser displays (address bar, tabs, bookmark views).

Select a compatible file format

The original file format has a big impact on how the image is converted to a favicon. The most common file formats used to create favicons are PNG and ICO. PNG files provide lossless data compression and transparency, which means the image will not lose quality when resized. ICO files are used by Microsoft Windows Explorer and contain one or more images with different sizes and color depths, so they scale well. The SVG format has less browser support, but loads quickly and is infinitely scalable. It is best to avoid formats that lose image data when scaled down, such as JPEG.

Consider animated favicons

Animated GIFs or Javascript files can add visual appeal, but they have limitations, including compatibility issues. What looks good in Google Chrome may break in other browsers, so test your animated favicons in multiple browsers.

Popular favicon generators

You can use an online favicon generator to create a custom favicon that matches your brand identity. Here are some popular options:

• Favicon.io : A tool that allows you to create favicons from image files, links, or text, and convert them to various formats. After downloading the converted file, place it in the root directory of your website, copy the link tag, and paste it into the head tag of your HTML page.

• RealFaviconGenerator : An interactive API that allows you to specify how to process a master image to generate a favicon.

• Favicon Generator : Generate favicons for each platform, so you can see how your design will look on different platforms and browsers.

• Favicon.ico & App Icon Generator from Dan's Tools : Upload an existing image and convert it to ICO format or browse designs in our icon gallery.

How to add a favicon to HTML

After you've generated a favicon for your site, you'll need to upload it to your website and add it to your code so that it can be displayed in browsers and web apps.

The code that points to the favicon is added as a line in the <head> section of the website HTML file. The browser reads the instructions in the <head> tag to find and display the favicon. For example, if the favicon file is a PNG file named "brandXicon.png", add the code inside <head></head> tags as follows:

<link rel="icon" type="image/png" rel="noopener" target="_blank" href="/en/brandXicon.png">

The favicon can be located in any directory on your site. In the example above, it is located in the root directory of your site, which is a common location. Make sure the file path is correct.

You can also load multiple sizes of favicons. You need to specify a unique file name for each size and add the "sizes" attribute to your code. For example:

<link rel="icon" type="image/png" sizes=”16x16” rel="noopener" target="_blank" href="/en/brandXicon16x16.png">

<link rel="icon" type="image/png" sizes=”32x32” rel="noopener" target="_blank" href="/en/brandXicon32x32.png">

How to add a favicon to your Shopify website

If you use a Shopify website, you can easily add a favicon without any coding:

1. Go to your online store admin panel in your desktop web browser.

2. Open the theme editor by selecting “Themes” > “Customize”.

3. Click “Themes Settings”. Look for the gear icon.

4. Select a Favicon (in some themes it may be called “Logo”).

5. Select an image from your store library or upload a new image.

6. If available, edit the “Alt Text” of your favicon for accessibility. This text appears when a user hovers over your favicon.

7. Save your work and test the performance of your favicon in different browsers.

For more information on how to add a favicon on your iPhone or Android device, see this Shopify help topic.

How to add a favicon in WordPress

If your online store is a WordPress website, here’s a step-by-step guide to adding a favicon:

1. Go to your WordPress dashboard and click “Appearance”.

2. Click “Customize” to open a list of options.

3. Click “Site Identity”. Here you can set the site’s title, tagline, logo, etc.

4. In the “Site Icon” section, click “Select Site Icon” to upload a new favicon image.

5. Click “Publish” to apply the changes.

6. Test the appearance of your favicon in different web browsers.

How to add a favicon in Wix

Wix websites come with a default favicon, but premium plan members can customize it. To change the favicon on your Wix site, follow these steps:

1. From your site dashboard, go to “Settings.”

2. Click “Manage” next to “Favicon”.

3. Click “Upload Image” or “Upload Media” to upload an image from your computer.

4. Click “Add to Page.” You can preview what your favicon will look like in the browser tab.

5. Click “Save” and then “Publish” to apply the changes.

Favicon FAQ