Have you ever noticed the tiny image that appears next to a website’s name in your browser tab? That is a favicon. It might look small, but it plays a big role in how professional your site looks.
If you have ever had a dozen or so tabs open at once, you know how hard it is to find the one you want. A clear favicon helps your visitors spot your site instantly. Adding one is a simple way to boost your brand, and it only takes a few minutes.
What is a Favicon?
A favicon (short for “favorite icon”) is the small icon you see in browser tabs, bookmark lists, and search history. It’ll usually appear next to the website name. As you can see in the screenshot above, our site icon is an S and appears next to our name – “Site Design Squad”.
If you’re using WordPress you’ll often see it referred to as the “Site Icon” but across the internet it’s mostly known as a favicon.
Why should I use a Favicon?
It might seem like a tiny detail, but Favicon’s really do help a lot in a variety of rates. Here’s some of the reasons why you should use one:
- Brand Recognition: It puts your logo (or a part of it) right in the browser and search results
- User Experience: It helps users find your tab quickly and stand out against competitors
- Professionalism: A generic blank page icon looks unfinished. It gives the impression your website doesn’t work, and clicking the link might be a waste of time.
- Replaces the default WordPress Favicon: By default WordPress sets their logo as your sites favicon. Which can come across unprofessional and gives off the impression your website was finished.
- Improves click through rate: Search engines such as Google will use your sites favicon, and place it next to your websites name. Having a favicon helps you stand out against competitors, and grabs a potential customers attention.
How Favicons Impact Search Results
As mentioned above, Favicons show up next to your site name on Google and other search engines.
Below is a screenshot of a search I performed for “plumbers in Somerset”. In the list, only the top result has set their favicon. For the other 3 results, they’re using the default generic icon that came with their website’s hosting platform or the default WordPress site icon.
Out of these results, I’d be most likely to click on Able Group. Why? They look more professional, and it also gives the impression their website works.
According to a study carried out by Backlinko, 50% of users will decide which result to click in 9 seconds and on average, most click through within 14.6 seconds. So you really have a small window of opportuntiy to capture someone’s attention. Small details like favicons really do matter.
What size and format does a Favicon need to be?
For the best results on all devices, and to meet requirements for search engines we recommend sticking to these specific settings:
- File Type: You can use a standard PNG or JPEG file. We recommend PNG with a transparent background so it looks good on dark and light browser bars.
- Size: WordPress recommends your image be at least 512 x 512 pixels.
How to create a Favicon
Creating a favicon doesn’t have to be hard. Most brands (including ourselves) will use part of their logo as their favicon. We opted to use the S from our logo as our favicon. Businesses like Google, Amazon and Ahrefs have also done the same as shown in the screenshot below:
If you have an image logo, you could also use part or a miniture version of that. Although note that it should be clear and easy to tell what the logo is of, so if you have a large image logo that looks blurry when shrank, opt for an alternative. Here’s another example where Instagram, Backmarket, John Lewis and Reddit are using an image logo as their Favicon. You’ll see how all their icons are clear, and easy to tell what they’re for.
When it comes to creating the favicon, you can use design tools such as Canva (free or pro) or book us in for a quick fix to help.
If you choose to use Canva, you’d make a new design, and then select “custom size”, that is 512px by 512px by entering 512 into the width and height boxes. Then click “create new design”.
You’d then create your chosen icon. Remember to keep it simple. Favicons only show up at 16px wide in browsers. Avoid lots of text or detailed drawings. Simple shapes and bold colours work best.
If you’re using WordPress you can save the icon as a PNG or JPG file which you will add to WordPress by following the instructions below. If you’re not uploading it to WordPress, you’ll need to save it as an .ico file which isn’t possible with Canva. Luckily there’s free image converters such a Favicon Generator where you upload the PNG or JPG version, and it’ll create an ICO file for you to download.
How to Add a Favicon to WordPress
1. Log in to your WordPress Dashboard
Go to your website login page (usually yourdomain.com/wp-admin) and enter your username and password.
2. Open the Customiser
On the left-hand menu, hover over Appearance and click on Customise. This will open the visual editor for your site settings.
3. Locate ‘Site Identity’
Look through the menu on the left side of the Customiser. You want to click on the tab labeled Site Identity (or similar, but most high quality themes like GeneratePress refer to it as Site Identity).
Click here to preview your posts with PRO themes ››
4. Upload your Site Icon
Typically at the bottom of this section, you will see an area called “Site Icon”. Click the Select Site Icon button.
5. Crop and Publish
Upload your 512×512 image. WordPress might ask you to crop the image if it isn’t a perfect square. Once you are happy with how the preview looks, click the Publish button at the top of the page.
How to get the favicon to show in Google search results
Google often shows favicons next to search results, especially on mobile.
To give your site the best chance of showing up correctly, Google has a few guidelines:
- Accessibility: Google’s crawler must be able to reach your favicon file (don’t block it).
- Content: The icon should represent your brand accurately.
- Shape: It should be a square.
- Size: Google suggests starting with a multiple of 48px square (like 48x48px, 96x96px, or 144x144px). However, since WordPress asks for 512x512px, sticking to the WordPress standard usually covers this base well.
You can read the full technical list from Google here: Google Search Central Guidelines.
It can take time for Google to recrawl your website and update the favicon. You can try to increase the chances it does this sooner using Google Search Console. This is a free tool that lets you see exactly how your website is performing in Google Search Results. We set this up as standard with all our monthly web design packages. If you have a site already, we can also get it set up for you through our care plans or as a one-off quick fix.
Here’s how to ask Google to recrawl a page:
1. Log in to Google Search Console
Head over to Google Search Console and select your website property from the dropdown menu in the top left corner.
2. Use the URL Inspection Tool
At the very top of the screen, you will see a search bar that says “Inspect any URL in…”. Click there and paste the full address (URL) of the page you updated.
- Tip: If you just updated your favicon, paste your homepage URL (e.g.,
https://yourdomain.com/).
3. Wait for the Data
Hit Enter on your keyboard. Google will take a few seconds to retrieve the current data it has for that page. You will see a grey “Retrieving data from Google Index” screen.
4. Request Indexing
Once the page loads, look for a box that says “Page changed?” or simply look for the Request Indexing button. As highlighted with the box in the screenshot below. Click that button.
Google will run a quick test to make sure the page is live and doesn’t have any major errors. If everything looks good, you will see a confirmation message saying the URL was added to a priority crawl queue.
Important things to know
- This isn’t instant: Even after requesting a recrawl, it can take anywhere from a few hours to a few days for the changes (like your new favicon) to update in search results.
- Don’t spam the button: Clicking “Request Indexing” multiple times for the same page won’t make it happen any faster. There’s also a limit on how many pages you can request to be crawled per day.
- We can handle this for you: If you need help, we can do this for you. Just get in touch.
Common Mistakes to Avoid
We have mentioned some of these throughout the post, but to make things easier here’s a list of hte common mistakes to avoid when creating your Favicon.
- Using a Complex Image: If you shrink a detailed photo down to 16 pixels, it will look like a blurry smudge. Use a clear graphic.
- Forgetting Transparency: If your icon is a circle but you save it as a JPEG, it will have a white box around it. Use a PNG with a transparent background for a cleaner look.
- Leaving it as the Default: Many themes come with a default icon or leaves the favicon as the default WP icon. Make sure you replace it so you don’t look like every other site on the search results.
- Don’t spam Google Search Console: Remember there’s a limit to how many times Google will crawl your site and how many times you can request it does per day. So don’t spam the request indexing option on search console.
Need help getting this sorted?
If you would rather we handle the technical side for you, we are happy to help.
- Ongoing Support: If you want peace of mind knowing your site is always looking its best, check out our Website Care Plans. We handle updates, backups, and small tweaks like this for you.+1
- One-off Help: Just need this fixed right now? We can sort it as a Quick Fix.
- As part of our Website Design Packages: When we build a new website, we handle all the technical setup including your favicon. We ensure your site looks professional and branded from the moment it goes live. Check out our website deisgn packages here.
