What a favicon is and why it still matters

Your favicon is the small brand mark in browser tabs, bookmarks, history, and sometimes mobile home screens – fuzzy icons look like abandoned sites.

WordPress calls this the Site Icon. One well-prepared square master is enough for most sites; PWA installs may also need icons in a web app manifest.

Prepare the artwork

Start from a sharp square master; design for tiny sizes, not a cropped billboard logo.

Use a square source (512×512 px or larger) with simple shapes that survive 16×16.
Test on light and dark browser chrome; add a subtle background if transparency vanishes on dark tabs.
Keep edges clean – no hairline strokes that disappear when downscaled.
SVG favicons can look crisp where the stack supports them, but keep a PNG Site Icon for broad compatibility.

For general media hygiene, see image optimization.

WordPress 7 paths: classic vs block

You can set the Site Icon from the Customizer on classic themes or via site settings in the Site Editor on block themes.

Classic themes (Customizer)

Appearance → Customize → Site Identity (labeling can vary slightly by theme).
Select Site Icon, upload your square image, crop if prompted.
Publish and hard-refresh the front end.

Block themes (Site Editor / WP 7)

Appearance → Editor (Site Editor).
Open site / general settings for the site icon / logo area (WordPress 6.5+ and 7.x expose Site Icon in site settings rather than only Customizer).
Upload the same square asset and save.

You can still use a small plugin or manual <link rel="icon"> tags in a child theme when you need apple-touch-icon or manifest entries the UI does not cover.

Google, apple-touch-icon, PWA

Search may show a favicon when the icon is crawlable, square, and meets Google’s size/format expectations – SERP updates are not instant.

Make the icon reachable to Googlebot (do not block it in robots.txt).
Keep a stable URL when possible; constant filename churn slows cache updates.
Add apple-touch-icon for iOS home-screen bookmarks.
For PWA, declare icons in the web app manifest with multiple sizes.

Verified: July 2026 – favicon eligibility remains documented in Google Search Central; expect delayed SERP refresh after changes.

Troubleshooting

Most “missing favicon” reports are cache, wrong host, or an old hard-coded link.

Browser / page cache – hard refresh, private window, or different browser.
CDN cache – purge HTML and the icon URL.
Subdomains / www – each host needs a consistent icon or shared tag.
Blurry icon – source too small or overcompressed; re-export from vector.
Desktop yes, mobile no – check apple-touch-icon and theme header overrides.
Google SERP still old – wait, ensure crawl access, request recrawl of the homepage.

Before launch checklists that include brand chrome: AI-built website checklist. For broader QA, use a technical audit.

Implementation checklist

Export a sharp square master (512×512+).
Set Site Icon via Customizer or Site Editor.
Add apple-touch / manifest icons if you support installable experiences.
Purge caches; verify view-source link tags.
Confirm robots.txt does not block the icon URL.

Related on WP-Dude

How to Add a Favicon to Your WordPress Website – Step-by-Step Guide