Create Favicons
Last updated
Last updated
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).
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.
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.
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.
border_radius has no effect if no background is set.
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.
You can enable Windows 8 / 10 tiles by setting a tile color.
Background color or border radius options have no effect on the windows tiles
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.
