Generate Now

Favicon & Icons for Android

Master Android icon implementation for PWAs and home screen installation. Learn manifest configuration, maskable icons, and adaptive icon support.

Android Icon Quick Facts

  • Primary Size: 512×512 pixels
  • Format: PNG (transparency supported)
  • Manifest Required: site.webmanifest
  • Maskable Icons: Adaptive icon support
  • Market Share: ~72% mobile worldwide
  • PWA Support: Full Chrome support

Why Android Icons Are Essential

72%

Global mobile market share

3B+

Active Android devices

PWA

Full app experience

A13

Adaptive icon support

Web App Manifest Configuration

Complete site.webmanifest Example

{
  "name": "Your Application Name",
  "short_name": "App Name",
  "description": "Description of your app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "categories": ["productivity", "utilities"],
  "screenshots": [
    {
      "src": "/screenshots/home.png",
      "sizes": "540x720",
      "type": "image/png"
    }
  ]
}

HTML Link to Manifest:

<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#000000">
Important: The manifest file must be served with application/manifest+json MIME type.

Android Icon Sizes

Size Use Case Purpose Priority
512×512 Home screen, splash screen any + maskable Critical
192×192 Home screen (lower res) any + maskable Critical
384×384 High-density displays any Optional
256×256 Medium density any Optional
144×144 Legacy devices any Legacy
96×96 Low-density displays any Legacy
72×72 Very old devices any Legacy
48×48 Minimal support any Legacy
Minimum Requirements: Include at least 192×192 and 512×512 sizes. Both regular and maskable versions recommended.

Maskable Icons (Adaptive Icons)

Understanding Maskable Icons

Maskable icons are Android's adaptive icon system. They allow your icon to adapt to different shapes (circle, squircle, rounded square) across different Android launchers.

Safe Zone Requirements:

  • Full image: 512×512 pixels
  • Safe zone: 400×400 pixels (center)
  • Border area: 56 pixels on each side
  • Critical content: Must be in safe zone

Design Guidelines:

  • Place logo/icon in center 80%
  • Use full canvas (edge-to-edge)
  • Background color recommended
  • Test with different mask shapes

Maskable Icon JSON Configuration:

{
  "src": "/android-chrome-maskable-512x512.png",
  "sizes": "512x512",
  "type": "image/png",
  "purpose": "maskable"
}
Important: Always provide BOTH "any" and "maskable" purpose icons. Android will choose appropriately based on launcher.

Icon Purpose Attribute

Purpose Description When to Use
any Standard icon, used as-is Default icons without safe zone padding
maskable Adaptive icon with safe zone Icons designed for adaptive masks
monochrome Single-color icon for theming Special themed launchers (rare)
any maskable Can be used for both purposes When icon works for both (careful!)
Best Practice: Create separate icons for "any" and "maskable" purposes. Don't try to make one icon serve both.

Android Display Modes

standalone (Recommended)

"display": "standalone"
  • Full-screen without browser UI
  • Looks like native app
  • Shows system status bar
  • Most common choice

fullscreen

"display": "fullscreen"
  • Complete fullscreen
  • Hides system UI
  • Good for games/media
  • User can bring back UI

minimal-ui

"display": "minimal-ui"
  • Minimal browser controls
  • Back button visible
  • Compromise option
  • Limited support

browser

"display": "browser"
  • Normal browser tab
  • Full browser UI
  • No app-like experience
  • Fallback default

Theme Color Configuration

Theme color affects Android's UI chrome when your PWA is running:

In HTML:

<meta name="theme-color" content="#000000">

<!-- Dynamic theme color -->
<meta name="theme-color" 
      content="#ffffff" 
      media="(prefers-color-scheme: light)">
<meta name="theme-color" 
      content="#000000" 
      media="(prefers-color-scheme: dark)">

In Manifest:

{
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "theme_color_dark": "#ffffff",
  "background_color_dark": "#000000"
}

What Theme Color Affects:

  • Android status bar color
  • Task switcher background
  • Splash screen background
  • Address bar color (in-browser)

Add to Home Screen Behavior

How Android Prompts Installation:

  1. Automatic Prompt: Chrome shows "Add to Home screen" banner when:
    • Site has valid manifest
    • Service worker registered
    • Site served over HTTPS
    • User has engaged with site (time threshold)
  2. Manual Installation: Users can always install via Chrome menu ? "Install app"
  3. Custom Prompt: You can trigger install prompt with JavaScript

JavaScript Install Prompt Example:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  // Show your custom install button
  showInstallButton();
});

installButton.addEventListener('click', async () => {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log(`User response: ${outcome}`);
  deferredPrompt = null;
});

Testing Android Icons

Testing Methods

1. Chrome DevTools

  • F12 ? Application tab
  • Check Manifest section
  • Verify all icons load
  • Run Lighthouse PWA audit
  • Check for errors/warnings

2. Real Android Device

  • Open site in Chrome
  • Menu ? "Add to Home screen"
  • Check icon appearance
  • Launch and test
  • Try different launchers

3. Maskable.app Tool

  • Visit maskable.app
  • Upload your maskable icon
  • Preview different shapes
  • Verify safe zone
  • Download adjusted version

4. Android Emulator

  • Android Studio emulator
  • Test multiple Android versions
  • Different screen densities
  • Various launcher styles

Common Android Icon Issues

Cause: Critical content outside maskable safe zone
Solution: Keep important content within center 80% (400×400 pixels of 512×512 canvas). Use maskable.app to verify.

Causes & Solutions:
  • Missing or invalid manifest file
  • No service worker registered
  • Site not served over HTTPS
  • Not enough user engagement
  • Check Chrome DevTools Console for errors

Solution: Use 512×512 source. Create from high-res original (1024×1024 or larger). Android scales down, never up.

Android Icon Best Practices

? Do's

  • Provide both 192 and 512 sizes
  • Create separate maskable versions
  • Test with maskable.app tool
  • Use valid web manifest
  • Set appropriate theme colors
  • Test on real Android devices
  • Support dark mode themes
  • Use PNG format

? Don'ts

  • Don't ignore maskable icons
  • Don't use only one size
  • Don't forget safe zone padding
  • Don't use JPEG for icons
  • Don't skip manifest testing
  • Don't ignore theme color
  • Don't assume one icon fits all
  • Don't forget HTTPS

Generate Android-Perfect Icons

Create all required sizes including maskable variants

Generate for Android

Related Articles

PWA Icons

Complete PWA guide

iOS Icons

Mobile comparison

Chrome Favicon

Browser guide

An unhandled error has occurred. Reload 🗙