Create Favicons

Providing favicons for a large set of devices and operating systems is painful. Indeed, ensuring your website has a favicon that looks good and is recognizable across all devices and operating systems can be a daunting task.

Favicons are different from application icons declared on the Manifest. This will be simplified in the next versions of the bundle.

With this bundle, it takes few seconds to get it working. All you need is a square icon as a SVG or a large PNG image (512 pixels or more).

config/packages/pwa.yaml

pwa:
    favicons:
        enabled: true
        src: assets/icon.svg

It is highly recommended to have a transparent background.

Done!

Now that you've configured your YAML file to enable favicons, your website will automatically generate favicons suitable for a wide array of devices and operating systems. This eliminates the need to manually create and link multiple favicon sizes, ensuring your site's icon is always displayed optimally, whether viewed on a desktop browser, a tablet, or a mobile phone.

Icon masks and safe zone

As mentioned in the Web App Manifest, Some platforms have their own preferred icon shape.

You can reduce the size of the image. A transparent background will be added to fulfil with this requirement.

Safe zone

config/packages/pwa.yaml

pwa:
    favicons:
        enabled: true
        src: assets/icon.svg
        image_scale: 80 # = 80% of the original size

Background and Rounded Corners

To add a background color and rounded corners to your app's icon, specify the background color and corner shape in your pwa.yaml configuration. This customization enhances the visual appeal of your icons on various platforms that support these features.

config/packages/pwa.yaml

pwa:
    favicons:
        enabled: true
        src: assets/icon.svg
        background_color: "#ffffff" # Hex color for the icon background
        border_radius: 10 # = 10% of the size. 50% is a circle.

border_radius has no effect if no background is set.

Safari Pinned Tab

By setting a safari_pinned_tab_color to a color value, the corresponding HTML tags will be added. The icon will be rendered as it is, even if you specified background color or border radius.

If you prefer a silhouette instead, you can set the option use_silhouette to true. Note that this option requires potrace to be installed.

config/packages/pwa.yaml

pwa:
    favicons:
        enabled: true
        src: assets/icon.svg
        safari_pinned_tab_color: "#f5ef06" # Safari only
        use_silhouette: true
        potrace: "/path/to/potrace" #Optional.
        # Only if potrace is installed in a non-conventional folder

Windows 8 / 10 Tiles

You can enable Windows 8 / 10 tiles by setting a tile color.

config/packages/pwa.yaml

pwa:
    favicons:
        enabled: true
        src: assets/icon.svg
        tile_color: "#f5ef06" # Windows 8 to 10 only

Example of Windows 8 tiles

Background color or border radius options have no effect on the windows tiles

Low Resolution Icons

By default, favicons are created for modern platforms. It may be interesting to provide icons for old systems such as iOS6 or Chrome 20. To do so, you just need to enable the low_resolution option and other icon sizes will be generated.

config/packages/pwa.yaml

pwa:
    favicons:
        enabled: true
        src: assets/icon.svg
        low_resolution: true