Favicon Guide: Sizes, Formats and Showing in Google
By Neha
Search for a bakery in Pune on your phone and look at the results. Most have a small logo next to the name. A few show a plain grey globe instead. Nobody decides to skip a result because of a globe, but in a list of similar businesses, the ones with a clear little logo look more established.
That little logo is the favicon. This guide covers what it is, the favicon size and formats you need today, how to add one on WordPress, Shopify, Wix or a hand-built site, and why Google sometimes keeps showing the old one.
Short answer: A favicon is the small square icon of your brand shown in browser tabs, bookmarks, phone home screens and next to your site in Google results. Make it from a simple square version of your logo, at least 512×512 pixels to start with. Provide a favicon.ico, a few PNG sizes and an Apple touch icon, link them in your home page's head section, and give Google a few weeks to pick it up.
What is a favicon?
A favicon, short for "favourite icon", is the tiny square picture that stands for your website. You see it in the browser tab, in bookmarks and history, and on a phone's home screen when someone saves your site.
It is usually a simplified version of your logo: just the symbol, or the first letter of your business name on a coloured background. A full logo with the name written out does not work, because at 16 pixels wide the text turns into a smudge. A dental clinic called Sharma Dental might use a white tooth on blue, or simply a bold "S".
Without a favicon, browsers show a blank page icon and Google shows a generic globe. Neither will lose you customers on its own, but both make a site look unfinished, especially next to competitors who have one.
Why does your favicon show in Google results?
Google can show your favicon next to your site name in its search results. On a phone, that puts it at the top of your result, one of the first things a searcher sees.
A favicon does not push your page higher in the rankings. What it can do is make your result easier to recognise and trust. A customer who visited your site last month and sees your icon again knows at a glance which result is yours.
Google picks up the favicon from your home page, and its favicon guidelines say that even when you follow every rule, showing it is not guaranteed. Following them gives you the best chance.
What are Google's rules for favicons?
As of October 2026, Google's favicon guidelines ask for the following:
- Square. The icon must have a 1:1 shape. A wide logo will not be used.
- Big enough. At least 8×8 pixels, but Google recommends larger than 48×48 so it looks sharp on every screen.
- A supported format. Google lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not on that list, so always provide a PNG or ICO even if you also have an SVG.
- Linked from the home page. A
<link rel="icon">line in the head section of your home page. - Crawlable. Google's crawlers must be allowed to read both your home page and the icon file.
- A stable address. Do not keep changing the file's address.
- One per site. Each domain or subdomain gets one favicon. A folder such as yoursite.in/hindi cannot have its own.
- Representative of your brand. Google replaces icons it finds inappropriate with a default one.
The crawling rule catches more sites than you would think. If your robots.txt blocks the folder where the icon lives, such as an images or theme folder, Google cannot fetch it. Paste your robots.txt into the robots.txt tester and test the icon's address to be sure. Our robots.txt guide explains what the file should and should not block.
Which favicon sizes and formats do you need today?
One file is no longer enough. Different browsers and phones look for different files, and a small set covers them all.
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 pixels in one file | Older browsers, Windows shortcuts, Google |
| favicon-32x32.png | 32×32 | Browser tabs on most computers |
| favicon-16x16.png | 16×16 | Small browser tabs |
| apple-touch-icon.png | 180×180 | iPhones and iPads, when someone adds your site to the home screen |
| android-chrome-192x192.png and 512x512.png | 192×192 and 512×512 | Android phones, through a small manifest file |
The Android sizes come from Chrome's own documentation: web.dev's guide to the web app manifest says Chromium needs at least a 192×192 and a 512×512 icon. The manifest is a short text file, usually called site.webmanifest, that lists those icons along with your site's name.
The Favicon Generator makes this whole set from one logo. Start with a square PNG or SVG of at least 512×512 pixels, add padding or a background colour if the logo looks cramped, and download favicon.ico, the five PNGs and the manifest. It also gives you the lines of code to paste. Everything happens in your browser, so your logo is never uploaded anywhere.
How do you add a favicon in WordPress, Shopify and Wix?
Website builders have their own setting for this, so you rarely need to touch code. Use the builder's setting rather than uploading files by hand.
WordPress. According to the WordPress documentation, from version 6.5 the Site Icon setting lives in Settings, then General. Click "Choose a Site Icon" and pick a square image of at least 512×512 pixels. PNG is recommended. On versions 4.3 to 6.4 it is under Appearance, Customize, Site Identity. WordPress creates the smaller sizes for you.
Shopify. Shopify's favicon help page says to go to Online Store, click Edit theme, open Theme settings (the gear icon), then Logo or Favicon depending on your theme. Choose the image under Favicon image and save. As of October 2026, favicons are not available on Shopify's Starter plan, and large images are reduced to 32×32 pixels on upload.
Wix. Wix's favicon help page says you need a Premium plan and a connected domain, and the site must be published. Go to Settings in the dashboard, then Website settings, and click Upload Image under Favicon. Apart from SVG files, the image must be a square that is a multiple of 48 pixels, such as 48×48 or 96×96.
How do you add a favicon to a plain HTML site?
Upload the files to the main folder of your website, then paste a few lines into the head section of every page, or at least the home page.
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
These are the same lines the Favicon Generator gives you. Each one points to a file, so the names must match exactly what you uploaded. If your developer built the site with a framework, the files usually go in a folder named public, and the framework adds the lines for you.
While you are working on how your site looks outside its own pages, check the preview that appears when someone shares your link. That image is set separately, and our guide to fixing link previews on WhatsApp shows how. The Open Graph checker shows what a shared link will look like.
Why is Google still showing the old favicon or a globe?
Usually because Google simply has not visited your home page again yet. Google's guidelines say recrawling can take anywhere from several days to several weeks.
Work through this checklist:
- Open your site in a private window. Browsers remember favicons for a long time, so your own browser may be showing an old copy.
- View the home page source and confirm the
<link rel="icon">line is there. - Open the icon's address directly in a browser. If it shows an error, the path is wrong.
- Check the shape and size. Square, and larger than 48×48.
- Check robots.txt is not blocking the icon or its folder.
- Ask Google to look again. In Search Console, use URL Inspection on your home page and click Request indexing. Our Search Console guide shows where to find it.
After that, wait. Changing the file again and again only resets the clock.
Frequently asked questions
What size should a favicon be?
Start from a square image of at least 512×512 pixels and create smaller copies from it. A typical set is a favicon.ico holding 16, 32 and 48 pixel sizes, 16 and 32 pixel PNGs, a 180×180 Apple touch icon, and 192 and 512 pixel icons for Android. For Google, the icon must be square, and Google recommends larger than 48×48 pixels.
Does a favicon help SEO?
Not directly. Google does not rank a page higher because it has a favicon. But Google shows the favicon next to your site in search results, and a clear, familiar icon can make people more likely to click on your result instead of the one below it. It also makes your site look finished and trustworthy in browser tabs and bookmarks.
Can I use an SVG as my favicon?
Some browsers can show an SVG favicon, and it stays sharp at every size. But as of October 2026, SVG is not in Google's list of supported favicon formats for search results. So if you use an SVG, also provide a favicon.ico or PNG version and link it in the head section, so Google has a file it can use.
Why does my favicon look blurry?
Most often the starting image was too small, or it was a wide logo squeezed into a square. Start from a sharp image of at least 512×512 pixels, and use only the symbol or first letter of your brand. Fine detail and thin lines disappear at 16 pixels, so bold, simple shapes on a solid background work best.
How long does Google take to show a new favicon?
Google's guidelines say recrawling can take anywhere from several days to several weeks after you change your home page. You can speed it up a little by requesting indexing of the home page in Search Console's URL Inspection tool. If nothing has changed after a month, check that the icon is square, linked from the home page and not blocked.