What is a favicon and why is it important?
There’s a small detail on your website that could be making a big impact, but you might not even notice it. It’s often overlooked, yet plays a surprisingly important role in how your brand is perceived online. Could this simple element be working against you in ways you haven’t considered?
Think about your favorite website. What does the favicon look like? Is there a familiar image, or a plain globe?
According to Google, a favicon, or “favorite icon”, is a small icon associated with a website in search results. Favicons play a crucial role in building brand recognition, establishing credibility, and differentiating a business from its competitors.
When users see a consistent and appealing favicon, it improves brand recall, making it more likely that they’ll return to a site in the future. This is critical in crowded and competitive markets.
Favicons serve as visual representations of a site, improving user experience and brand identity. Favicons can be seen in several places, including web browser tabs, bookmarks or favorites bars, and paid and organic search results. In search results, a favicon can help distinguish your site from others, providing a recognizable icon that can drive clicks to your site.
If you find that your favicon has been replaced by a globe icon, such as the one above, stick around. We’ll explore potential causes, fixes, and improve your site’s overall search visibility.
Jump To:
How to get your favicon to appear in Google Search results
To make sure your favicon appears in search results, make sure to follow Google’s guidelines. The processes for organic and paid favicons are different, so you need to evaluate which form of favicon is experiencing issues.
Paid Search
For paid search, your favicon needs to meet Google’s technical specifications, including a square format (48×48 pixels or larger) and hosting the image at the root of your website. It should be referenced in the <head> section of your HTML for proper indexing by Google.
You will also need to create consistency across your branding assets. Google recommends using a single business name and logo for each domain to avoid confusion and ensure optimal performance in ads and search results. If inconsistencies are detected across different campaigns or accounts, your assets may not be displayed correctly, defaulting to the globe placeholder logo.
Organic Search
For organic search, you have to create a favicon that suits the following specific guidelines and criteria.
On the technical end of things, you need to add a <link> tag to the header of your crawable homepage, following the syntax <link rel=”icon” href=”/path/to/favicon.ico”>. Google recognizes various rel attribute values, including icon for general use, apple-touch-icon for iOS devices, and apple-touch-icon-precomposed for older iOS versions. It’s important to know that while you can specify an absolute or relative URL for the favicon, the URL should remain stable and accessible to Googlebot for crawling.
To successfully display a favicon in search results, you must meet several criteria. Each site can only have one favicon per hostname, meaning different subdomains can have different favicons, but subdirectories must share the same favicon.
Additionally, your favicon should be visually representative of your brand, and in a square image (the minimum size requirement of 8×8 pixels, but Google recommends using a favicon that’s larger than 48×48 pixels). Your should also use valid favicon formats. ICO, PNG, or GIF are most widely accepted by browsers. Google will not display favicons that violate its content policies, and it can take time for changes to be reflected in search results, as crawling can take several days to weeks. For immediate updates, you can request indexing using the URL Inspection tool.
Elements of the ideal favicon html code
If your favicon isn’t appearing in Google Search, it’s essential to follow the ideal code recommendations outlined below. While you can use relative URLs for your favicon, it’s recommended that you use absolute URLs to ensure consistent access. Below is the ideal code structure for implementing your favicon:
(Use type="image/x-icon“ if your file is .ico)
<link rel="icon" type="image/png" href="https://abcde.com/16.png" sizes="16x16">
<link rel="icon" type="image/png" href="https://abcde.com/32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://abcde.com/48.png" sizes="48x48">
<link rel="icon" type="image/png" href="https://abcde.com/96.png" sizes="96x96">
<link rel="icon" type="image/png" href="https://abcde.com/144.png" sizes=“144x144">
<link rel="icon" type="image/png" href="https://abcde.com/152.png" sizes=“152x152">
<link rel="shortcut icon" type="image/png" href=“https://abcde.com /152.png">
<link rel="apple-touch-icon" href="https://abcde.com/icon_x180.png">
<link rel="manifest" href="https://abcde.com/manifest.json">Elements of the ideal html code:
A stable file location is declared in the <head> of the homepage
Ex- <link rel="icon" href="/favicon.ico">
Link type represents the file type
Ex - <link rel="icon" type="image/png" href="https://abcde.com/16.png" sizes="16x16">
Note - for .ico file types use type="image/x-icon“
Icon for 16x16 version is present and valid (used in browser tabs and bookmarks)
Ex - <link rel="icon" type="image/png" href="https://abcde.com/imagename.png" sizes="16x16">"
Icon for 32x32 version is present and valid (used in IE UX, sometimes pulled into Windows taskbar)
Ex - <link rel="icon" type="image/png" href="https://abcde.com/imagename.png" sizes="32x32">"
Icon for 48x48 version is present and valid (Google's Standard and AI Overviews, )
Ex - <link rel="icon" type="image/png" href="https://abcde.com/imagename.png" sizes="48x48">"
Icon for 96x96 version is present and valid (TV-based icons)
Ex - <link rel="icon" type="image/png" href="https://abcde.com/imagename.png" sizes="96x96">"
Icon for 144x144 version is present and valid (iOS/Android)
Ex - <link rel="icon" type="image/png" href="https://abcde.com/imagename.png" sizes="144x144">"
Icon for 152x152 version is present and valid (iOS/Android)
Ex - <link rel="icon" type="image/png" href="https://abcde.com/imagename.png" sizes="152x152">"
Icon for "apple-touch-icon" version is present and valid. Size should be 180x180 (iPad/ Apple touch icon)
Ex - <link rel="apple-touch-icon" href="https://abcde.com/imagename.png">"
Icon for "shortcut" version is present and valid (optional, is a holdover from early browser technology. Don’t need it but many people still use it)
Ex- <link rel="shortcut icon" type="image/png" href=“https://abcde.com /imagename.png">"
Manifest file includes same icon declarations
Ex - <link rel="manifest" href="https://abcde.com/manifest.json">
Note - if the site is not or does not use a PWA, or Progressive Web App, then a manifest file is not needed. Consider removal before it can cause more problemsClient success
At Amsive, the SEO team has seen success across clients by implementing and updating favicons to meet Google’s technical specifications.
Despite implementing the proper code, one client’s favicon still wasn’t appearing in search results. After doing some digging, we found that the image URL was blocked by a directive in their robots.txt file, which prevented Google from crawling it. Once the client updated the directive to allow access to that image, Google was able to crawl it successfully, and the favicon reappeared within 24 hours.
This experience underscores the importance of ensuring that your favicon’s URL is accessible to search engine crawlers, as even a minor oversight can prevent it from being displayed in search results.
Another client was inadvertently blocking Googlebot-Image from crawling their favicon files, which prevented the favicon from appearing in search results. Be careful when implementing user-agent-based blocking requests that include Google.
While it may seem convenient to restrict access for certain bots, doing so can lead to unintended consequences, such as the failure to display fundamental elements like favicons. Ensuring that Google has the necessary access to crawl all relevant assets on your site is vital for maintaining optimal visibility in search results.
Tips for favicon optmization
Remember that a well-designed favicon plays a crucial role in enhancing your brand’s visibility and recognition in search results. To make sure your favicon effectively represents your brand, choose colors that will catch a user’s eye and create a clear association with your identity, allowing users to easily identify it among search results.
However, Google warns, “A favicon isn’t guaranteed in Google Search results, even if all guidelines are met.” All clients need a comprehensive approach to SEO and site optimization beyond just implementing a favicon. By adhering to best practices and continuously monitoring your site’s performance, you can improve your chances of having your favicon displayed, ultimately enhancing user engagement and brand recognition.
Looking to improve your search rankings? Try optimizing your author profiles, or let’s talk about how to achieve more for your marketing—and your business.
