Imagcon — PWA Icon & Splash Guide ================================ Purpose ------- This guide explains each generated icon and how to implement splash screens. It also clarifies the critical difference between 'any' and 'maskable' icons and how iOS vs Android treat launch screens. Naming Scheme (self‑documenting) -------------------------------- - icon-016x016-favicon.png - icon-032x032-favicon.png - icon-048x048-android-legacy.png - icon-072x072-android-legacy.png - icon-096x096-android-legacy.png - icon-120x120-ios.png - icon-144x144-android.png - icon-152x152-ios-ipad.png - icon-167x167-ios-ipad-pro.png - icon-180x180-ios.png - icon-192x192-any.png - icon-192x192-maskable.png - icon-256x256-windows.png - icon-384x384-android.png - icon-512x512-any.png - icon-512x512-maskable.png - icon-1024x1024-appstore.png - mstile-150x150-windows.png - safari-pinned-tab.svg Required vs Optional (at a glance) --------------------------------- - CRITICAL (Android PWAs): 192x192-any, 192x192-maskable, 512x512-any, 512x512-maskable - REQUIRED (Common): 16x16, 32x32, 144x144, 384x384 - iOS Focus: 120x120 (Retina iPhone), 180x180 (Modern iPhone) - Optional / Legacy / Platform‑specific: others as listed below Platform & Usage Details ------------------------ Favicon / Browser - icon-016x016-favicon.png — Browser tab favicon (REQUIRED) - icon-032x032-favicon.png — High‑DPI favicon for modern browsers (REQUIRED) Android (legacy) - icon-048x048-android-legacy.png — Old Android launchers (optional) - icon-072x072-android-legacy.png — Old Android launchers (optional) - icon-096x096-android-legacy.png — Old Android launchers (optional) Android (modern PWA) - icon-144x144-android.png — Launcher/grid usage (REQUIRED) - icon-192x192-any.png — CRITICAL minimum size, full‑bleed (no safe zone) - icon-192x192-maskable.png — CRITICAL minimum size, adaptive with safe zone - icon-384x384-android.png — High‑DPI devices & splash usage (REQUIRED) - icon-512x512-any.png — CRITICAL high‑res, full‑bleed (no safe zone) - icon-512x512-maskable.png — CRITICAL high‑res, adaptive with safe zone Windows - icon-256x256-windows.png — Windows tile/taskbar (optional) - mstile-150x150-windows.png — Windows pinned tile (optional) Apple iOS / iPadOS - icon-120x120-ios.png — Retina iPhone (important) - icon-152x152-ios-ipad.png — iPad Retina (optional) - icon-167x167-ios-ipad-pro.png — iPad Pro (optional) - icon-180x180-ios.png — Modern iPhone (important) High‑Resolution / Store - icon-1024x1024-appstore.png — App Store submission (optional for PWAs; required for App Store apps) Safari Mask/Icon - safari-pinned-tab.svg — Monochrome pinned tab icon for Safari (optional) ANY vs MASKABLE (critical difference) ------------------------------------- - any: full‑bleed artwork. The system may crop into corners/edges. Use when you want edge‑to‑edge color. - maskable: includes transparent safe‑zone padding so Android can adaptively mask shapes (circles, squircles). Prevents critical artwork from being cut off. Android Home Screen Background Colors (Common Question) ------------------------------------------------------- Why does my icon look different on Android home screens? Android uses the 'background_color' property from your manifest.json to create the background circle/shape behind your icon on the home screen. Examples: - "background_color": "#ffffff" → White circle background (default) - "background_color": "#000000" → Black circle background (sleek, modern look like Perplexity, Dicta-Notes) - "background_color": "#6a00ff" → Purple circle background (match your brand) Two ways to control this: 1) RECOMMENDED: Set background_color in manifest.json - Most flexible - change anytime without regenerating icons - Edit your manifest.json: { "background_color": "#000000", "theme_color": "#your-brand-color", "icons": [...] } - Remove and re-add PWA to home screen to see changes 2) Bake background into icon image - Add "on black background" to your generation prompt - Background becomes part of the icon image itself - Less flexible - requires regenerating to change color NOTE: This only affects Android PWA home screen appearance. iOS and desktop browsers display icons differently and don't use background_color the same way. Recommended Manifest Entries ---------------------------- "icons": [ { "src": "/icons/icon-192x192-any.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-192x192-maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/icons/icon-512x512-any.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-512x512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] Splash Screens (iOS) — Implementation ------------------------------------- 1) Generate & Download - Use Imagcon's Splash Generator → Download ZIP. Filenames are self‑describing and ready to deploy. 2) Place Files - Put PNGs into a public directory, e.g. /splash. Keep filenames intact. 3) Add HTML Tags - Paste the provided <link rel="apple-touch-startup-image"> tags into your index.html <head>. - Update href paths to match where you placed the images (e.g., /splash/...). 4) Understand Platform Differences - iOS/iPadOS uses those startup images when launched from the home screen. - Android/Chrome builds its launch screen from web manifest (background_color, theme_color, name/short_name) — it ignores startup images. 5) Caching & Troubleshooting - Serve splash images with long cache headers; bump filenames or add ?v=2 when updating. - On iOS, if changes don’t show: remove the installed PWA and re‑add to Home Screen, or clear Safari → Website Data for your domain. Produced by Imagcon