How to Add a Favicon in WordPress (Add, Change, Remove)

Q: How do I change or remove the favicon in WordPress?

Reopen the Site Icon control ( Appearance → Customize → Site Identity or Settings → General ). To change it, click Change image and upload a new file; to remove it, click Remove , then publish or save. Clear your cache to see the update.

Q: Does WordPress create a modern SVG or maskable favicon?

No. The Site Icon feature outputs PNG sizes plus the basic <link> tags — it does not emit a scalable favicon.svg or a proper maskable PWA icon. For the full modern set, generate the files with a tool and add the extra tags via your theme header or a headers plugin.

Published December 2, 2025 · Updated June 9, 2026

Set a WordPress favicon with the built-in Site Icon: upload a square 512×512 image under Appearance → Customize or the Site Editor, crop, publish.

WordPress has a built-in favicon feature called Site Icon. On a classic theme, set it under Appearance → Customize → Site Identity; on a newer block theme, use Appearance → Editor (the Site Editor) or Settings → General. Upload a square image at least 512×512, crop it to the square preview, and click Publish or Save. WordPress stores the icon, resizes it, and adds the favicon tags to your <head> for you — no plugin, no theme editing.

In one line: upload a square 512×512 image to Site Identity, crop, publish — WordPress does the rest.

The catch: WordPress’s Site Icon covers the basics but not the full modern set. It outputs PNG sizes and simple <link> tags — it does not generate a scalable favicon.svg or a proper maskable PWA icon. For a complete, verified favicon set you’ll add a few extra tags, covered near the end of this guide.

What is the WordPress Site Icon?

WordPress calls the favicon the Site Icon. Introduced in WordPress 4.3 (2015), it’s the small graphic that appears in browser tabs, bookmarks, the WordPress mobile app, and — when Google chooses to show one — next to your search listing.

When you upload a Site Icon, WordPress:

Resizes your single source image into the sizes it serves (including 32×32 for tabs and a 180×180 Apple touch icon).
Adds the matching <link rel="icon"> and <link rel="apple-touch-icon"> tags to your site’s <head>.
Stores the image in your media library so you can reuse or replace it later.

For most sites that’s enough. Its limits — no SVG, no maskable icon — only matter if you want the icon razor-sharp on every display or installable as a PWA.

Add a favicon: classic theme (Customizer)

If you’re on a classic theme — anything using the traditional Customizer rather than full site editing — use the Customizer:

Log in to your WordPress dashboard.
Go to Appearance → Customize.
Click Site Identity in the left panel.
Under Site Icon, click Select site icon.
Upload your image, or pick one already in the media library.
WordPress shows a square crop tool. Drag to frame the icon, then click Crop image. (If the image is already a perfect square at the right size, it skips cropping.)
Click Publish at the top of the Customizer to save.

The favicon appears in browser tabs right away (allowing for caching — see troubleshooting).

Add a favicon: block theme (Site Editor or Settings)

Block themes (WordPress 5.9+, which use full site editing) don’t always expose the Customizer. You have two reliable paths.

Settings → General (works everywhere)

This is the simplest route and works on both classic and block themes:

Go to Settings → General.
Scroll to Site Icon.
Click Select site icon, upload your image, and crop it.
Click Save Changes.

WordPress added the Site Icon control to Settings → General so block-theme users have a dependable place to set it — use this if the Customizer is missing.

Appearance → Editor (Site Editor)

You can also set it inside the Site Editor: go to Appearance → Editor, open the editor’s settings, and find the Site Icon control (its location moves between WordPress versions — it may sit in Styles, a general settings panel, or link back to Settings → General). Upload, crop, and save. If you can’t find it in the editor, fall back to Settings → General — that control is always present.

What size should a WordPress favicon be?

WordPress recommends a square image of at least 512×512 pixels. Upload one source that big and WordPress downscales it to every size it serves, so the small versions stay sharp.

Make it square. A rectangular image triggers the crop step; cropping a wide logo down to a square rarely looks right, so square it up first.
Start at 512×512 or larger — letting WordPress stretch a tiny image produces a blurry tab icon.
PNG is the safest format (transparency supported). JPG works but has no transparency. SVG is not officially supported by the Site Icon uploader — don’t rely on it here.

Need a clean square source? FaviconBuilder generates the whole set from one upload — a proper 512×512 PNG plus an SVG and the PWA icons — free, no account, and your image never leaves your browser. Upload the 512×512 PNG it produces as your WordPress Site Icon. (How to create a favicon from a logo →)

How to change the WordPress favicon

To swap your Site Icon for a new one:

Reopen the Site Icon control — Appearance → Customize → Site Identity, or Settings → General.
Click Change image under the current icon.
Upload a new file or pick one from the media library, then crop.
Click Publish (Customizer) or Save Changes (Settings).

WordPress replaces the old icon with the new one. If the old favicon lingers in your tab, that’s caching — clear it (see below).

How to remove the WordPress favicon

To take the favicon off entirely:

Reopen the Site Icon control — Appearance → Customize → Site Identity, or Settings → General.
Click Remove under the current Site Icon.
Click Publish or Save Changes.

