Skip to main content
SlapMyWeb
Slap a site

SEO fix

How to Add a Favicon

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

Difficulty
Easy
Impact
Low
Time
15 min

Before

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

After

<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">
Before and after code for: How to Add a Favicon

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 it

  1. 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.

  2. 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.

  3. Add an apple-touch-icon

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

  4. 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.

The code

Beforehtml
<!-- no icon: blank square in tabs and mobile search results -->
Afterhtml
<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">

On your platform

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.

Sources

More fixes

SEO

How to Remove an Accidental noindex

Find and remove a stray noindex that is keeping an important page out of Google entirely.

SEO

How to Fix Broken Internal Links (404s)

Find and repair internal links that point to missing pages so you stop leaking link equity.

SEO

How to Fix Redirect Chains

Collapse multi-hop redirects (A→B→C) into a single hop to the final URL.

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 signupLive scan progress