The favicon (Site Icon) is the small icon shown in browser tabs, bookmarks, and history. The default empty state - a grey blob or generic placeholder - makes the site look unfinished and hard to find among dozens of bookmarks.
Why this matters
The favicon is one of the first elements users notice. The moment the page loads, the tab displays the favicon - seconds before content paints. Without one, the site looks temporary or untrustworthy. Nielsen Norman Group UX research found that 75% of users rely on the favicon to identify the right tab when 10+ tabs are open.
The favicon also affects mobile search results. Since 2019, Google displays the favicon next to your search result on mobile - it becomes part of your brand's visual identity. A site with a distinctive favicon earns more clicks than one without.
For PWAs (Progressive Web Apps), the favicon also serves as the app icon when users add the site to their phone home screen. Without a proper favicon, the icon will be a generic screenshot - poor brand experience.
In Slack, Discord, and most chat platforms, pasting a URL produces a preview that includes the favicon. The favicon becomes part of how the link looks everywhere.
How to detect
Open the site in a browser and look at the tab. If you see the browser's default icon (grey ball or generic glyph), no favicon. If you see a custom icon, you have one.
Complementary check: view source and search for rel="icon" or rel="shortcut icon". You should see tags like:
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Third check: visit https://YOUR-SITE/favicon.ico directly. It should show the icon. A 404 means no file.
How to fix
The simplest path in WordPress is via Customize.
- Prepare a square 512x512px image with your logo or brand mark. Use PNG with a transparent or brand-color background.
- Go to Appearance > Customize > Site Identity (or Customize > Site Identity in newer flows).
- Under "Site Icon" click Select Site Icon, upload the square image, and crop if needed.
- Save and publish.
WordPress automatically generates the required sizes (32x32, 192x192, 512x512, apple-touch-icon) and emits the right tags in <head>.
For block / FSE themes (WordPress 6.0+), header customization happens via Appearance > Editor > Templates > Header, but Site Icon stays in Customize.
For deeper control, upload a favicon.ico file manually to the site root via FTP. Recommended size: 32x32 or 16x16. Use a tool like https://realfavicongenerator.net/ - it produces every required size variant (Android, iOS, Windows, macOS) easily.
Common mistakes
First mistake: using a non-square image. WordPress requires 512x512 square - if you upload a rectangular image, it crops away parts. Prepare a square version up front.
Second mistake: a logo with too much detail. At 16x16, fine details disappear. A simple design (single letter, minimalist mark) works much better than a detailed logo.
Third mistake: transparent background against a dark theme. A black logo on transparent over Chrome's dark-mode tab is invisible. Use a colored background.
Fourth mistake: forgetting iOS. When users add the site to their iPhone home screen, an icon derived only from favicon.ico looks blurry. Include <link rel="apple-touch-icon"> with a 180x180 image.
Fifth mistake: changing the favicon without cache busting. Browsers cache the old version for days. Append ?v=2 to the icon URL in your <link rel="icon"> to force a refresh.
Verifying the fix
Open the site in a fresh incognito tab (to bypass cache) - the new favicon should appear. Check Chrome, Safari, and Firefox. Bookmark the site and verify the icon shows. On mobile, add to home screen and confirm the icon is sharp. Run https://realfavicongenerator.net/favicon_checker to validate every required variant exists.