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.
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. Verify your icon is visible in both light and dark modes on different browsers—even some national brands get this wrong, see examples below. Optimize your favicon files to reduce their size without compromising quality, for faster loading times.
Updates: 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 saw an increase in questions about favicons not displaying. The uptick in questions lined 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 observations suggest Google takes a bit longer to process icons for some 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.
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 examples from national brands demonstrating how icons can vary on Chrome versus Safari in both dark and light modes.
It’s important 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.
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.
Final Thoughts
Favicons play a key 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.
Finally, for ideal SERP display, also learn about site names and Google search.
Need help with a favicon?
