The browser tab shows the WordPress logo — or no icon at all — instead of the site’s own branding. Visitors on mobile see a generic icon when they add the site to their home screen. Google search results show a tiny generic icon next to the site name instead of the brand logo. A WordPress favicon — the small square icon that represents the site in browser tabs, bookmarks, search results, and device home screens — is one of the first things visitors notice and one of the easiest customisations to implement correctly. You’ll find the complete rundown in our Complete Guide to WordPress How.
WordPress Favicon — Setting It Through the Customizer
Adding a WordPress favicon through the WordPress Customizer is the official, no-code method that works with every theme. WordPress calls this the “Site Icon” and has supported it natively since version 4.3.
Navigate to Appearance → Customize → Site Identity → Site Icon → click “Select site icon” → upload an image or choose from the media library → WordPress displays a crop interface → crop to a square → select → Publish. WordPress generates multiple icon sizes from the uploaded source image and serves the correct size to each context automatically. The uploaded image should be at least 512×512 pixels — WordPress uses this to generate smaller sizes (192×192 for Android home screen icons, 180×180 for Apple Touch icons, 32×32 for browser tabs, 16×16 for older browser tab contexts). A larger source image produces sharper icons at all sizes because WordPress can scale down from a high-resolution source without loss of quality.
For the best results with a WordPress favicon, upload a PNG with a transparent background rather than a JPEG. PNGs support transparency, allowing the icon to display correctly on any background colour — a browser tab that is dark, a bookmark list with a light background, or a search result with a white background. Square images work without any cropping step. For brand logos that are not naturally square, add transparent padding to make the canvas square before uploading — a logo centred in a transparent square canvas produces a correctly proportioned icon at all sizes. Avoid uploading a rectangular logo without adjustment — the crop tool forces a square selection and may cut off part of the logo. According to Google’s Search Central documentation, the site icon displayed next to search results must be at least 48×48 pixels, be accessible to Google’s crawler, and be set as the site’s favicon — requirements the WordPress native Site Icon implementation satisfies automatically.
Adding a WordPress Favicon Using Code
For developers who need precise control over which icon files are served, at which sizes, and with which link tag attributes, adding the WordPress favicon via code in the child theme’s functions.php provides the flexibility that the Customizer’s Site Icon does not. This approach is also useful when the site uses a PWA manifest that requires specific icon declarations.
The standard favicon implementation via code uses the wp_head action to output the necessary link tags:
add_action('wp_head', function() {
echo '<link rel="icon" type="image/png" sizes="32x32" href="' . get_stylesheet_directory_uri() . '/images/favicon-32x32.png">';
echo '<link rel="icon" type="image/png" sizes="16x16" href="' . get_stylesheet_directory_uri() . '/images/favicon-16x16.png">';
echo '<link rel="apple-touch-icon" sizes="180x180" href="' . get_stylesheet_directory_uri() . '/images/apple-touch-icon.png">';
echo '<link rel="manifest" href="' . get_stylesheet_directory_uri() . '/site.webmanifest">';
});Place the favicon files in the child theme’s /images/ folder and ensure the paths match. The get_stylesheet_directory_uri() function returns the child theme’s URL, keeping the file paths correct regardless of the site URL. Use favicon generation tools to create all required sizes from a single source file — tools like RealFaviconGenerator.net generate the complete set of PNG files, the apple-touch-icon, the webmanifest, and the HTML code to paste into WordPress. This code-based approach to the WordPress favicon gives developers control over the exact markup, enabling advanced features like themed browser UI colours (via the theme-color meta tag) and PWA app icons that the Customizer’s Site Icon cannot configure.
WordPress Favicon Not Showing — Fixing Display Issues
A WordPress favicon that is correctly set in the Customizer or via code but not appearing in the browser tab or other contexts is almost always a browser cache or CDN cache issue rather than a WordPress configuration problem.
Force a browser favicon refresh: navigate to the favicon URL directly (yoursite.com/favicon.ico or the path to your favicon PNG) → press Ctrl+Shift+R to hard-reload → then return to the site and hard-reload. The browser should now display the updated favicon. Different browsers cache favicons for different durations — Chrome caches favicons aggressively (sometimes for days), Firefox refreshes more frequently, and Safari has its own cache. The most reliable way to clear the favicon cache in Chrome is to navigate to chrome://history → search for the site domain → delete all cached entries → restart Chrome → visit the site.
A CDN caching the favicon at an old path prevents the new icon from being served. After changing the WordPress favicon, purge the CDN cache for the favicon file path specifically. In Cloudflare: purge the specific URL yoursite.com/favicon.ico and any PNG favicon URLs from the Cache → Purge Cache → Custom Purge interface. If the CDN is configured to cache all images, the old favicon may persist in edge caches for the configured cache duration — setting a short cache TTL for favicon files (or excluding them from CDN caching entirely) prevents this problem. Check the favicon URL in the browser Network tab to confirm whether it is being served from the CDN (a CDN hostname like cdn.yoursite.com) or from the origin server — this identifies whether the stale version is from CDN cache or origin cache. Our guide on the complete WordPress caching guide covers CDN cache purging procedures that apply when the favicon is among the assets being incorrectly cached.
Favicon Requirements for Modern Browsers and Mobile Devices
Modern browsers and mobile operating systems have different WordPress favicon requirements that the basic browser tab icon does not satisfy. Providing the complete set of icon types ensures the site is represented correctly in every context where its icon might appear.
The complete WordPress favicon icon set and their contexts:
- favicon.ico (16×16, 32×32, 48×48 multi-size) — Classic browser tabs, legacy browser bookmarks, Windows Explorer. Still required for broad compatibility despite PNG being preferred by modern browsers.
- apple-touch-icon.png (180×180) — iOS Safari “Add to Home Screen.” Without this, iOS generates a screenshot-based icon that looks poor at small sizes. Apple’s touch icon ignores transparency — use a solid background colour version for this file.
- icon-192.png and icon-512.png — Android Chrome “Add to Home Screen” and Progressive Web App icons. Declared in the webmanifest file rather than HTML link tags.
- favicon-32×32.png — Modern browsers prefer PNG at this size over the legacy ICO format. Serves the browser tab icon on Chrome, Firefox, and Edge with higher sharpness than ICO at the same size.
The webmanifest file declares the PWA icon set for WordPress favicon and app metadata and app metadata. A minimal webmanifest for WordPress favicon and home screen icon purposes: {"name":"Site Name","icons":[{"src":"/icon-192.png","sizes":"192x192","type":"image/png"},{"src":"/icon-512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"browser"}. WordPress does not generate a webmanifest automatically — add the link tag manually or through a PWA plugin. The display: browser value keeps the standard browser chrome when the site is accessed from a home screen shortcut; change to standalone if the site should open as a full-screen PWA without browser controls. Reviews from major web development publications confirm that using the WordPress Customizer Site Icon with a 512×512 PNG source covers the majority of favicon use cases without requiring manual code or additional files.
Troubleshooting WordPress Favicon in Search Results and Social Media
The WordPress favicon appearing in Google search results next to the site name is a distinct system from the browser tab favicon. Google uses the site’s favicon for this “Search appearance” feature, but it must meet specific criteria and may take weeks to update after a change.
Google’s requirements for showing a WordPress favicon in search: the icon must be reachable at a stable URL (not blocked by robots.txt or authentication), must be square, must be at least 48×48 pixels, and the page linking to the icon must be accessible to Googlebot. After setting the favicon in the Customizer or via code, submit the site to Google Search Console → URL Inspection → enter the homepage URL → Request Indexing. This signals Google to recrawl the homepage and pick up the updated favicon declaration. Google typically updates search result favicons within 1–3 days of recrawling, but the change may not appear for several weeks on pages where Google does not recrawl frequently.
Social media platforms — Facebook, LinkedIn, Twitter/X — use the Open Graph image tag (og:image) rather than the favicon for link previews. The WordPress favicon does not appear when sharing the site on social media — the OG image (set via an SEO plugin’s Social settings) controls social preview appearance. Rank Math: Rank Math → Titles & Meta → Global Meta → set the OpenGraph Image. Yoast: Yoast → Social → Facebook → set the Default Image. After updating the OG image, use Facebook’s Sharing Debugger tool and LinkedIn’s Post Inspector to force these platforms to refresh the cached preview for the site’s URLs — both tools are accessible without login and update the cached preview within seconds. Our guide on fixing WordPress email delivery covers the site identity settings that interact with the favicon and branding configuration in the WordPress Customizer’s Site Identity section where both the logo and the Site Icon are managed.
For multisite WordPress installations, the WordPress favicon can be set globally at the network level or per-subsite. Each subsite has its own Customizer where a unique Site Icon can be uploaded — allowing different favicons per brand on a network that hosts multiple distinct brands. The network admin has no global favicon setting; each subsite’s favicon is configured independently through its own Customizer. If all subsites should share the same favicon, configure it on each subsite’s Customizer individually, or use a network-level plugin that pushes shared settings (including the Site Icon) to all subsites simultaneously. Network administrators who want a uniform favicon across all subsites without per-subsite configuration can use a WordPress multisite management plugin or set the favicon via a mu-plugin (must-use plugin) that runs on every subsite and outputs the favicon link tags through the wp_head hook on all subsites simultaneously.
Dark mode support for a WordPress favicon is an emerging consideration as operating systems and browsers implement automatic dark mode switching. A favicon that looks correct on a white browser tab may be nearly invisible on a dark mode browser tab — a dark logo on a transparent background becomes a dark logo on a dark background. The HTML media query prefers-color-scheme can be used in a <picture> element to serve different favicons for light and dark mode: <link rel="icon" href="favicon-dark.png" media="(prefers-color-scheme: dark)"> alongside the standard link tag. This dual-declaration approach serves the light favicon to light-mode browsers and the dark favicon (with a light-coloured version of the logo) to dark-mode browsers, ensuring the brand mark is always visible regardless of the user’s display preference. Browser support for this pattern is strong in Chrome, Firefox, and Safari — making it a worthwhile addition to sites where brand presentation in browser tabs is a priority.
Verifying that the WordPress favicon is served with the correct HTTP headers ensures browsers cache and update it correctly. Use browser DevTools → Network tab → reload the page → find the favicon request → check the Response Headers for Cache-Control and Expires values. Favicons should be cached for a long duration (at least 1 week, ideally 1 year) since they change rarely and aggressive caching reduces HTTP requests on repeat visits. If the favicon response shows no Cache-Control header, add one via .htaccess: <Files favicon.ico> Header set Cache-Control "max-age=31536000, public" </Files>. The long cache duration means that when the favicon is intentionally changed, the URL should include a version query string or the filename should change — forcing browsers to fetch the new file rather than serving the locally-cached old version.
Animated WordPress favicon support exists in modern browsers through animated ICO files (containing multiple frames) or animated GIF/WebP files used as favicon sources. Chrome and Firefox support animated favicons in ICO format; Safari does not. For sites where a subtle animation in the browser tab adds personality — a loading spinner, a pulsing brand element — animated ICO files can be generated from frame sequences using favicon generation tools. Most WordPress sites should avoid animated favicons for performance reasons (each animation frame increases the ICO file size) and for accessibility concerns (animations in the browser chrome can be distracting for users with vestibular disorders who have configured their OS to reduce motion). A static, crisp, well-designed WordPress favicon at the correct sizes consistently outperforms animated alternatives in usability and brand recognition. Our guide on WordPress Contact Form covers an adjacent issue.
