Favicons: SEO, Optimization, Issues, and Examples | Collaborada (2023)

Christine Darby // Originally Published: May 2023 // Last Updated: July 2023

Favicons, short for "favorite icons," are small icons associated with a website or web page. They appear in various places such as search results, search history, browser tabs, bookmark lists, and mobile app icons, and serve as a visual representation of a website. Your favicon represents your brand around the web. In this article, we cover:

  • Favicons and SEO: Why is favicon optimization important?

  • Best Practices: Learn how to create a favicon.

  • Common Issues: Why is your favicon not showing in Google search?

  • Favicon Examples: See examples from national brands—good and bad.

Do you have a Squarespace site? Also see our article on Squarespace favicons.

Favicons and SEO

The fundamentals of SEO include high-quality content, keyword optimization, site speed, and mobile responsiveness, among others, and these elements play a direct role in a website's search ranking. But SEO also includes the practice of improving the appearance of your pages in organic search results.

Search engines often display your brand’s favicon alongside your web pages. So while favicons may not have a direct impact on a site's search ranking, they do fall within the realm of search engine optimization.

An optimized favicon can improve the visual appearance of your web pages in organic search and increase your click-through rate (CTR). Users might click your result because they recognize your brand as credible or because a well-designed site icon helped your page stand out from the crowd. Even though a favicon is small in size, its design and implementation deserves thoughtful consideration and a bit of strategy.

(Video) Favicons | SEO

Best Practices for Favicons

To create a custom favicon, you can use a tool such as Canva (create a design > custom size) or a free favicon generator.

  • Design for Visibility: Strive for simplicity in your favicon design. Favicons are small, so intricate designs or complex logos may not be recognizable at a small scale. A simple shape, symbol, or letter that's easily identifiable will offer the most visual impact.

    You might choose transparency in your favicon design to blend seamlessly with different backgrounds, but a solid background can be an intentional design choice. See favicon examples below to learn about choosing a color scheme that stands out against both light and dark backgrounds.

    If you currently have many tabs open in your browser, look to see which favicons are highly visible/recognizable/readable versus not—emulate the good ones.

  • Keep Branding Consistent: The colors and design of your favicon should align with your brand's logo, colors, and overall aesthetic. Remember, the favicon represents your site in a variety of places, such as browser tabs, bookmarks, search results, and more, so brand consistency is important. Reinforce your brand image and ensure a coherent visual experience for users with a recognizable site icon.

  • Favicon Size and Format: Even though there is some standardization as to where and when favicons display, there is a variety of accepted image formats, dimensions, and attributes for different implementations. If you look at source code, you’ll see that developers implement favicons slightly differently across the sites you visit. But if you use a website builder, you’ll often just upload one version and the platform handles the HTML code for you.

    In terms of favicon size, Google says to use a multiple of 48px square: 48x48px, 96x96px, and so on. But Squarespace literature suggests 100x100 to 300x300, Wix states 16x16, and Webflow suggests 32x32. These various recommendations contribute to some of the confusion with favicons, but you do not need to overthink it. Favicons of varying sizes display as expected across browsers and search—meaning there is leeway in Google’s stated requirements—but we suggest you follow Google’s preferences.

    In terms of file format, ICO is the traditional format, but PNG and SVG formats are increasingly popular due to their support for transparency and scalability.

    If needed, use a tool such as Squoosh to compress a PNG file.

  • Testing and Optimization: Test your favicons across different browsers, devices, and operating systems to ensure compatibility. Ensure your icon is visible in both light and dark modes on different browsers—even some national brands get this wrong, see favicon examples below. Optimize your favicon files to reduce their size without compromising quality, ensuring faster loading times.

  • Updates: Lastly, keep your favicons updated. If your brand logo or colors change, make sure to update your favicon to maintain visual consistency throughout all facets of your online presence.

