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

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

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)

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

Block themes (Site Editor / WP 7)

  1. Appearance → Editor (Site Editor).
  2. 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).
  3. 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

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

Related on WP-Dude

Loading (streaming)