What Is a Favicon? A Plain Guide to Adding and Fixing One

What a favicon is and where the name comes from

Favicon is short for favorites icon, a name that has stuck since Internet Explorer 5 introduced it in March 1999, and the favicon meaning has not changed since. That browser drew a small picture beside each entry in its Favorites list, and the file had to be called favicon.ico in the site root. The Wikipedia favicon history covers the later move to link tags and extra formats.

The rule has loosened since then. Today any image linked from the head section with link rel="icon" can act as your favicon image, and the ICO file format, PNG and SVG are the usual choices. WordPress calls it a site icon, Shopify and Wix call it a favicon, and searchers often say tab icon or shortcut icon, but it is one file with one job. Google Search supports one favicon per hostname, so blog.example.com can carry its own, while example.com/blog shares the icon of the main hostname.

Do not mix it up with the big picture shown when someone shares your link. That is a separate file, explained in our guide to Open Graph image tags.

Favicon vs logo vs app icon

• Favicon. It exists for quick recognition, it is a simplified square mark, and it has to read at 16x16 to 48x48 pixels.
• App icon. This is the home screen version, and the apple-touch-icon is 180x180 pixels.
• Logo. It carries the full brand lockup in any shape and at whatever size a page or print job needs.

A favicon logo is usually a cut down piece of the brand, such as a monogram or the symbol alone, and rarely the whole lockup squeezed into a square.

Why a favicon matters for visitors and SEO

Open fifteen tabs and the page titles shrink to nothing. Only the browser tab icon stays readable, so a clear one helps people find your tab again and spot your site in a long bookmark list. A site with no icon gets a generic globe or blank page symbol, which makes an otherwise good site look unfinished.

Search is the other place it shows up. Google can display your favicon in Google search results beside the site name and title, on mobile as well as desktop. Our meta title guide covers the text that sits next to it.

There is a housekeeping benefit too. Browsers request /favicon.ico on their own when a page declares nothing, so a missing file fills your logs with 404 entries and can add a favicon console error to DevTools. Our guide to console errors shows how to read those messages.

Does a favicon help SEO?

Not as a ranking factor. Google lists favicons under search appearance and publishes no ranking weight for them, so favicon SEO is really about presentation: a recognizable result, clearer branding and a tab people can find again. No click-through figure for favicons has been published, so treat any percentage you read online as a guess. Google also says an icon is not guaranteed to appear even when every rule is met, and it can take days to weeks to show a new one. To qualify at all, the icon must meet the crawl and format rules in the best practices section below.

Where you see a favicon

One icon file rarely covers every surface, because each place that shows your site asks for its own size and format.

Whatever size you export, the artwork has to stay readable when shrunk to 16 pixels, the smallest place it appears.

How SEO Site Checker tests your favicon

The Favicon row in our report is deliberately simple. It asks one question: does the page declare an icon in its HTML?

The exact rule: we scan the final HTML for the first link tag whose rel value contains the word icon, in any letter case. If one exists the check passes, and if none exists it fails.

What the report looks for

So what is a favicon as far as our report is concerned? Any link tag with an icon rel value. We open your page in headless Chromium, wait for the load event and read the rendered HTML, so an icon that JavaScript adds before load is seen too. The first link tag with an icon rel value wins, and its href becomes the value of the check. The values icon, shortcut icon, apple-touch-icon, apple-touch-icon-precomposed and mask-icon all count, even a link placed in the body. Mask-icon passes even though Google only documents the icon, shortcut icon and apple-touch-icon values for search, so a green tick is not a promise of display. Order matters for the preview: if an apple-touch-icon link comes before your rel icon link, the preview shows the Apple file.

What a pass means

A pass means an icon is declared. You get a green tick, the sentence that the website appears to have a favicon and a round preview built from the href, with a relative path joined to your domain. It does not prove the file loads or meets Google's rules, so confirm that with the testing steps below.

What a fail means and what is not checked

A fail means the rendered HTML has no link tag with an icon rel value. You get a red cross, a message that the site does not appear to have a favicon and a How to Fix button. A bare favicon.ico file with no link tag also fails, because we never request that URL. Four things sit outside the check:

• File download. We never fetch the href, so a path that returns a 404 still passes.
• Format and shape. We do not judge file type, pixel size or squareness.
• Crawl rules. We do not check whether robots.txt blocks the icon file, so a blocked icon is not flagged.
• Warnings. The row has only passed and failed, with no amber state.

Read side by side, the three verdicts come down to this.

• Pass: an icon link tag exists in the rendered HTML.
• Fail: no icon link tag exists anywhere in the document.
• Not tested: file download, format, size and icon blocking in robots.txt.

Run the free SEO report

How to add a favicon to your website with HTML

This works wherever you can edit the head of the page. Five steps take you from artwork to a working icon.

