Complete Guide to Modern Favicons & PWA Icons
A website icon is no longer just a tiny 16×16 graphic in a browser tab. Modern digital platforms—including desktop browsers, iOS Safari, Android Chrome, Progressive Web Apps (PWAs), and search engine result pages (SERPs)—require tailored icon resolutions, formats, and metadata to present your brand crisply.
1. Icon Formats and Platform Standards
- favicon.ico (Multi-Resolution): A classic binary container holding 16×16, 32×32, and 48×48 layers. Essential for backward compatibility, legacy web browsers, and desktop bookmarks.
- favicon-16x16.png & favicon-32x32.png: Standard crisp PNG icons used by modern desktop browsers (Chrome, Edge, Firefox, Safari) on high-DPI (Retina) displays.
- apple-touch-icon.png (180×180): Required by Apple iOS and iPadOS when a user adds a bookmark or web app to their iPhone/iPad home screen. iOS automatically applies standard squircle rounding.
- icon-192x192.png & icon-512x512.png: Core assets for Progressive Web Apps (PWAs) and Android device home screens, referenced in
manifest.json.
2. Google Search Favicon Guidelines
According to Google Search Central guidelines, search engines crawl and display your site's favicon next to search snippets when the following criteria are met:
- Aspect Ratio: The image must be a square 1:1 ratio.
- Resolution: The icon must be at least 8×8 pixels. Google currently recommends using a favicon larger than 48×48 pixels for visual quality. Our pack includes a 48×48 PNG and 48px ICO layer meeting Google's minimum requirements.
- Crawlability: The icon URL declared in your homepage's
<link rel="icon" ...>must be permanent and crawlable by Googlebot-Image. - One Favicon per Hostname: Google Search associates one favicon per domain or subdomain. Subfolders cannot define separate Google Search favicons.
- Note: Google does not guarantee showing a favicon for every search result, as eligibility and presentation are algorithmically determined.
3. Web App Manifest (manifest.json) Explained
A Web App Manifest is a JSON document that provides the browser with information about your web application (such as its name, preferred launch URL, display mode, and icon resolutions). It enables mobile browsers to offer an "Add to Home Screen" or app installation prompt.