Fix Guide

How to Add a Favicon

Give the site an icon for browser tabs, bookmarks and search results.

Easy Low Impact 15 min

A missing favicon leaves a blank icon in browser tabs, bookmarks and — on mobile — next to your result in Google. It has no ranking effect, but it is what makes your tab findable among twenty others, and Google needs a square icon of at least 48 pixels, reachable and crawlable, to show one in search.

Why It Matters

Mobile search results display a favicon beside each listing. A blank square next to competitors with icons is a small, permanent credibility cost for a fifteen-minute fix.

How to Fix

Make a square source icon

At least 48 by 48, ideally larger and multiple of 48. SVG works for browsers; a PNG fallback covers everything else.

Reference it in the head

A link rel="icon" pointing at the file. Modern browsers also accept /favicon.ico at the root without any markup.

Add an apple-touch-icon

180 by 180 PNG for iOS home-screen bookmarks, which ignore the standard favicon.

Keep it crawlable

Google will not show an icon it cannot fetch, so the file must not be blocked by robots.txt and the URL should be stable.

Code Fix

html

Before (broken)

<!-- no icon: blank square in tabs and mobile search results -->

After (fixed)

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Platform-Specific Instructions

WordPress

Set it as the Site Icon in the customiser and WordPress generates the sizes and markup.

Next.js

Place icon.svg or favicon.ico in the app directory and Next emits the tags automatically.

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs — and links each one straight to its guide.

Run a free audit

Free foreverNo signupResults in 30s