Icons

Deprecated: The command pwa:create:icons is deprecated and has been removed. Use modern icon generation tools and configure icons directly in your manifest.

Overview

PWA icons are configured in your manifest file and served through AssetMapper or absolute paths. The bundle no longer provides icon generation commands - instead, use dedicated tools or services.

Icon Configuration

Icons are defined in your manifest configuration. See the complete Icons documentation for detailed configuration options.

Basic Configuration

/config/packages/pwa.yaml
pwa:
    manifest:
        icons:
            - src: "icons/icon-192.png"
              sizes: [192]
            - src: "icons/icon-512.png"
              sizes: [512]
            - src: "icons/maskable-icon-512.png"
              sizes: [512]
              purpose: "maskable"

Recommended Icon Generation Tools

Online Tools

1. PWA Asset Generator

  • https://www.pwabuilder.com/imageGenerator

  • Generates all required icon sizes

  • Creates maskable icons automatically

  • Free and easy to use

2. RealFaviconGenerator

  • https://realfavicongenerator.net/

  • Comprehensive favicon and icon generation

  • Tests icons on multiple platforms

  • Generates HTML meta tags

3. Maskable.app

  • https://maskable.app/

  • Specialized for maskable icon creation

  • Visual safe zone editor

  • Preview on different devices

4. Favicon.io

  • https://favicon.io/

  • Simple and fast

  • Generates from text, image, or emoji

  • Free to use

Command-Line Tools

1. PWA Asset Generator (CLI)

2. Sharp (Node.js)

3. ImageMagick

Icon Requirements

Required Sizes

At minimum, provide these sizes:

Recommended Sizes

For comprehensive support:

Maskable Icons

Always include maskable icons for better Android integration:

Icon Design Guidelines

Standard Icons

  • Format: PNG (preferred) or JPEG

  • Background: Solid color or transparent

  • Content: Icon centered, using ~80% of canvas

  • Design: Simple, recognizable at small sizes

Maskable Icons

  • Safe zone: Keep important content in center 80%

  • Background: Must fill entire canvas (no transparency)

  • Bleeding: Design can extend to edges

  • Testing: Use https://maskable.app/ to verify

Design Tips

  1. Simplicity: Icons should be recognizable at 48x48

  2. Contrast: Ensure good contrast with background

  3. Consistency: Match your brand colors

  4. Scalability: Design should work at all sizes

  5. Testing: Test on actual devices

File Organization

Recommended Structure

Configuration Example

Using Symfony UX Icons

If you have symfony/ux-icons installed, you can use icon libraries:

See Symfony UX Icons for available icons.

Migration from Deprecated Command

Old Approach (Deprecated)

New Approach

  1. Generate icons using online tools or CLI tools

  2. Place icons in your assets/icons/ directory

  3. Configure in pwa.yaml:

  1. Compile assets:

Testing Icons

1. Lighthouse PWA Audit

Check the PWA section for icon requirements.

2. Chrome DevTools

3. Install on Device

  • Android: Install PWA, check app drawer icon

  • iOS: Add to home screen, check icon appearance

  • Desktop: Install, check taskbar/dock icon

4. Maskable Icon Tester

Visit https://maskable.app/editor and upload your maskable icons to verify the safe zone.

Common Issues

Icons Not Appearing

Problem: Icons don't show after installation

Solutions:

  • Clear browser cache

  • Check icon paths are correct

  • Verify icons are served (check network tab)

  • Ensure AssetMapper compiled assets

  • Check file permissions

Wrong Icon Size

Problem: Icon appears pixelated or blurry

Solutions:

  • Provide higher resolution icons (512px minimum)

  • Include appropriate size for each platform

  • Use vector SVG for scalability

Maskable Icons Not Adapting

Problem: Maskable icons get cropped incorrectly

Solutions:

  • Ensure safe zone is respected (center 80%)

  • Test with https://maskable.app/

  • Provide solid background (no transparency)

  • Check purpose is set to "maskable"

Platform-Specific Icons

Android

Requirements:

  • Minimum: 192x192 and 512x512

  • Format: PNG with transparency or solid background

  • Maskable: Highly recommended

iOS

Requirements:

  • Recommended: 180x180 for Apple Touch Icon

  • Format: PNG, no transparency

  • Additional meta tag may be needed

Windows

Requirements:

  • Recommended: 144x144, 256x256

  • Format: PNG or ICO

  • May require separate configuration

Advanced Icon Features

For advanced icon configuration including rounded corners, image scaling, and background colors, see the complete Icons documentation.

Related Documentation

Resources

  • PWA Builder: https://www.pwabuilder.com/

  • Maskable.app: https://maskable.app/

  • Favicon Generator: https://realfavicongenerator.net/

  • MDN Icons: https://developer.mozilla.org/en-US/docs/Web/Manifest/icons

  • Web.dev PWA Icons: https://web.dev/add-manifest/#icons

PreviousWeb ShareNextScreenshots

Last updated

Was this helpful?