1. Start with a square master. Use at least 512x512 pixels and a simple mark that still reads at 16 pixels. If your logo has another shape, crop or pad it with our image resizer.
2. Export the set. You want favicon.ico at 32x32 (or a multi-size ICO), PNG versions, apple-touch-icon.png at 180x180 and a site.webmanifest. Our favicon generator builds all of those, plus the matching link tags, from one upload. An icon.svg is optional and must come from your own vector artwork.
3. Upload the files. Use the site root or a stable assets folder. Keep the favicon path fixed, because Google asks for a stable URL.
4. Add the link tags. Place them inside the head of the home page and of every template, using the code below.
5. Clear caches and test. Purge any page or CDN cache, open the home page in a private window, and load the icon URL directly to confirm it returns the image.

Copy ready link tags

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Optional: only if you made these files -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="manifest" href="/site.webmanifest">

The first line declares the ICO and its size through the sizes attribute, and the second supplies the 180x180 image for iOS. Those two are the core fix. The optional lines add a vector version and point to the manifest that lists your 192x192 and 512x512 icons, so skip them if you have no such files, or you create a new 404. Each href is root-relative, so it works on inner pages. The type attribute is optional for ICO and PNG. The MDN link rel reference lists every rel value and how browsers choose between several icons. The older rel="shortcut icon" still works, but plain rel="icon" is enough.

Where the icon files should live

The site root is simplest, because /favicon.ico is also the path browsers try when you declare nothing. Avoid per page icons, since Google reads one favicon per hostname from the home page.

How to add a favicon in WordPress, Shopify, Wix and Squarespace

Hosted builders write the link tag for you, so the job is finding the upload field. Menu names shift between versions, so use these paths as a guide and look for the words favicon or site icon.

WordPress and Shopify

The WordPress Site Icon field sits in Settings, General, and in Appearance, Customize, Site Identity if your theme still has the Customizer. It wants a square image of at least 512 pixels and lets you crop it. In Shopify, open the theme editor, find the Favicon image field in theme settings and upload a square file; 32x32 is the stated ideal. After saving on either platform, view the page source and look for the link tag instead of trusting the preview.

Wix and Squarespace

In Wix, open the site dashboard, choose Settings, click Manage next to Favicon and upload a square image. Squarespace has a Favicon panel in the site settings and works best with a square PNG, so export a PNG at 300x300 rather than an ICO. Publish the site after the change on both, or the old icon stays live.

On a static site or framework, put the file in the folder the project serves from, such as the app folder in Next.js or the public folder in React and Vite. For any other CMS, follow the HTML steps above.

Favicon size, format and design best practices

Google's published rules decide whether an icon can appear in search, so start there. The favicon size table pairs each item with a practical recommendation.

Google lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported formats, and SVG is missing from that list, so always ship a PNG or ICO as well. For the rest of your images, our guide to modern image formats keeps that wider topic in one place.

Keep one stable URL per hostname and declare it on the home page. Google supports the home page of a domain or subdomain, not a separate favicon for a subdirectory home page such as example.com/news. Googlebot-Image has to crawl the icon file and Googlebot the home page, so check your robots.txt rules before blaming anything else. The full list is in the Google favicon guidelines on Google Search Central.

Design rule: use a simple mark rather than a full logo with words, and give it strong contrast on light and dark tab bars. A transparent background is fine. Check the export at 16 pixels before you ship.

How to check and test your favicon

Our report only confirms that a link tag exists, so finish with a manual test of the file itself.

1. Open the icon URL. Paste it into a browser tab and confirm you see the image, not a 404 or an HTML error page.
2. Inspect the page. In Chrome DevTools, find the link tag in the Elements panel and a 200 response on the icon request in the Network panel.
3. Skip the cache. Browsers keep favicons for a long time, so use a private window or a hard refresh.
4. Check headers. Run the command below and expect a 200 status and an image content type.
5. Test again. Run the free report again and read the Favicon row.

curl -I https://example.com/favicon.ico

Why your favicon is not showing and how to fix it

• The old icon is still there. That is browser cache. Hard refresh, try a private window, and use cache busting by adding a version string such as ?v=2 to the href when you replace the file.
• The icon works on the home page only. A relative href like favicon.ico breaks in subfolders and returns a 404. Use a root-relative URL that starts with a slash.
• The tag lives in one template. Pages built from another template declare nothing. Move the tag to the shared head partial.
• Crawlers are blocked. A robots.txt rule, a login wall or a firewall setting can stop Googlebot, and then the icon never reaches search.
• The file is wrong. A non-square image, a corrupt export or an HTML error page served at the icon URL all fail quietly. Re-export and check the content type.
• Google has not caught up. Recrawling takes days to weeks, so wait, then confirm the hostname and stable URL rules.

If you still need a file to work with, the free favicon generator guide walks through creating the set from scratch.