What Is a Favicon? Why It Matters and How to Add One to Your Website

Is your website missing a favicon, or is it very low quality? If your blog or media website still lacks one, now is the right time to add a favicon to your website. It will help users easily identify your brand in search results and quickly find the right browser tab. By integrating your website with a visual marker for your brand, you can boost recognition for your site while improving UX and your project’s media visibility. 

What is a Favicon?

A favicon is a small icon sized 16x16px serving as a branding for your website. Its primary goal is to make your website findable when multiple tabs are open in their web browser simultaneously. You can also find favicons in bookmarks, toolbar apps, history results, and search bars. 

Due to their tiny size, the design of the favicon should be considered, with special attention paid to every detail. Depending on your project and how its logo is designed, you can use the corporate logo or a part of it in the favicon. As a rule, a favicon possesses enough space only for a tiny and simple image or one to three characters or graphics. 

Why Are Favicons Important? 

Creating a favicon design is a small step that can make a big difference for a brand. It adds legitimacy and boosts your branding along with user trust.

Some media outlets, including those in the PRNEWS.IO catalog, either lack favicons or use low-quality ones. This may seem like a minor detail, but it directly affects how users perceive a website. A missing or poorly designed favicon can make a site look unprofessional and harder to recognize in browser tabs, bookmarks, and search results. By educating media platforms on the importance of favicons, we can help them strengthen their branding, enhance user experience, and improve visibility in an increasingly competitive digital space.

Favicon Sizes for Different Browsers

16px by 16px is a generally accepted favicon size since it can be used across all browsers. However, there are cases when brands set up favicons for different use cases. 

Consider the following instructions if you look forward to creating favicons of different sizes to fit every possible use. 

• 16px – Standard favicon for all browsers (address bar, tabs, bookmarks)
• 24px – Pinned Site icon in Internet Explorer 9
• 32px – Appears on the new tab page in Internet Explorer, taskbar button in Windows 7+, and Safari’s “Read Later” sidebar
• 57px – Default iOS home screen icon (iPod Touch, iPhone 1st gen to 3G)
• 72px – iPad home screen icon
• 96px – Favicon for Google TV
• 114px – Home screen icon for iPhone 4+ (optimized for Retina display)
• 128px – Chrome Web Store icon
• 195px – Opera Speed Dial icon

Favicon Formatting Options

A while ago, all favicons had to be in the Windows ICO format. However, the requirements have changed now. You may consider different formatting options, but remember, each has specific requirements. 

• Windows ICO remains the most popular favicon file format developed by Microsoft. One of its major benefits is that it can contain multiple small images within one file. ICO also offers a 32-pixel icon useful for Internet Explorer Windows 7 taskbar. It allows for independent scaling and optimization of small icons. Yet, ICO remains the only favicon format that doesn’t support the <link> element.
• PNG is one of the most popular choices for favicons because of its lightweight and fast loading. Besides, it allows for transparent backgrounds and supports the smallest possible file size. Yet, the major drawback of using this format is that Internet Explorer does not support it. The latter only supports ICO. 
• SVG is the preferred favicon format for higher resolutions and larger icons. Opera browsers support it.

We do not recommend using favicons in GiF, JPG, and APNG: 

• Old browsers mainly supported GIFs. This format can irritate users and bring more drawbacks than advantages to your website. 
• Many browsers support JPG. However, it’s an uncommon favicon format and doesn’t provide the needed file quality as PNG. 
• APNG is an animated version of PNG. Opera and Firefox support it. Yet, it brings issues similar to GIFs, distracting users while looking at the interface. 

Favicon Design Tips

You can create a favicon using image editors like PhotoShop, Figma, Fireworks, etc. As mentioned, the favicon design may resemble your brand’s logo. However, it shouldn’t be identical to it. When designing a favicon, mind following your corporate brand book, featuring recognizable components from its logo, and following the most common favicon design practices listed below. 

Design for the Smallest Space

There is not much you can fit in a design sized 16px by 16px. Many brands decide to modify their logo designs to keep the favicon recognizable. 

