Heart favicon

SERP… the aspect ratio is messed up for the favicon. So we have a mix of blank favicons and one warped one. Not good.7. Your old default favicon is causing problems (WordPress theme or CMS favicon):There are times where an older favicon file is showing up in the SERPs versus the new one you want Google to use. Or the default favicon.ico file is being used (based on your WordPress theme or CMS). For situations like that, there are a few things you can do to help get the right favicon showing up. Actually, Google’s John Mueller covered that in the May Search Central Office Hours video.John explained that you should remove the old favicon completely from your site and make sure it’s not linked from the site. And if you can, redirect the old favicon file to the new one you created. And as I’ve explained throughout this document, be patient. It can take some time for Google to pick up and process your favicon changes. Here is the segment from John about favicons (at 13:31 in the video):Bonus 1: Don’t push the limits with your favicon.In its documentation, Google has explained that it won’t show any favicon that it deems inappropriate (like pornography or hate symbols). If that’s the case, Google will simply provide the default, generic favicon. Just keep this in mind when crafting a favicon… I’m sure this won’t impact most sites, but it can clearly cause issues with your favicon displaying properly in the SERPs.Here is what Google explains in their favicon documentation:Bonus 2: Create an adaptive favicon that works well in dark mode.People love dark mode and that includes Google Search. But I find many don’t test how their favicon displays in dark mode. Once you check out your favicon in dark mode, and if you think it looks less-than-optimal, then you can always create an adaptive favicon that looks great in both light and dark mode. For example, creating an SVG that uses media queries to ensure your favicon adapts to the current environment (light mode versus dark mode).Adam Argyle wrote a post explaining how to create an adaptive favicon on web.dev where he walks you through the process of creating an SVG that can change based on light versus dark mode. I haven’t tested it out yet, but it’s an interesting technique that seems to work well in the demo. I might try doing that in the near future.Summary: Put your best favicon, I mean foot, forward in Search with one that actually shows up.I hope this post helped you understand some of the most common favicon problems I’ve seen while helping site owners that reached out to me for help. With

Where one, or more, of the favicon references are to files that don’t meet the requirements and Google just displayed the generic globe favicon instead in the SERPs. So just make sure to double-check all of the references to your favicon from your homepage and make sure they are ok.For example, this site’s favicon wasn’t showing up correctly. It ended up the homepage had multiple rel=“icon” references and one didn’t meet Google’s guidelines. Fixing that by just having one rel=”icon” reference pointing at the proper file enabled the site to regain its favicon in the SERPs:4. Location of the favicon image file:Update: February 24, 2023: I reached out to Google after seeing favicons show up in the search results even when the favicon file was hosted on another domain. That’s not supposed to work, so I was interested in hearing from Google about that. I ended up hearing back from Google after they looked into it, and you do NOT have to host the favicon file on the same domain as the homepage. This is great to know, and it’s one less thing to worry about if your favicon isn’t showing up in the search results. Here is what the documentation used to say:And here is what Google explained in its ‘latest documentation updates’ page:5. Uh, empty favicon code…Yes this seems obvious, but I’ve unfortunately seen it in action. If you literally leave out the file in the favicon code, then you will obviously have favicon problems in Search. :) So if you are experiencing favicon problems, then definitely double-check your code. And I also recommend using the various testing tools from Google to check both the static html and the rendered html to make sure your code is correct.6. Your platform or CMS is botched favicon-wise.For sites that use a specific platform or CMS to run their site, they may be in a situation where they can’t easily set or customize their favicon. And in situations where you don’t have much control, you are relying solely on the platform or CMS to get it right. And as you can guess, that doesn’t always work out well.And yes, that means all sites using that platform could have favicon problems. I surfaced this problem recently for a smaller e-commerce platform. Google just isn’t replacing the favicon with the generic globe, it’s literally leaving the favicon blank! This is even worse than receiving the generic favicon in my opinion…And when performing a query that brings up many sites using the platform, you can see the widespread problem. Yep, that’s all of the sites on the platform with missing favicons (not even the generic favicon). And look at the second listing in the

Problem is resolved. to top>>Frequently Asked Questions:Q: Why is Google showing a generic globe icon as my favicon?A: Google has a specific set of guidelines for providing a favicon file. If your favicon is not meeting those requirements, then Google can ignore your favicon and provide a generic globe icon in the search results. There are several reasons this could be happening.Q: Is there an image format that’s better for Google?A: Any of the supported file formats can be used. One is not better than another when it comes to showing up in the Google search results. For example, you could use a jpeg, png, gif, ico, svg, etc.Q: Are the size and dimensions of the favicon file important?A: Yes, the dimensions of your favicon are extremely important. Google explains in its documentation that the favicon must be a multiple of 48 pixel square. For example, 48×48, 96×96, etc. Your favicon file must be at least 48x48px.Q: Does the location of the favicon file matter?A: No, Google recently updated its documentation and explained that the favicon file can be hosted anywhere (so you can use a CDN, if needed).Q: Is it ok to block the favicon file via robots.txt?A: No, Google needs to crawl the favicon file and the homepage in order for it to be shown in the search results. Make sure your robots.txt directives are not blocking the homepage for Googlebot or the favicon file for Googlebot-Image.Back to top>>

