If the SEO Action Plan browser extension flagged your site for a missing favicon, you’re not alone. It’s a super common issue and luckily, very easy to fix. This guide is for anyone running a website, whether it’s built with WordPress, Shopify, Wix, or something custom. Let’s walk through what a favicon is, why it matters, and how to make sure it’s working correctly.
What’s a Favicon? #
A favicon is that small icon you see in browser tabs, bookmark bars, and even in Google search results on mobile. It helps people recognize your site faster and makes it feel more professional. If it’s not showing up, most browsers will display a default icon instead, which isn’t ideal for branding.
Why a Missing Favicon Matters for SEO #
While favicons don’t directly affect search rankings, they do impact how your site appears in search results. Google may show your site’s favicon next to the page title on mobile search, helping users spot your brand more easily.
If your favicon is missing or not correctly set, Google may skip displaying any icon or replace it with something generic. According to Google’s official guidelines, they use the rel="icon" link in the page’s <head> to pick up the favicon. They also fetch the icon using Googlebot-Image, which means the favicon file must be publicly accessible and not blocked by robots.txt.
How to Check if Your Favicon is Set on the page #
Here are a few ways to verify it:
- Use the SEO Action Plan browser extension
Open your website, click the extension icon, go to the SEO tab, and check if your favicon shows up. If it’s missing, you’ll see a warning right there. - Manually check your page source
Right-click your site and select “View Page Source” or use developer tools. Search for a line<link rel="icon"inside the<head>section. - Look at your browser tab
If you only see a blank or generic icon, chances are your favicon isn’t properly set.
How to Add or Fix a Favicon #
Option 1: Using Your CMS or SEO Plugin #
Most platforms offer a simple way to set this up:
- WordPress
Go to Appearance > Customize > Site Identity and upload your Site Icon.
Note: Yoast SEO doesn’t handle favicons, it uses what’s set in the Customizer. - Shopify
Go to Online Store > Themes > Customize > Theme Settings, then upload your favicon. - Wix
From the Dashboard, go to Settings > Website Settings > Favicon. - Squarespace
Navigate to Design > Browser Icon and upload the image. - Webflow
Open Project Settings > General, then upload the favicon file.
Option 2: Adding the Favicon Manually #
If you’re not using a CMS or want full control, here’s how to do it manually:
- Upload your favicon file to your site.
- Common formats include
.ico,.png, or.svg - Place it in your root folder or a preferred directory
- The image URL can be relative (
/favicon.png) or absolute (https://yoursite.com/favicon.png)
- Common formats include
- Add this line inside your site’s
<head>section:
<link rel="icon" href="/favicon.png">
Or if you’re using a custom location:
<link rel="icon" href="https://yoursite.com/assets/images/favicon.png">
That’s it. Browsers may aggressively cache favicons, so clear your cache or open the site in an incognito window to test changes.
Google’s Guidelines for Favicons #
Based on Google’s documentation, here’s what you should follow:
- Use a square favicon image that’s at least 48×48 pixels
- File formats like
.png,.ico, or.svgare all fine - Make sure the favicon is accessible by Googlebot-Image (don’t block it in
robots.txt) - Place the favicon link in the HTML
<head>using<link rel="icon" href="..."> - Use a favicon that visually represents your brand or site. Avoid using content that’s inappropriate or misleading
- Only one favicon will be used per page; avoid adding multiple favicon links with different images
Final Step: Test It #
Once added, give it a few minutes and refresh your site. You can:
- Check the favicon preview again in the SEO Action Plan extension – the complete SEO extension you need to check your website
- Use Google’s Rich Results Test to confirm visibility
- Inspect the image URL in your browser to ensure it’s publicly accessible
Fixing this is a quick win. A missing favicon may seem small, but it’s one of those details that helps tie everything together and gives your site a polished look.
If you’re seeing other SEO issues like missing meta tags or heading problems, your favorite complete SEO extension – SEO Action Plan can help you report those too, all from one place.