Favicon, App Icon & PWA Manifest Generator
Generate binary multi-resolution favicon.ico (16x16, 32x32, 48x48), iOS Apple Touch icons, Android 80% safe-zone maskable PNGs, and site.webmanifest.
Online ToolsPWA Maskable Safe-Zone & Badge Geometry
20%+ keeps your logo inside the 80% Android Maskable Safe Zone Circle
Live Multi-Platform Preview Deck
Real-time simulation across Google Search SERP, Browser Tabs, Apple iOS & Android Adaptive Masks
Preview how Google Search renders your 48x48px circular favicon next to your domain breadcrumb in mobile and desktop results.
Preview how Google Search renders your 48x48px circular favicon next to your domain breadcrumb in mobile and desktop results.
Transparency is automatically backed with your solid fill so iOS never turns alpha channels pitch black.
Web App Manifest (site.webmanifest) Metadata
<!-- Standard Favicon & Google Search (48x48 multiple) -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<!-- Apple iOS Home Screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android & PWA Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#4f46e5" />Official Favicon, Apple Touch Icon & PWA Manifest Size Reference Table
Complete engineering specification for Google Search Central, Apple iOS Human Interface Guidelines, and W3C Web App Manifest
| Asset Filename | Resolution (px) | Encoding Standard | Target Platform & Context | Technical Compliance Rule |
|---|---|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Binary Microsoft ICONDIR | Legacy Browsers & Google Search Crawler | Must embed a real 48×48px directory entry; never rename a raw PNG file to .ico. |
| favicon-16x16.png | 16×16 px | 32-bit RGBA PNG | Standard 1x Desktop Browser Tabs & Bookmarks | High-contrast silhouette required for legibility at 16 pixels. |
| favicon-32x32.png | 32×32 px | 32-bit RGBA PNG | Retina 2x Desktop Browser Tabs (Chrome, Safari, Edge) | Primary desktop tab icon on modern HiDPI displays. |
| favicon-48x48.png | 48×48 px | 32-bit RGBA PNG | Google Search Mobile & Desktop SERP Snippet | Google Search Central minimum threshold (must be a multiple of 48px: 48×48, 96×96, 144×144). |
| favicon-96x96.png | 96×96 px | 32-bit RGBA PNG | Google Search High-DPI SERP & Desktop Shortcuts | Recommended 2x multiple of 48px for crisp circular clipping in Google Search results. |
| apple-touch-icon.png | 180×180 px | 24-bit Opaque PNG | Apple iPhone & iPad Home Screen Web Clips | Must use an opaque background; iOS renders transparent pixels as solid black (#000000) and applies its own squircle mask. |
| android-chrome-192x192.png | 192×192 px | 32-bit PNG (purpose: any) | Android Home Screen Launcher & App Drawer | Required by Google Lighthouse PWA installability criteria. |
| android-chrome-512x512.png | 512×512 px | 32-bit PNG (purpose: any) | Android PWA Splash Screen & Google Play WebAPK | Mandatory high-resolution master asset for progressive web app installation. |
| maskable-icon-512x512.png | 512×512 px | Opaque PNG (purpose: maskable) | Android Adaptive Launcher Shapes (Circle, Squircle, Teardrop) | All key visual elements must sit inside the central 80% Safe Zone circle (minimum 10%–20% inner padding). |
Must embed a real 48×48px directory entry; never rename a raw PNG file to .ico.
High-contrast silhouette required for legibility at 16 pixels.
Primary desktop tab icon on modern HiDPI displays.
Google Search Central minimum threshold (must be a multiple of 48px: 48×48, 96×96, 144×144).
Recommended 2x multiple of 48px for crisp circular clipping in Google Search results.
Must use an opaque background; iOS renders transparent pixels as solid black (#000000) and applies its own squircle mask.
Required by Google Lighthouse PWA installability criteria.
Mandatory high-resolution master asset for progressive web app installation.
All key visual elements must sit inside the central 80% Safe Zone circle (minimum 10%–20% inner padding).
How to Generate & Install Compliant Favicons and PWA Icons
Five-step workflow for Web Vitals, Google Search SERP, and mobile home screen readiness
Choose Your Source in the 3-in-1 Studio
Upload an existing SVG/PNG brand mark, type a 1–3 letter monogram with custom typography, or pick a vector emoji symbol at the top of the workspace.
Audit Dark Mode Contrast & Safe-Zone Padding
Check the automatic Dark Mode Invisibility Detector. Adjust the inner padding slider (20%+ for Android Maskable compliance) so your logo fits cleanly inside the 80% safe zone circle.
Verify Across Live Multi-Platform Mockups
Inspect how your icon appears in Google Mobile/Desktop Search results, Light and Dark browser tabs, iOS 180×180 squircle clips, and Android adaptive launcher shapes.
Configure Web Manifest Metadata & Download ZIP
Set your Application Name, Short Name, and Theme Color, then click Download Complete Icon Package (.ZIP) to receive all 9 binary icons plus site.webmanifest.
Drop Files into Public Root & Paste Head Code
Extract the ZIP files into your public/ root directory and copy either the Standard HTML5 <head> tags or the native Next.js App Router Metadata object into layout.tsx.
100% Client-Side Binary Packing & Zero Server Uploads
Every canvas downscale, binary ICONDIR byte header, pixel luminance scan, and JSZip archive is computed strictly inside your local browser RAM. Your proprietary brand logos and unreleased app icons never leave your device.
Frequently Asked Questions (Favicon, iOS & PWA Standards)
Authoritative engineering answers for Google Search indexing, Apple Web Clips, and W3C Web App Manifests
Q:Why does Google Search still show the default globe icon weeks after I uploaded a new favicon?
Google uses a dedicated crawler (Googlebot-Image) for favicons that visits sites much less frequently than the main web page crawler. In addition, Google Search Central strictly requires the icon to be a multiple of 48px square (48×48, 96×96, or 144×144 px) or a genuine binary favicon.ico containing a 48×48 frame. After placing the generated files in your root directory, request re-indexing of your homepage in Google Search Console.
Q:How do I prevent Next.js App Router from serving an outdated cached favicon.ico?
In Next.js App Router, placing files in the public/ directory alongside the exported Metadata API object in app/layout.tsx gives you explicit control over all icon sizes and site.webmanifest. If browsers still cache an older icon during deployment, append a version query parameter (such as /favicon.ico?v=2) in the Icons Directory Path field before copying the code snippet.
Q:What happens at the byte level if I simply rename a PNG file to favicon.ico?
A raw PNG file starts with the 8-byte signature 89 50 4E 47, whereas a specification-compliant Microsoft .ico container must begin with the 6-byte ICONDIR header (00 00 01 00) followed by 16-byte ICONDIRENTRY directory records. While some desktop browsers forgive a misnamed PNG, strict search crawlers, RSS readers, and enterprise firewalls reject it as a corrupted header.
Q:Why does my transparent logo turn into a black square when pinned to an iPhone Home Screen?
Apple iOS and iPadOS do not composite alpha transparency on 180×180 px apple-touch-icon.png Web Clips. Any pixel with alpha transparency is flattened directly onto a pure black (#000000) canvas before the operating system applies its squircle corner mask. Our studio automatically backs the iOS asset with your solid or gradient brand color so it always looks clean.
Q:Why does Google Lighthouse warn against combining "any" and "maskable" on a single PWA icon?
When you declare "purpose": "any maskable" on a single PNG, desktop operating systems render the heavily padded maskable canvas as-is, making your app icon look tiny in Windows taskbars or macOS docks. Generating separate android-chrome-512x512.png ("purpose": "any") and maskable-icon-512x512.png ("purpose": "maskable") files ensures full-size desktop icons and crop-free Android icons.
What is Favicon, App Icon & PWA Manifest Generator?
Few details undermine a newly launched web application faster than a blurry 16×16 square in the browser tab or a generic gray globe next to your domain in Google Search results. Modern web browsers, high-density Retina displays, Apple iOS home screens, and Android Progressive Web App (PWA) launchers no longer rely on a single icon file. Instead, each platform inspects a different piece of your icon architecture—ranging from multi-layer binary favicon.ico containers to opaque 180×180 touch icons and 512×512 maskable canvases. If you simply rename a PNG file to .ico or upload a dark transparent logo without checking contrast, search crawlers reject the file and dark-mode tabs swallow your brand mark completely. The Favicon, App Icon & PWA Manifest Generator handles this entire production pipeline 100% in your browser memory using native HTML5 <canvas>, ArrayBuffer, and DataView binary encoding.
Practical Performance Case: Resolving Google SERP Missing Icons & Dark Tab Contrast for a FinTech SaaS
During a pre-launch audit of a Next.js App Router financial analytics dashboard, the engineering team noticed three visual regressions: Google Mobile Search displayed a default globe placeholder instead of their logo, macOS users with dark browser themes saw an empty tab space because the dark slate glyph had a relative luminance of just 8.6% on a transparent background, and Google Lighthouse flagged their site.webmanifest for lacking a dedicated maskable asset. By loading their master SVG into the studio above, applying a Brand Indigo (#4F46E5) 22% squircle badge with 20% inner safe-zone padding, the team generated a 10-file production archive weighing only 18.4 KB total—instantly satisfying Google's 48px rule, iOS opaque clipping, and Android adaptive launcher masks.
Multi-Platform Byte Budget & Rendering Audit (18.4 KB SaaS Benchmark)
| Production Asset | Resolution & Weight | Binary & Alpha Structure | Real-World Defect Prevented |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px (4.2 KB) | 54-byte ICONDIR header + 3 RGBA frames | Eliminates Googlebot-Image rejection & legacy 404 requests |
| favicon-48x48.png & 96x96.png | 48² & 96² px (3.1 KB) | 32-bit RGBA PNG (1x & 2x SERP multiples) | Prevents blurry upscaling in Google Mobile circular SERP badges |
| apple-touch-icon.png | 180×180 px (4.6 KB) | 24-bit opaque square (0px pre-radius) | Stops iOS CoreGraphics from turning transparent pixels pitch black |
| maskable-icon-512x512.png | 512×512 px (6.5 KB) | Opaque canvas + 80% safe circle (409.6px) | Prevents Android OEM squircle/teardrop masks from clipping text |
Why Client-Side Binary Synthesis Beats Server-Based Icon Converters
- True Byte-Level Microsoft
ICONDIRMultiplexing: Instead of faking an.icoextension on a single image, our packer allocates anArrayBuffer, writes the 6-byte magic header (00 00 01 00 03 00), and indexes independent 16×16, 32×32, and 48×48 buffers. - ITU-R BT.709 Perceptual Contrast Protection: Transparent uploads are automatically scanned in browser RAM so neither ultra-dark (
L < 25%) nor pure-white (L > 90%) logos vanish against user browser themes. - Framework-Ready Metadata Export: Copy production-ready Next.js App Router
layout.tsxTypeScript definitions or clean HTML5<head>tags with a single click.
History and Origin
When Microsoft shipped Internet Explorer 5 in March 1999, a developer quietly added a feature that looked for a file named favicon.ico in the root directory of any bookmarked website. At the time, the feature had an unintended side effect: server administrators could count how many people had bookmarked their site simply by grepping Apache access logs for favicon.ico requests! By 2000, the W3C standardized the <link rel="icon"> element in HTML 4.01 so browsers could display icons on every open tab rather than just inside the Favorites menu. The second major turning point arrived in June 2007 with the original Apple iPhone, which introduced apple-touch-icon.png so mobile Safari users could pin websites directly to their home screen alongside native apps. A decade later, the W3C formalized the Web App Manifest (site.webmanifest) and the 80% Maskable Icon safe zone, transforming a humble 16-pixel bookmark graphic into a multi-platform identity standard.