What is a favicon? A favicon, short for favorite icon, is a small version of your brand's logo displayed on your website's tabs, search bar, and bookmark bar.Favicons typically feature a logo, letter, or image that reflects the company they represent. Since favicons are small, they must be simple yet make an impact.What is a favicon generator?A favicon generator is a tool that lets you customize a small icon that can be uploaded to your website. A good favicon generator will be free, give you lots of customization options, and is a trusted website (that doesn’t have malicious spam or ads). Create favicon logos for free Not all favicon generators are free, and some have annoying paywalls that prevent you from downloading your favicon in the format that best serves your website. Luckily, HubSpot’s favicon generator is always free and supports various image file types like JPG, PNG, WebP, and SVG.Use a text-to-image favicon generatorNo design skills are needed, simply input your business information (such as industry, name, etc.) as text and the free favicon maker tool will generate your ideal favicon. Improve user experience & gain traffic While favicons don’t directly influence SEO, they do influence how long visitors spend on your website, whether they click your page on SERPs (Search Engine Result Pages), and whether or not they bookmark your webpage. Now that Google has added favicons to SERPs, not having one can make your website look untrustworthy or amateurish. If customers can’t quickly identify which tab is

More tabs are added. The favicon is beneficial to users in that it facilitates the identification of your website and promotes a quick transition to the tab that was clicked.You can ask your users to add your website to their home screens on mobile devices. Your website’s icon or favicon is also utilized when users add your website to their home screen on a mobile device to add site favicon.Top 10 Benefits of Having a Favicon on Your WebsiteBrand recognition: A favicon can help establish your brand identity and credit. It serves as a small representation of your brand and allows users to identify your website quickly.Professionalism: Having a favicon adds a touch of professionalism to your website. It shows that you have paid attention to details and have taken the time to create a complete and polished online presence.Increased visibility: Favicon increases the visibility of your website. With a favicon, your website stands out from the crowd and can be easily spotted by users, even when they have multiple tabs open.Improved user experience: A favicon can enhance the user experience by making it easier for users to locate your website. This helps to improve overall navigation and usability.Improved SEO: Having a favicon on your website can improve your search engine optimization (SEO) efforts. Search engines like Google consider the presence of a favicon as a factor in determining the relevance of a website. So a good reason to add site favicon.Enhanced website recognition: Favicon can help improve your website credit by consistently representing your brand across different devices and platforms.Differentiation: A favicon can help to differentiate your website from your competitors. It can help to make your website stand out and attract users to your site.Increased credibility: A favicon adds credibility to your website. It shows that you have taken the time to create a professional website that reflects your brand identity.Enhanced user engagement: Favicon can help improve user engagement by making your website more visually appealing and memorable.Improved bookmarking: Users can quickly identify and bookmark your website with a favicon. Moreover, this makes it easier for users to return to your site. So increasing the chances of repeat visits and conversions.

Update: October 25, 2024Google updated its favicon documentation clarifying aspect ratio and dimensions. And it’s important for those having favicon issues. The favicon no longer needs to be a minimum of 48×48 pixels, but Google still recommends higher resolutions. Also, it must have a 1:1 aspect ratio. See the update below for more information.Update: October 19, 2023Google just clarified in its documentation that site owners should allow crawling of the homepage by Googlebot and the favicon image file by Googlebot-Image. View the section of this post about robots.txt for more information. Update: May 5, 2023Added information from Google about default favicon problems (like default WordPress theme or CMS favicons appearing in the search results versus the favicon that should show up).Update: March 9, 2023Google finally rolled out favicons and site names in the desktop search results after heavy testing in 2022 and early 2023.Update: February 24, 2023Google explained you do NOT have to host the favicon file on the same domain as the homepage. Update: October 26, 2022Google confirms they have fixed the favicon bug.Update: October 20, 2022Google confirms there is a bug with favicons not showing up in the search results for some sites.———————-They say “a favicon is worth a thousand words”. OK… they really don’t say that, but favicons can definitely be important from a Search perspective. In 2019, Google started displaying favicons and site names in the mobile search results as part of a mobile redesign. And after heavy testing in 2022 and early 2023, Google finally rolled out favicons and site names in the desktop search results on March 8, 2023. Note, if you are looking for site name help, then check out my post about troubleshooting site names issues in the SERPs. This post is about favicons.It ends up that those little graphics in the SERPs can sure help on several levels. For example, a favicon can help reinforce your brand, it can attract eyeballs in a crowded SERP, and it can also help with click-through rate. So you definitely want to make sure your favicon game is strong. Google published guidelines for defining a favicon in order to make sure they can be properly displayed in the SERPs. If you don’t adhere to those guidelines, Google can choose to ignore your favicon and provide a generic one for you. And there’s nothing more “meh” than the generic globe favicon Google provides. Let’s just say you won’t stand out in the SERPs with their generic favicon showing…In addition, you can end up with a blank favicon, which is super-awkward. The space for the favicon is reserved, but nothing shows up. It’s a just a blank white space where a favicon should appear. So sad… and