One way to achieve this is by redesigning a logo for a smaller space. Consider American Express as an example. Instead of using the entire length of words used in their logo design, the company left the first two letters “AM EX” in the favicon design, making it look like they’ve taken a close-up shot of the left side of the logo’s framework. 

Focus on Graphics or Lettering

Most logos feature both graphics and letters. While such a compilation perfectly works for logos, it doesn’t fit a tiny favicon. So, when creating a favicon design, decide whether graphics or lettering work best for your brand and make it recognizable. 

Consider Trello’s favicon example, featuring only their logo design’s recognizable graphic element. 

Use the Entire Space

Favicons are square-shaped. One way to use all the space is by filling the background with a color and placing an icon or letter in the middle. 

That’s the approach used in Ahref’s favicon. Using only the first letter of the brand’s name, they’ve put it against a transparent background. The favicon design is recognizable to users since it keeps the color and fonts used in the brand’s logo, making it aesthetic to find the right tab in the browser bar. 

Keep the Design Flat

This favicon design tip is mainly relevant to those brands that feature 3D elements in their logos. Switching to the flat logo design version is better when working on a favicon. This way, you can save extra space and put more emphasis on the graphics of letters featured in the favicon. 

For example, Google uses flat favicons for all services in their Workspace Marketplace. 

Mind Color Contrast

Color is one of the most valuable tools in favicon design. Contrasting colors let users easily recognize shapes and the main elements of favicon design. Yet, using too many colors makes the favicon challenging to interpret. 

For example, Webflow uses color contrast in the favicon design. Using white and vivid blue, like in the company’s logo design, makes a statement and helps bring attention to the favicon design.

Are Favicons Important for SEO?

Favicons do not impact website SEO directly. However, they are considered essential elements of website optimization since they help users quickly identify websites in search engines and browser tabs, thus creating a positive online experience. A well-designed favicon boosts brand recognition and grows user trust, making a web page more appealing to potential clients. 

How to Add a Favicon to a WordPress Website

WordPress users can add a favicon to their websites in three ways – using the WordPress Customizer, the general settings page, or a plugin. 

The image file you use for your favicon should be square and at least 512 pixels wide and high. A typical file name for a favicon is “favicon.ico.” 

Changing a favicon using the WordPress Customizer, take the following steps: 

1. Log in to your WordPress site;
2. Go to Appearance;
3. Click Customize;
4. Click Site Identity;
5. Click Select Image;
6. Upload the image you want to use as your favicon;
7. Crop the image if needed;
8. Click Save Changes.

Use the following guidelines to add a favicon using the general settings page: 

1. Go to Settings;
2. Click General;
3. Find the Site Icon section;
4. Click Choose a Site Icon or Change Site Icon;
5. Upload the image you want to use as your favicon;
6. Crop the image if needed;
7. Click Save Changes.

Using a plugin like RealFaviconGenerator:

1. Go to Plugins > Add new from your dashboard;
2. Install and Activate the plugin;
3. Navigate to Appearance > Favicon;
4. Click the Select From Media Library button;
5. Add the favicon image by clicking on it and hit Select;
6. Click the Generate Favicon button;
7. You’ll be taken to the RealFaviconGenerator website to choose WordPress icon fonts and sizes and modify how they appear in the browser and search results;
8. Specify if that’s the first favicon package for your site or the favicon version if you are changing an existing one;
9. Hit the Generate your Favicons and HTML code button;
10. The plugin will generate and install the Favicon files on your site.

How to Add a Favicon to a Shopify Store

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

• Log in to your Shopify account;
• Go to the Online Store;
• Select Themes;
• Choose the theme you want to add a favicon to;
• Click Customize;
• Click the gear icon to access Theme Settings;
• Select Favicon or Logo;
• Select an image from your Shopify admin or local computer;
• Add alt text to your favicon image;
• Click Save.

Closing Words

A favicon won’t give a website a magic SEO boost. However, it brings many other benefits, like making your website more user-friendly, increasing CTR, contributing to better UX, and improving dwell time. By creating a recognizable yet simple design and choosing the right size and compatible format, a favicon becomes a valuable addition to your website regardless of its topic, type, or niche. Consider the guidelines we highlighted in this article, and let users quickly locate your website in SERPs and their browser tabs.