The favicon is the tiny icon in the browser tab next to the page title. It also appears in bookmarks, browser history, the tab of a saved-to-home-screen page on mobile, and – on some browsers – next to the search result in Google’s listings. A site without a favicon looks like a site that nobody finished configuring. A site with a generic WordPress logo favicon looks like a site where nobody noticed. Fixing it is a two-minute job, but the instructions differ depending on whether you are using a classic theme or a block theme, and the troubleshooting – “I changed the favicon and it did not update” – is its own topic because browser caching is aggressive on this particular file.
This guide covers both the classic and block-theme paths, explains why the favicon sometimes stubbornly refuses to change, and touches on the modern variants (apple-touch-icon, manifest.json) that matter if your site is being saved to mobile home screens.
What a favicon is and where it appears#
“Favicon” is short for “favorite icon” – the term comes from the original Internet Explorer bookmark feature that pulled a small icon from sites when you bookmarked them. In 2026 it is a much broader thing. A modern favicon configuration covers:
- The browser tab. The 16×16 or 32×32 icon next to the page title in Chrome, Firefox, Safari, Edge.
- Bookmarks. The icon shown next to the site name when a visitor bookmarks it.
- Browser history and autocomplete. The same icon appears next to the URL when the user types in the address bar.
- Mobile home screen. When a visitor taps “Add to Home Screen” in Safari or Chrome on mobile, the home-screen shortcut uses a larger version of the icon.
- Search results. Google and a handful of other search engines show the favicon next to the site name in mobile search results, and sometimes on desktop.
- Social mentions. A handful of link-unfurling tools (Slack’s compact link previews, some RSS readers) fall back to the favicon when no Open Graph image is available.
That list means “the favicon” is not really one file any more – it is a small family of icon files at different sizes, referenced from a few
<link>
tags in your HTML and sometimes a manifest file. WordPress handles the baseline automatically. If you want the mobile-homescreen and PWA variants, you add a bit more.
The quick answer: how to add a favicon in WordPress#
Classic themes
- In the WordPress admin, go to Appearance > Customize
- Click Site Identity
- Under Site Icon, click Select site icon
- Upload a square image (at least 512×512 pixels, PNG or JPG both work)
- Crop if prompted, click Select
- Click Publish at the top of the Customizer
The favicon is live immediately. Open your site in a new tab to check.
Block themes
- Go to Appearance > Editor
- Click Styles (top right)
- Click the settings icon (three dots menu or gear icon)
- Find Site Icon (on some block themes this is under Manage or General)
- Upload a square image (at least 512×512 pixels)
- Save
Some newer block themes (Twenty Twenty-Five, for example) expose the Site Icon in Settings > General instead of the Editor. If Styles does not show a Site Icon option, check there.
Either way, WordPress does the heavy lifting: it generates the multiple sizes browsers need (16×16, 32×32, 180×180 for Apple, 192×192 and 512×512 for Android), adds the correct
<link>
tags to your site’s
<head>
, and keeps them aligned with the image you uploaded.
What image to upload#
One rule that trips people up: the image must be square, at least 512×512 pixels, and smaller than 4MB. If your source image is not square, WordPress asks you to crop it. If it is smaller than 512×512, WordPress warns that the result will look blurry on high-resolution displays.
Format. PNG is the right answer for most cases. It supports transparency (so the icon works on any background), it scales cleanly, and WordPress can rasterize it into the smaller sizes without artefacts. JPG works too but does not support transparency, so it is only appropriate if your icon already has a solid background that matches where it will display. SVG is not supported by WordPress’s Site Icon feature – WordPress converts everything to a raster format server-side.
Design. Tiny icons are not miniature logos. A logo that reads clearly at 300px will often be unrecognizable at 16px. The rules that actually work:
- Simplify. If your logo has text, drop the text for the favicon. Use just the mark, the initial, or the most recognizable shape.
- High contrast. The icon needs to work against a light browser tab (Chrome, Firefox, Safari default) and a dark one (macOS dark mode, Edge dark). Avoid pure black or pure white for the main shape – it disappears on one or the other. A saturated colour or a two-tone design with a background shape tends to work.
- Reasonable padding. Leave a small amount of transparent space around the shape. Browser tabs put the icon into a rounded rectangle or circle at the smallest sizes, and elements that go right to the edge get clipped.
- Test at 16×16. Shrink your design to 16×16 in a preview window (most design tools let you do this without resizing the file). If you cannot tell what it is, a visitor with 40 tabs open will not be able to either.
Site Icon vs logo - they are different settings#
A common mistake: people set the logo and assume that covers the favicon too. They do not. The logo appears in the site header as a larger branding element (in the top navigation bar, above the menu, in the footer depending on the theme). The Site Icon appears in the browser tab and bookmarks. They are controlled independently – two different fields in the same Customizer or Site Editor panel.
Both are usually in Appearance > Customize > Site Identity (classic themes) or the equivalent panel in the Site Editor (block themes). The Site Identity panel also has the Site Title and Tagline, which show up in the HTML
<title>
tag; how to change your WordPress site title and tagline covers those alongside where they surface. Upload the right image to each field – a horizontal logo with text for the Site Logo, a square icon for the Site Icon.
Favicons for PWA and mobile home screens#
If your site is intended to be saved to a mobile home screen, used as a Progressive Web App, or pinned in Safari, the baseline favicon is not enough. The two additions that matter:
apple-touch-icon
When an iOS user adds your site to their home screen, iOS picks up a specific icon via the
<link rel="apple-touch-icon">
tag. WordPress’s Site Icon feature automatically adds this link pointing to a 180×180 version of the image you uploaded, which covers most cases. If you want a specifically different icon for iOS (more aggressively simplified, or with a different background colour because iOS sometimes shows icons against a coloured background), you can hook a filter into
wp_head
to add a custom tag:
function custom_apple_touch_icon() {
echo '<link rel="apple-touch-icon" sizes="180x180" href="' . esc_url(get_stylesheet_directory_uri() . '/assets/icons/apple-touch-icon.png') . '">';
}
add_action('wp_head', 'custom_apple_touch_icon');Put the icon file in your theme (child theme, ideally, so it survives parent-theme updates). The filter outputs the tag, iOS reads it when a user saves the site to their home screen.
manifest.json
Progressive Web Apps declare icons through a
manifest.json
(or
manifest.webmanifest
) file. WordPress does not generate one automatically, but several plugins do. PWA for WordPress (maintained by the WordPress.org core team) adds a basic manifest including your Site Icon, a background colour, and the theme colour that a browser should use when your site is launched from the home screen. Install it, configure the manifest colours to match your brand, and the favicon automatically propagates.
If you want to hand-roll the manifest (more control, no extra plugin), create the file in your theme root and reference it from
wp_head
:
{
"name": "Your Site Name",
"short_name": "YourSite",
"icons": [
{
"src": "/wp-content/themes/your-theme/assets/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/wp-content/themes/your-theme/assets/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ea580c",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/"
}Then:
function custom_manifest_link() {
echo '<link rel="manifest" href="' . esc_url(get_stylesheet_directory_uri() . '/manifest.json') . '">';
}
add_action('wp_head', 'custom_manifest_link');For a typical marketing or blog site, you do not need the manifest. Skip this section entirely if nobody is saving your site to a mobile home screen.
Troubleshooting: "I changed the favicon and it did not update"#
This is the single most common favicon complaint, and it has nothing to do with WordPress – the problem is always caching. The favicon is one of the most aggressively cached files a browser handles because browsers assume it is tiny and rarely changes. The cache lives in several layers, and all of them need to clear.
The browser cache
Browsers cache the favicon independently of the regular page cache, and a normal page reload often does not refetch it. To force a refresh:
- Chrome, Firefox, Edge: Hard refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
- Safari: Cmd+Option+R
- If the hard refresh does not clear it: Open the browser dev tools, click the Application or Storage tab, and manually clear the cached favicon for the domain. Or open a private/incognito window – those have no cached favicons and will always fetch fresh.
If you just updated the favicon and want to check whether your change actually deployed, open the icon directly:
https://yourdomain.com/wp-content/uploads/YYYY/MM/cropped-your-icon.png
(the exact URL appears in the site’s
<head>
– view the page source and search for
icon
). If the icon opens with the new image, the change is live on the server and the problem is purely your browser cache. If it opens with the old image, something on the server or CDN has not propagated yet.
The server cache
If your site is served through FastCGI cache, Varnish, or a similar page cache, that caches the HTML that references the favicon URL – not usually the favicon file itself, but if the favicon URL changed (which it does when WordPress uploads a new one with a different filename), cached HTML may still reference the old URL. Purge the page cache through your caching plugin or hosting control panel.
CDN cache
The bigger problem. If you are running Cloudflare, BunnyCDN, or similar, the CDN caches the favicon file with a long TTL (usually days to weeks) because static images are exactly the kind of file CDNs are built to cache aggressively. The favicon will not update for anyone hitting the CDN-cached version until either the TTL expires or you manually purge it.
- Cloudflare: Caching > Configuration > Purge Cache, choose “Purge Everything” or purge the specific favicon URL
- BunnyCDN: Pull Zones > your zone > Purge Cache
- StackPath/Fastly/others: same pattern, purge specific URL or everything
Purging is instant on most CDNs. After the purge, a hard refresh in your browser should show the new icon.
Search engines cache the favicon too
Google crawls favicons independently of the page crawl and caches them for extended periods – sometimes weeks. A new favicon can take a while to show up in search results even when everything on your site is correct. There is no “purge Google’s favicon cache” tool; you just wait. If months go by and Google is still showing an old or wrong favicon, that is worth debugging (usually there is a stale
<link rel="icon">
in the theme’s
header.php
that is pointing at an old URL), but within the first week of a change, the right move is to wait.
The /favicon.ico legacy URL
Some browsers and bots still request
/favicon.ico
at the root of the site regardless of what
<link>
tags your HTML provides. WordPress by default serves a dynamically-generated redirect from
/favicon.ico
to whatever you set as the Site Icon, which works for modern browsers but occasionally confuses older software that expects the literal file.
If you see a lot of 404s on
/favicon.ico
in your access logs (you can see them with
grep "GET /favicon.ico" access.log | grep 404
), create a real
favicon.ico
file and drop it in your site’s web root. The grep guide covers that kind of log filtering if you are comfortable with the command line. On Hostney, you can upload the file through the file manager or SFTP – put it at the document root (not inside
/wp-content/
) and it will be served directly.
Common mistakes#
- Using a non-square image. WordPress crops to a square. If you hand it a rectangular image, you control the crop – but if you let it auto-crop, you may lose the most important part of your logo. Upload a square.
- Uploading an image smaller than 512×512. WordPress will use it, but the high-DPI sizes it generates (180×180 for iOS, 192×192 for Android home screens) will be upscaled from a source that does not have the detail, and they look blurry on retina displays. Always start from at least 512×512.
- Setting the logo and expecting the favicon to inherit from it. Two different fields, two different images. Set both.
- Trusting the browser to show the new favicon immediately. Hard refresh the tab. Open a private window. If it is still wrong, the CDN has it cached.
- Using a favicon with text. Text at 16×16 is a smear. Use a mark or an initial.
- Skipping the mobile home screen test. Save the site to your home screen on a real phone after uploading. The icon that works in the browser tab may look wrong on the rounded iOS home-screen tile.
- Leaving a hardcoded
<link rel="icon">inheader.phpthat points at an old URL. If you (or whoever built the theme before you) manually added a favicon<link>tag, WordPress’s Site Icon output will be in addition to it – the browser picks whichever comes first, usually the hardcoded one. Remove the hardcoded tag and let WordPress handle it, or the hardcoded one will always win. - Relying on the favicon to load over HTTP when your site is HTTPS. An HTTP favicon on an HTTPS page triggers a mixed-content warning in some browsers. See how to fix the mixed content error in WordPress if you are seeing mixed-content warnings related to the favicon.
How Hostney handles favicons#
Hostney does not do anything special with favicons – they are just another static file in your
/wp-content/uploads/
directory after WordPress processes the Site Icon upload, served with the same long cache headers and HTTP/2/HTTP/3 delivery as the rest of your site’s static assets. The built-in FastCGI cache varies correctly on the page URL, so the HTML references to the favicon stay consistent across cached requests, and the favicon file itself is served from the uploads directory with cache headers suitable for a small, rarely-changing image.
When you update the Site Icon through the Customizer or Site Editor, WordPress writes the new cropped file to the uploads directory, updates the database reference, and the change goes live on the next page load. If you are using Cloudflare in front of Hostney (a common setup for traffic-heavy sites), remember that Cloudflare will still cache the old favicon file at its edge nodes until the TTL expires or you purge – the server has the new file, but Cloudflare is what your visitors are hitting. The speed and caching guide covers the full picture of how the various cache layers interact, which is useful context whenever an asset change is not propagating as expected.
For sites with specific PWA or home-screen icon requirements, you can upload additional icon files (apple-touch-icon, manifest icons) through the file manager or SFTP. They sit alongside the theme’s other assets and are served with the same performance profile as everything else.
Summary#
In WordPress, the favicon is set through Appearance > Customize > Site Identity > Site Icon on classic themes, or Appearance > Editor > Styles > Site Icon on block themes. Upload a square PNG at least 512×512 pixels. WordPress generates the multiple sizes browsers need and inserts the appropriate
<link>
tags automatically, including an apple-touch-icon for mobile home screens. If the favicon is not updating after you change it, the problem is almost always caching – hard refresh the browser, purge the CDN, check for a hardcoded icon link in
header.php
, and remember that Google caches favicons for weeks regardless of what you do. For typical marketing or blog sites, no further work is needed; if you care about PWA behaviour or want different icons for different platforms, add a manifest.json and custom
apple-touch-icon
through a small
wp_head
filter. Keep the icon simple, test it at 16×16, and set it once correctly rather than repeatedly trying to figure out why last month’s icon is still in everyone’s browser tabs.