PWA Education
February 23, 2026
4 min read
0 views
Apple Touch Icon vs PWA Icon: What's the Difference?
Understand the difference between Apple Touch Icons and PWA icons. Clear explanation for web developers.
By Imagcon Team
Quick Answer:
## Quick Answer Apple touch icons are used by iOS Safari when users save a site to the home screen. PWA icons are declared in the web app manifest and used by browsers and operating systems that support installable web apps.
## Quick Answer Apple touch icons are used by iOS Safari when users save a site to the home screen. PWA icons are declared in the web app manifest and used by browsers and operating systems that support installable web apps. ## Introduction When you are building a modern web app and want it to look incredible when users install it or save it to their home screens, you will inevitably run into a confusing array of icon requirements. Among the most commonly misunderstood elements are the "Apple Touch Icon" and standard "PWA Icons." While they ultimately serve a similar purpose—giving your app a recognizable, polished face on a user's device—they are implemented completely differently and target entirely different ecosystems. Let us break down the crucial differences. ## What is a PWA Icon? PWA (Progressive Web App) icons are defined inside your project's `manifest.json` file. These icons represent the modern, widely-adopted standard for installable web applications across most platforms. When a user installs your PWA on an Android device, a Windows desktop, or a Chrome OS machine, the browser reads the `manifest.json`, looks at the `icons` array, and automatically selects the most appropriately sized image for the user's specific screen and pixel density. **Key Characteristics of PWA Icons:** * **Location:** Declared purely inside the `manifest.json` file. * **Format:** Typically PNG, though advanced formats like SVG and WebP are sometimes supported. * **Sizes:** Common sizes include 192x192 and 512x512 pixels. * **Features:** Supports advanced ecosystem features like "Maskable Icons" (which allow Android to seamlessly shape the icon to match the user's system theme). ## What is an Apple Touch Icon? Historically, Apple's iOS ecosystem (specifically Safari) did not fully support the modern PWA manifest standard. Instead, Apple relies heavily on a proprietary HTML meta tag to define the icon used when a user explicitly taps "Add to Home Screen" on their iPhone or iPad. This specific asset is the Apple Touch Icon. Even today, despite Apple steadily improving its broader PWA support in recent updates, explicitly declaring an Apple Touch Icon remains the most reliable, foolproof way to ensure your app looks correct on iOS devices. **Key Characteristics of Apple Touch Icons:** * **Location:** Declared directly inside the `<head>` of your HTML document using the tag `<link rel="apple-touch-icon" href="...">`. * **Format:** Strict requirement for PNG. * **Sizes:** Typically exactly 180x180 pixels. * **Features:** iOS automatically rounds the corners of this icon. Therefore, the image file you provide must be a perfect, solid square. If you mistakenly provide an icon with a transparent background, iOS will aggressively fill the transparent areas with pure black, which usually results in a terrible visual experience. ## Why You Need Both If you only provide standard PWA icons in your `manifest.json`, your application might end up with an ugly, blurry screenshot of your website as its icon when saved on an iPhone. Conversely, if you only provide an Apple Touch Icon, Android and desktop users will completely miss out on the rich install experience of a true PWA. To ensure comprehensive, professional coverage, a complete web app asset package absolutely must include both specifications. ## Implementation Example In your `index.html`, you must include the Apple Touch Icon in the head: ```html <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"> <link rel="manifest" href="/manifest.json"> ``` And inside your `manifest.json`, you define the standard PWA icons: ```json "icons": [ { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] ``` ## Conclusion While the web is slowly standardizing, fully supporting all users across all platforms requires catering to both Apple's legacy tags and modern manifest standards. Generating both Apple Touch Icons and PWA icons ensures a flawless, native-feeling experience for every single user, regardless of what device they hold in their hands.