Docs

Add a favicon

Add a favicon

The favicon is the small icon in the browser tab, in bookmarks, on the phone's home screen and next to your site in Google's mobile results. Without one, the browser shows a blank page symbol and Google shows a generic globe. It is a small thing, but it is the first thing people use to find your tab among twenty others, and a missing icon makes a site look unfinished.

The site checklist looks for a <link rel="icon"> tag on the home page, or a file at /favicon.ico, and warns when it finds neither.

Which files you need

Start from one square image, at least 512 × 512 px, with a simple shape that still reads at 16 px. From it you need:

File Size Used by
/favicon.ico 32 × 32 (may also contain 16 × 16) every browser; requested automatically even without a tag
icon.svg or icon.png SVG, or PNG 48 × 48 or larger modern browsers, Google results
apple-touch-icon.png 180 × 180 iPhone and iPad home screen
192 × 192 and 512 × 512 PNG in the web app manifest Android home screen, installable sites

Google shows a favicon in results only if the home page links it with a tag, the icon is square and at least 8 × 8 px (Google recommends larger than 48 × 48), and robots.txt does not block it. A file at /favicon.ico alone is enough for browsers, but not always for Google.

Check it yourself

Replace example.com with your site:

curl -s https://example.com | grep -ioE '<link[^>]*rel="[^"]*icon[^"]*"[^>]*>'
curl -sI https://example.com/favicon.ico | grep -iE '^(HTTP|content-type|content-length):'

The first command prints the icon tags, the second checks the classic file. Fixed means at least one tag, and the file it points to answers 200 with an image type (image/x-icon, image/vnd.microsoft.icon, image/png or image/svg+xml).

How to fix

Pick how your site is built. On CMS and hosted platforms you upload one image and the platform makes the rest; on custom code you add the files and the tags yourself.

WordPress

WordPress calls the favicon Site Icon and generates all sizes (32, 180, 192 and 270 px) from one upload. It needs a square image of at least 512 × 512 px.

  • Classic themes: Appearance → Customize → Site Identity → Site Icon, upload the image, then Publish.
  • Block themes: open Appearance → Editor, select the Site Logo block and turn on Use as Site Icon in its settings. Recent WordPress versions also show Site Icon under Settings → General.

If you set an icon and the checklist still finds none, the theme does not call wp_head() in its header, which also breaks most plugins: switch to a maintained theme or ask its developer. Then clear the page cache.

Node.js and Next.js

Next.js, App Router. Put the files in the app folder and Next.js adds the tags for you:

File in app/ Becomes
favicon.ico <link rel="icon" href="/favicon.ico">
icon.png or icon.svg <link rel="icon" …> with type and size
apple-icon.png <link rel="apple-touch-icon" …>

favicon.ico only works directly in app/, not in a subfolder.

Next.js, Pages Router, and other Node.js apps. Put the files in public/ (or your static folder) and add the tags to the page head: in pages/_document.js for Next.js, in the main layout template for Express, Nuxt, Astro or SvelteKit. The tags are the same as in the Static HTML tab.

Laravel

New Laravel projects come with public/favicon.ico, and in many versions that file is empty (0 bytes). It answers 200, so it passes the check, but browsers show nothing. Replace it with a real icon and add the other files to public/.

Then link them in the main layout (for example resources/views/layouts/app.blade.php), inside <head>:

<link rel="icon" href="{{ asset('favicon.ico') }}" sizes="32x32">
<link rel="icon" href="{{ asset('icon.svg') }}" type="image/svg+xml">
<link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">

Static HTML

Put the files in the root of the site and add these lines inside <head> on every page (or in the base layout of your site generator):

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The manifest is optional and only needed for the Android home screen. A minimal one, saved as site.webmanifest:

{
    "name": "Example",
    "icons": [
        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
    ]
}

To make favicon.ico, any image editor that exports ICO works, as do many free online favicon generators that output the whole set.

Shopify

Online Store → Themes → Customize, then open Theme settings (the gear icon). Depending on the theme, the favicon is under Logo or its own Favicon section. Upload a square image (Shopify scales it to 32 × 32) and Save.

Wix

Open the site's dashboard and go to Settings → Favicon. Upload a square image and save. Wix shows a custom favicon only on a Premium plan with a connected domain; without one, it shows the Wix icon.

Webflow

Site settings → General → Favicon: upload a 32 × 32 PNG or ICO. In the same section, Webclip is the home screen icon (256 × 256). Then publish the site again.

Squarespace

Squarespace calls the favicon the browser icon. Search the site settings for "Browser icon" (its place in the menu has moved between versions), upload a square PNG (at least 300 × 300 px) and save.

Browsers cache favicons

Browsers keep favicons for a long time, often longer than the page cache. If you have changed the icon but the old one (or none) still shows, check in a private window or with the curl commands above before changing anything else. Google updates the icon in results when it next crawls the home page, which can take days to weeks.

Confirm the fix

Run the two curl commands from Check it yourself again, then open the target in PulseKeeper and click Check now on the Checklist tab. The item turns OK within a few minutes instead of at the next daily run.