The adage “good things come in small packages” certainly applies to the humble favicon. These tiny brand badges have been on web browsers since the days of Internet Explorer in the 1990s, appearing in browser tabs and bookmark views. Favicons are visual reminders that help a customer associate your website with your company’s brand identity.
It’s time to move beyond the generic browser icon. In no time at all, you can create a favicon that makes an impression (and helps customers navigate a browser window crowded with tabs).
What is a favicon?
A favicon is a tiny graphic that shows up next to page titles on web browser tabs, bookmark bars, favorites bars, browser history results, and search engine results pages (SERPs).
A portmanteau of “favorite icon,” the favicon serves as a visual bookmark for your website and helps people easily identify a web page when they have multiple tabs open. Favicons might show up as taskbar shortcut icons when a website is minimized. When users bookmark your website, the favicon doubles as a bookmark icon, making it easier to find the website among other saved web pages.
In some operating systems, dragging and dropping URLs from the browser window to the desktop creates desktop shortcut icons.Browser favicons often are repurposed as shortcut icons, too.
Benefits of using favicons
A favicon won’t magically boost your website’s search engine optimization (SEO) ranking, but adding one, along with other UX design enhancements, can contribute to a more user-friendly website. Here are a few more ways a favicon can affect your website’s performance:
Increase CTR
Google and other search engines display favicons in search results. An eye-catching or easily recognizable favicon can boost your brand recognition, making it more likely for people to visit your website. This increases your click-through rate (CTR), which is an important ecommerce metric for SEO.
Build brand awareness
When a favicon reinforces your brand’s logo, it acts like a piece of free advertising in the user’s bookmarks bar, on your website’s tab, and on SERPs, which can increase brand awareness.
Improve user experience and dwell time
An instantly recognizable favicon can increase the chance of a user bookmarking your web page, a behavior that a search engine like Google recognizes as a boosting signal. This tiny improvement in user experience encourages return visits, increasing your website traffic and dwell time (how long a user spends on a webpage before returning to the SERP).
Guidelines for creating a favicon for your website
A good favicon conforms to particular size and file format requirements:
Choose the right size
The ideal size for a favicon is 16 pixels by 16 pixels, though some favicons are designed at 32 pixels by 32 pixels or 48 pixels by 48 pixels. The 16 by 16 size is supported in all web browser displays—address bar, tabs, or bookmarks views. It’s the safest choice.
Choose a compatible file format
The original file format plays a crucial role in how well an image translates into a favicon. The most common favicon file formats for creating a favicon are PNG format and ICO. PNG files contain lossless data compression and transparency so image quality won’t suffer when they’re scaled. ICO files, used in Microsoft Windows Explorer, contain one or more images at multiple sizes and color depths, so they can be scaled well. The SVG format doesn’t have as much browser support, but it is fast-loading and infinitely scalable. Shy away from formats like JPEG that lose some image data when scaled down.
Consider an animated favicon
Animated GIFs or Javascript files add sizzle, but they have limitations, one being browser compatibility. Test your animated favicon across multiple browsers since what looks great on Google Chrome might break on another browser.
Popular favicon generators
You can use an online favicon generator to make a custom favicon that complements your brand identity. Here are some popular options:
- Favicon.io lets you create a favicon from an image file, link, or text and convert it into different formats. Download the converted files, place them in the root directory of your website, copy the link tags, and paste them into the head tag of your HTML page.
- RealFaviconGenerator is an interactive API that lets you specify how it should handle the master image to generate the favicon.
- Favicon Generator can create favicons on a platform-by-platform basis, allowing you to see how the designs look on different platforms and browsers.
- Favicon.ico & App Icon Generator from Dan’s Tools lets you upload an existing image and convert it to ICO format, or browse designs in the icon gallery.
How to add a favicon to HTML
Once you’ve created your site’s favicon, you’ll need to upload it to your website and add code so browsers and web apps can display it.
A pointer to the favicon appears as a line of code in the <head> section of the website’s HTML file. Browsers read the instructions in the head tag to find the favicon and display it. Let’s say your favicon file is a PNG file named “brandXicon.png.” Simply add this line inside the <head></head> tag:
<link rel="icon" type="image/png" rel="noopener" target="_blank" href="/brandXicon.png">
The favicon can appear in any directory on the site. In the example, it’s contained in the site’s root directory, a common location. Check that the file path is accurate.
It’s also possible to have more than one favicon size and load them all. You’ll need one line of code for each size, all inside the <head> </head> tag. Give each size a unique filename and add a “sizes” attribute to the code, like this:
<link rel="icon" type="image/png" sizes=”16x16” rel="noopener" target="_blank" href="/brandXicon16x16.png">
<link rel="icon" type="image/png" sizes=”32x32” rel="noopener" target="_blank" href="/brandXicon32x32.png">
How to add a favicon to a Shopify website
If you have a Shopify website, you can easily add a favicon without any coding needed:
1. In a desktop web browser, go to your online store admin panel.
2. Select “Themes” > “Customize” to open the theme editor.
3. Click on “Themes Settings.” Look for the gear icon.
4. Select Favicon (in some themes this is called “Logo”).
5. Select your image from the Store Library or upload a new one.
6. If it’s available, edit the “Alt Text” for the favicon for accessibility. This text will appear when a user hovers over the favicon.
7. Save your work and test the favicon’s performance on different browsers.
For more info on adding favicons from an iPhone or Android device, see the Shopify help topic on the subject.
How to add a favicon on WordPress
If your online store is a WordPress website, here’s a step-by-step guide to adding a favicon:
1. Go to the WordPress dashboard and click Appearance.
2. Click Customize for a list of options.
3. Click Site Identity. This controls things like the title, tagline, and logo.
4. In the Site Icon section, click Select Site Icon to upload the new favicon image.
5. Click Publish to go live.
6. Test the favicon’s appearance in various web browsers.
How to add a favicon on Wix
A Wix website comes with a default favicon, but Premium Plan members can customize it. To change the favicon on your Wix site:
1. Go to Settings in the site’s dashboard.
2. Beside Favicon click Manage.
3. Click Upload Image or click Upload Media to upload an image from your computer.
4. Click Add to Page. Preview the favicon’s appearance on your browser tab.
5. Click Save and then Publish.
What is a favicon FAQ
Is a favicon the same as a logo?
A favicon ("favorites icon") is a small icon that shows up next to your site’s page name or address in search results, browser tabs, and bookmark bars to identify your pages to web users. By contrast, logos represent a brand across the entire marketing landscape. Most brands’ favicons share design elements with their logos, and they may even be the same if the logo is simple enough.
What is an example of a favicon?
A favicon appears as a website’s URL icon in address bars or as a tab icon in the web browser. It helps users identify the website visually. For example, Shopify’s favicon uses the shopping bag with an “S” from the logo.
Are there tools to design favicons?
Yes, there are many tools that can help you design a favicon for your website. Some of them are even free. Examples of online generators include Favicon.io and RealFavIconGenerator.