Common Issues with Favicons

  • Favicon not showing in Google Search: If your favicon is not working, more than likely your domain is new and you just need to be patient. In 2023, we’ve seen an increase in questions about favicons not displaying. The uptick in questions lines up with Google’s change to show site names and favicons in desktop search. This visual change to search results made new site owners much more conscious of favicons. And anecdotal observationssuggest Google is taking a bit longer to process icons for newly launched websites.

    What to do? Make sure you follow the favicon best practices outlined above, keep the favicon URL stable, give the process some time, and you should be fine. That said, if your favicon does not display within a month of launch, we can help.

  • Favicon not updating: If your site changed its favicon, you can ask Google to recrawl your site’s Home page. Google states: “Updates can take a few days or longer to appear in search results.”

  • Caching and Updates: Favicons may be cached by browsers, so changes to the favicon may not be immediately reflected for all users. Use cache-busting techniques such as changing the favicon file name or modifying its URL parameters to ensure updates are propagated.

  • Incorrect Dimensions or Formats: Favicons use a 1:1 aspect ratio, avoid rectangular or non-standard sizes. And using incorrect formats (e.g., JPEG instead of ICO or PNG) may lead to compatibility issues.

  • Low Image Quality: Ensure your favicon maintains image clarity across various display sizes. Avoid pixelation or blurriness.

  • Branding Issues: Different browsers select and display favicons in different ways based on the options presented. (1) If you use multiple favicon files and/or update your branding, make sure the expected favicon displays across browsers. (2) Also verify your favicon is visible in both dark and light modes across browsers. See the section below for examples of both of these issues.

(Video) 2 Simple Things to Improve your SEO rankings | What are Favicons | What are Breadcrumbs | SEO 2021 |

Favicon Examples

Favicons in browser tabs make it easier for visitors to find your page when they have multiple open tabs. But if a favicon is not visible in a tab, what purpose is it serving? Below are real-world favicon examples from national brands demonstrating how icons can vary on Chrome versus Safari in both dark and light modes.

It's crucial to remember that browsers use different criteria to select and display favicons when multiple versions are provided. A simplified approach—plus testing—is the best strategy to avoid a compromised visual experience for your brand.

Favicons: SEO, Optimization, Issues, and Examples | Collaborada (1)

Favicons: SEO, Optimization, Issues, and Examples | Collaborada (2)

(Video) SEO This Week Episode 150 - NLP, Featured Snippets & Favicons

Favicons: SEO, Optimization, Issues, and Examples | Collaborada (3)

Favicons: SEO, Optimization, Issues, and Examples | Collaborada (4)

The favicon examples in order of appearance:

  • Nike, VRBO, and IBM — In Chrome dark mode these site icons are not visible, but they are visible in Safari due to a light gray background applied automatically by the browser.

  • REI and Eventbrite — These brands display totally different icons in Safari versus Chrome. And REI missed the mark with both versions of their favicon, one is too busy and one is too simplistic.

  • Mailchimp — Ideally, the recognizable bright yellow icon would be used across all browsers.

  • Netflix, OpenAI, and Gap — Again, note the gray background in Safari’s dark mode related to favicon contrast requirements.

  • Apple, NYT, Google, Reddit, Salesforce, Microsoft, and Amazon — These favicons are consistent across browsers and easy to recognize. Notice the NYT icon in Chrome didn’t automatically reload when the browser changed from dark to light, but when the tab was visited the icon switched colors.

    (Video) React Course - Advanced - SEO

Need help with your favicon?

Book a Call

In summary, favicons play a crucial role in representing your brand and improving user experience. By following best practices, you can enhance your website's visual appeal and brand recognition. Remember to consider consistency, size and format, transparency, and optimization. Additionally, be aware of common issues like low image quality, improper implementation, and caching.

Christine Darby

Christine is the founder of Collaborada, a marketing agency focused on helping small businesses with organic search and content performance.

(Video) How To Get High Rankings On Google Without Any Effort (FAST)

FAQs

Does favicon affect SEO? ›

Some people in the SEO sphere will advise adding a favicon to your site will improve SEO because Google automatically tries to access the URL https://www.yoursite.com/favicon.ico when it crawls a page. So if you don 't have a favicon Google will see as many 404 errors as you have pages on your website.

Does not having a favicon affect SEO? ›

There are no direct SEO or ranking effects of having favicons. However, there are indirect benefits for your pages' SEO: Increased Usability Of Site: Usability of a site correlates to higher search engine ranking.

Why are favicons important for SEO? ›

Favicons can help users quickly identify your website among a sea of open tabs. Plus, they make it easy for users to find your website easily in their browser history. The more consumers see your favicon, the more likely they'll recognize your logo the next time they see it.