With no Site Icon set, browsers fall back to a generic blank-document icon. Note that browsers still auto-request /favicon.ico from your site root, so you may still see a request for that file in your logs even after removing the Site Icon.

What WordPress generates — and what it leaves out

The Site Icon feature gives you the everyday favicon, but it stops short of the full 2026 set:

File	Site Icon?	Notes
`favicon.ico` (multi-size)	Partial	Browsers still request `/favicon.ico` from root; WordPress serves icon PNGs via `<link>` tags rather than a hand-built multi-size ICO
PNG tab icon (32×32)	Yes	Generated and linked automatically
`apple-touch-icon` (180×180)	Yes	Generated and linked automatically
`favicon.svg` (scalable)	No	Site Icon never emits a modern SVG
`icon-512-maskable.png`	No	No proper maskable PWA icon (its own padded art, 409×409 safe zone)

So WordPress handles tabs and the iOS home screen, but you get no scalable SVG (the modern primary icon) and no maskable icon (needed for a clean PWA install). For the complete verified set, add the missing tags yourself. (Why SVG is the modern default →)

Adding the full modern favicon set (SVG + manifest)

To get the complete set, generate the files with FaviconBuilder, upload them to your site, and add the extra <link> tags. You don’t have to fight the theme files — a plugin like Insert Headers and Footers (WPCode) lets you paste tags into the <head> from the dashboard. Paste this:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

A few rules that keep this correct:

Never use rel="shortcut icon" — it was never a valid relation. Use rel="icon".
The apple-touch-icon.png must be opaque (solid background, ~20px padding); transparency turns black on iOS.
The manifest should list three PWA icons — 192 any, 512 any, and a separate 512 maskable — not one entry marked any maskable. (Full manifest setup →)

Prefer code? Add the tags to a child theme’s header.php before </head>, or hook into wp_head from functions.php:

add_action('wp_head', function () {
    $base = get_stylesheet_directory_uri();
    echo '<link rel="icon" href="/favicon.svg" type="image/svg+xml">';
    echo '<link rel="apple-touch-icon" href="' . $base . '/apple-touch-icon.png">';
    echo '<link rel="manifest" href="/site.webmanifest">';
});

Upload the files to your site root (or theme folder) so the href paths resolve. (Step-by-step HTML guide →)

Troubleshooting WordPress favicons

New favicon won’t show. Almost always caching. Hard-refresh (Ctrl/Cmd + Shift + R), clear any caching plugin (WP Super Cache, W3 Total Cache, LiteSpeed), purge your CDN (Cloudflare, Jetpack), and test in a private window. Caches can take a few hours to expire on their own.

An old favicon still appears. Same cause, plus one more: a theme that hardcodes its own favicon. Check your theme’s options panel (often Appearance → Theme Options or the Customizer) for a custom favicon field and clear it so the Site Icon takes over.

No Site Icon option. Update WordPress (the feature exists from 4.3 onward) and try Settings → General, which always shows the control. Very old themes occasionally suppress it — switching to a current theme restores it.

Blurry favicon. Your source was too small or got upscaled. Remove the Site Icon and re-upload a sharp 512×512 or larger square image. (Favicon not showing? Full fix guide →)

Summary

Adding a favicon in WordPress comes down to the built-in Site Icon:

Open Appearance → Customize → Site Identity (classic) or Settings → General / the Site Editor (block themes).
Upload a square 512×512 image and crop it.
Publish or Save Changes — WordPress resizes and links it automatically.

Use Change image to swap it and Remove to clear it. WordPress covers tabs and iOS but not the modern SVG or maskable icon, so for the full verified set, generate the files with a tool and paste the extra <link> tags via a headers plugin or a child-theme header.

Continue reading:

Frequently asked questions

How do I add a favicon in WordPress?

Use the built-in Site Icon feature. On a classic theme go to Appearance → Customize → Site Identity; on a block theme use the Site Editor or Settings → General. Upload a square image at least 512×512, crop it, and publish — WordPress generates the smaller sizes and adds the HTML automatically.

What size should a WordPress favicon be?

WordPress recommends a square image of at least 512×512 pixels. It downscales that one source to the sizes it serves (including 32×32 and a 180×180 Apple touch icon), so a larger square source keeps the small versions sharp.

How do I change or remove the favicon in WordPress?

Reopen the Site Icon control (Appearance → Customize → Site Identity or Settings → General). To change it, click Change image and upload a new file; to remove it, click Remove, then publish or save. Clear your cache to see the update.

Does WordPress create a modern SVG or maskable favicon?

No. The Site Icon feature outputs PNG sizes plus the basic <link> tags — it does not emit a scalable favicon.svg or a proper maskable PWA icon. For the full modern set, generate the files with a tool and add the extra tags via your theme header or a headers plugin.

Why isn't my new WordPress favicon showing up?

It's almost always caching, or a theme hardcoding its own favicon. Hard-refresh, clear any caching plugin and CDN cache, and test in a private window. If a different icon still appears, check your theme options for a custom favicon setting that overrides the Site Icon.

Related guides

← All guides