Fix Guide

How to Add a Favicon

Add the small site icon shown in browser tabs, bookmarks and search results.

Easy Low Impact 10 min

Why It Matters

The favicon appears in tabs, bookmarks, and next to your result on mobile search. A missing or broken favicon looks unfinished and slightly lowers trust. Google also shows it in search results.

How to Fix

Generate the icon set

Create the standard sizes (ICO, 32×32, 180×180 Apple touch, 192/512 PWA) from a square source image.

Reference them in the head

Add the favicon and apple-touch-icon links to the <head>.

Code Fix

html

Before (broken)

<head>
  <!-- no favicon → browser requests /favicon.ico, gets 404 -->
</head>

After (fixed)

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

Platform-Specific Instructions

WordPress

Appearance → Customize → Site Identity → "Site Icon" handles all sizes.

Next.js

Drop icon.png / apple-icon.png in app/ and Next generates the tags.

Check with our tool

Favicon Generator

Want to find all issues at once?

Run a free audit and get a prioritized fix list with auto-generated code.

Run a free audit

How to Add a Favicon — Fix Guide | SlapMyWeb