What is favicon optimization? ›

Favicon Optimization: Why Is It Crucial For SEO? A favicon is a small 16*16 pixel icon that serves as your website's branding. Its main purpose is to make it easier for visitors to find your page when they have multiple tabs open.

Is favicon a ranking factor? ›

Favicons are not entirely responsible for your Search Engine Optimization, but they are partially responsible and are an essential tool to boost your search engine ranking. Below are a few examples of how a favicon will improve your SEO.

Which SEO technique should be avoided? ›

Black Hat SEO Techniques to Avoid. Black hat SEO techniques are unethical practices that attempt to manipulate search engines to achieve higher rankings. These techniques are against search engine guidelines and can result in penalties.

What are the worst practices to avoid for SEO? ›

Table Of Contents
  • 1 1. Misusing Keywords.
  • 2 2. Writing for Search Engines, Not People.
  • 3 3. Spinning Content.
  • 4 4. Over-Optimizing Anchor Text.
  • 5 5. Focusing Only on Google.
  • 6 6. Ignoring Mobile SEO.
  • 7 7. Targeting Multiple Keywords and Their Variations.
  • 8 8. Focusing Only on Domain Authority.
Mar 17, 2023

What negatively affects SEO? ›

A negative SEO attack is when a competitor uses mostly off-page tactics such as building unnatural backlinks or duplicating site content to negatively impact your search rankings (we'll talk about how this happens in just a minute).

What should you avoid when developing a SEO website? ›

What should you avoid when developing a search-optimized website?
  • Duplicate content. Duplicate content is a significant problem when it comes to SEO. ...
  • Overusing Keywords. ...
  • Neglecting mobile optimization. ...
  • Slow loading speed. ...
  • Ignoring meta descriptions and title tags. ...
  • Not implementing SSL certificates.
Mar 22, 2023

What size should a favicon be for SEO? ›

To help people quickly identify your site when they scan through search results, make sure your favicon is visually representative of your website's brand. Your favicon must be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on.

What is the impact of favicon? ›

Favicon in Google Search Results helps on better visibility on browser tabs and history pages. Essentially, Favicons for SEO help users identify and navigate a website page and increase visitor interaction with the site. To increase the number of visitors to your website, it will certainly impact your SEO.

Do browsers cache favicons? ›

To prevent downloading the favicon every time we visit a page, the favicon is cached by the browser and stored in the favicon-cache. The favicon-cache stores an entry for each unique favicon, including its domain and path. This means that a website can have multiple different favicons for each subdomain or path.

What will affect SEO ranking? ›

Six factors influencing your SEO ranking (and how to improve them)
  • Keyword selection.
  • Quality of content.
  • Experience, expertise, authoritativeness, trustworthiness (EEAT)
  • Backlinks.
  • Site structure and design.
  • User experience.
Feb 10, 2023

Do widgets affect SEO? ›

If you post this widget on your site, you will effect many aspects of SEO. You could affect your page size, keyword density, word count, and much more if the search spider can read it. The content from this widget and widgets like it takes away all your control of on-site SEO for every page you place it on.

Videos

1. How to Add a Favicon
(Seo Site Checkup)
2. SEO Optimization & Logo,Favicon Designing
(Aleem Iqbal)
3. English Google SEO office-hours from May 2023
(Google Search Central)
4. Canonical URLs: How Does Google Pick the One?
(Google Search Central)
5. SEO Optimization with LATEST features of NEXT.JS 13.4
(Sakura Dev)
6. How to Add Your Site Icon [Favicon Tutorial]
(Get Growth TV - by Squirrly)
Top Articles
Latest Posts
Article information

Author: Duncan Muller

Last Updated: 09/23/2023

Views: 5634

Rating: 4.9 / 5 (59 voted)

Reviews: 82% of readers found this page helpful

Author information

Name: Duncan Muller

Birthday: 1997-01-13

Address: Apt. 505 914 Phillip Crossroad, O'Konborough, NV 62411

Phone: +8555305800947

Job: Construction Agent

Hobby: Shopping, Table tennis, Snowboarding, Rafting, Motor sports, Homebrewing, Taxidermy

Introduction: My name is Duncan Muller, I am a enchanting, good, gentle, modern, tasty, nice, elegant person who loves writing and wants to share my knowledge and understanding with you.