Favicon and PWA manifest setup for WordPress
TL;DR: A complete favicon setup requires more than a single small icon image, different platforms and contexts, a browser tab, an iOS home screen bookmark, an Android home screen shortcut, expect different specific sizes and, in some cases, different formats, and a missing platform-specific variant results in a generic, unbranded placeholder icon appearing in that specific context even though your site technically "has a favicon." A web app manifest file (manifest.json) extends this further, providing the metadata needed for a site to be properly recognized as installable and correctly branded when added to a home screen, relevant background for the fuller Progressive Web App discussion in our dedicated PWA guide.
Why a single favicon.ico isn't actually sufficient anymore
The original favicon standard was a single, small .ico file displayed in a browser's address bar or tab, a simple, single-purpose need that has expanded considerably as the contexts a site icon might appear in have multiplied: a browser tab, a bookmarks list, an iOS "Add to Home Screen" bookmark icon, an Android home screen shortcut icon, and various browser-specific pinned tab or tile representations, each with its own specific expected size and, in some cases, format requirements. A site providing only the original, minimal single-icon setup will display correctly in a basic browser tab but fall back to a generic, unbranded placeholder icon in several of these other, increasingly common contexts, a small but genuinely noticeable polish gap, particularly for a business where customers might reasonably bookmark the site to their phone's home screen.
The specific sizes and formats different platforms expect
Browser tab and bookmark icons typically expect a small favicon, commonly 16x16 and 32x32 pixel variants, historically in .ico format though modern browsers also support PNG. Apple's iOS "Add to Home Screen" functionality specifically looks for an apple-touch-icon (commonly 180x180 pixels) referenced via a specific link tag in your page's head, and without this specific icon provided, iOS falls back to taking an automatic screenshot of your page instead, producing a distinctly unpolished, unbranded result. Android and Chrome's home screen and PWA-related icons are typically defined through the web app manifest file (covered next) rather than a simple link tag, specifying multiple size variants (commonly including 192x192 and 512x512 pixel versions) to support different display densities and contexts correctly.
What a web app manifest actually adds
A manifest.json file provides structured metadata about your site specifically for the purpose of being added to a home screen or treated as an installable web application, including your site's name (both a full name and a shorter version for space-constrained contexts), a set of icon references at various sizes, a defined theme color and background color used during a brief loading screen when launched from a home screen icon, and a specified display mode (whether the site should open in a standalone, app-like window without browser chrome, or in a standard browser tab). Providing a properly configured manifest is what allows Android and Chrome specifically to correctly recognize your site as "installable," offering visitors a proper "Add to Home Screen" or "Install" prompt with correct branding, rather than treating it as a plain bookmark with no distinct app-like presentation.
Setting this up in WordPress
Most current WordPress themes include reasonable default handling for basic favicon display through the WordPress Customizer's "Site Icon" setting, which handles generating several of the more common size variants automatically from a single uploaded source image, though it is worth directly verifying this default handling actually covers the full range of platform-specific icons discussed above, particularly the iOS-specific apple-touch-icon and a genuine web app manifest file, rather than assuming the basic Customizer upload alone provides complete coverage. A dedicated favicon-generation tool or plugin, taking a single, ideally high-resolution source image and generating the complete, correctly-sized set of platform-specific icon variants along with the necessary manifest file and head tag references, provides more complete, reliable coverage than relying purely on WordPress core's more basic default handling.
A checklist of required assets
| Asset | Purpose |
|---|---|
| favicon.ico or 16x16/32x32 PNG | Browser tab and bookmark display |
| apple-touch-icon (180x180) | iOS "Add to Home Screen" |
| Android/PWA icons (192x192, 512x512) | Android home screen and installable web app contexts |
| manifest.json | Site name, theme color, display mode, ties icon set together |
| Corresponding link/meta tags in page head | References all of the above so browsers actually find them |
Common mistakes
Using a source image with too low a resolution. A source logo image too small to properly generate the larger required sizes (particularly the 512x512 PWA icon) without visible pixelation or blurriness produces a genuinely unpolished result at exactly the sizes where an icon is often most prominently displayed. Forgetting the iOS-specific apple-touch-icon entirely, resulting in the generic screenshot fallback described earlier whenever an iOS visitor attempts to add the site to their home screen, a common, easily-overlooked gap since it requires a specific, separate icon reference rather than being automatically covered by a general favicon setup. An incomplete or malformed manifest.json that technically exists but is missing required fields or contains errors, resulting in the site not being recognized as properly installable even though a manifest file is technically present, worth validating directly rather than assuming a manifest file's mere existence guarantees correct functionality.
How to verify your setup is actually complete
Browser developer tools include a dedicated panel (commonly under an "Application" or "Manifest" tab) specifically for inspecting a site's manifest and icon configuration, directly showing whether the manifest is valid and correctly parsed, and whether all referenced icons are actually loading successfully rather than producing errors. Testing the actual "Add to Home Screen" behavior directly on both an iOS and an Android device is the most direct, definitive way to confirm the full, real-world experience matches what you intend, rather than relying purely on developer tools inspection alone.
FAQs
Does every WordPress site need a full PWA-style manifest, or is a basic favicon sufficient?
For a typical business site with no specific ambition toward being installed as an app-like experience, a complete favicon set (including the iOS apple-touch-icon) without a full manifest is often sufficient; a manifest becomes more valuable specifically if you want visitors to be able to properly "install" your site with correct branding, covered in more depth in our dedicated PWA guide.
What image format should my source favicon file be?
A high-resolution PNG with a transparent background (if appropriate for your logo) is a common, flexible source format, ideally at least 512x512 pixels or larger to comfortably support generating all the smaller required variants without quality loss.
Does an incomplete favicon setup affect SEO?
Not directly as a significant ranking factor, though a properly configured favicon can appear in search results in certain contexts and contributes to overall site polish and brand recognition, a secondary but genuine benefit beyond the direct home-screen and browser-tab use cases.
Can I use the same icon for both my favicon and my PWA/Android icons?
Yes, typically the same source logo, appropriately resized for each specific context, works across all these uses; the requirement is having the correctly sized variants available and properly referenced, not necessarily different underlying artwork for each one.
Does changing my favicon require clearing any cache to see the update?
Yes, favicons are commonly aggressively cached by browsers, covered in the broader context of our dedicated browser caching guide, meaning a changed favicon may not visibly update for a returning visitor's browser until its cached version genuinely expires or is manually cleared, worth being aware of if you update your favicon and do not see the change reflected immediately.
Is there a plugin that handles this entire setup automatically?
Yes, several dedicated favicon and PWA-manifest generation plugins exist specifically to automate producing the complete required asset set and correctly configuring the necessary references from a single source image, generally a more reliable, complete approach than manually creating and referencing each individual asset yourself.
Does theme color in the manifest actually matter visually?
Yes, it affects the color shown in the browser's address bar area on supporting mobile browsers, and the background color shown briefly during the loading splash screen when a visitor launches your site from a home screen icon, a small but genuine branding detail worth setting deliberately to match your actual brand colors rather than leaving at a generic default.
Conclusion
A complete favicon and manifest setup requires more than a single icon file, covering specific size and format variants for browser tabs, iOS home screen bookmarks, and Android/PWA installable contexts, each of which falls back to a generic, unbranded appearance if its specific required asset is missing. A dedicated favicon-generation tool, working from a single high-resolution source image, provides more reliable, complete coverage than relying on WordPress core's more basic default handling alone.
Verifying the actual result directly, through browser developer tools' manifest inspection and genuine testing of the "Add to Home Screen" experience on both iOS and Android, confirms the setup genuinely works as intended rather than assuming it is complete based on having uploaded a single icon somewhere in your WordPress settings.
HostCloud's free favicon and manifest generator produces the complete set of required assets and reference tags from a single source image, removing the guesswork from this often-overlooked setup step. Try it at https://hostcloud.in/tools.