✅
PWA Bundle
1.1.x
1.1.x
  • PHPWA Bundle
  • How To Create A PWA?
  • How To Install/Remove A PWA?
  • Bundle Installation
  • Deployment
  • The Manifest
    • Application Information
      • Scope
      • ID
      • Direction and Language
      • Orientation
      • Description
      • IARC Rating ID
      • Categories
    • Icons
    • Screenshots
    • Shortcuts
    • Protocol Handlers
    • File Handlers
    • Share Target
    • Complete Example
  • The Service Worker
    • Configuration
    • Content Security Policy
    • Custom Service Worker Rule
    • Workbox
      • Site Manifest Cache
      • Asset Caching
      • Resource Caching
      • Image Caching
      • Font Caching
      • Offline Fallbacks
      • BackgoundSync
      • CDN and Versions
      • Cache Cleaning
      • Custom Cache Strategy
    • Push Notifications
    • Complete Example
  • Symfony UX
    • Connection Status
    • Prefetch on demand
    • Sync Broadcast
    • BackgroundSync Form
  • Image Management
    • Icons
    • Screenshots
  • Experimental Features
    • Non-Standard Parameters
      • Launch Handler
      • Display Override
      • Related Applications
      • EDGE Side Panel
    • Translations
    • Widgets (Win10+)
Powered by GitBook
On this page
  • src Parameter
  • sizes Parameter
  • format Parameter
  • purpose Parameter

Was this helpful?

Edit on GitHub
Export as PDF
  1. The Manifest

Icons

PreviousCategoriesNextScreenshots

Last updated 11 months ago

Was this helpful?

To integrate the icon details into the Progressive Web App (PWA) manifest file, ensure that each icon listed is accompanied by its respective size. For example, icon-256x256.png is indicated as having a size of 256px by 256px. This is crucial for providing clear visual elements across different devices and resolutions.

The sizes attribute indicates the size of the icon to the browser. For PNG or JPEG icons, specify the dimensions (e.g., 48, 96, 256). For vector icons, you can use "any" as they are scalable without losing quality. The format attribute is also important as it tells the browser what the file format is, helping it to render the image correctly or the browser to select the most suitable format.

/config/packages/pwa.yaml
pwa:
    manifest:
        enabled: true
        icons:
            - src: "icons/icon-192x192.png"
              sizes: [192]
            - src: "icons/icon-192x192.png"
              sizes: [192]
              purpose: "maskable"
            - src: "icons/icon.svg"
              sizes: 0

src Parameter

The src parameter is the path to the resource file. It can be an , a relative path or an absolute path to the resource.

/config/packages/pwa.yaml
pwa:
    manifest:
        icons:
            - src: "icons/icon-48x48.png"
              sizes: [48]
            - src: "/home/project/foo/bar/icon-48x48.png"
              sizes: [48]
            - src: "src/resources/data/icon-48x48.png"
              sizes: [48]

sizes Parameter

The sizes parameter indicates the suitable sizes for the icon. The expected value is an positive integer or a list of positive integers.

0 means any size and is suitable only for vector images.

The recommended sizes for application icons are as 48, 72, 96, 144, 168, 192, 256 and 512 pixels.

/config/packages/pwa.yaml
pwa:
    manifest:
        icons:
            - src: "icons/icon-192x192.png"
              sizes: [48, 96, 192]
            - src: "icons/icon.svg"
              sizes: 0

format Parameter

When the format parameter is set, the bundle will try to save the image in the specified format. If the component symfony/mime is present, the bundle will guess the correct type.

In general, browsers can read svg, png and jpg types. Modern browsers may support webp.

Conversion to SVG is not possible.

purpose Parameter

The purpose maskable icons indicates the icon has a security margin and borders can be cropped on certain devices.

Asset Mapper resource
Maskable image safe area