brunocodutra/webapp-webpack-plugin

Circle icons on Android?

uwolfer opened this issue · 3 comments

I'd like to use a round shadowed icon on Android (like this: https://abs.twimg.com/responsive-web/web/ltr/icon-default.882fa4ccf6539401.png). On iOS, I'd like to use a normal one with the full white background (like https://abs.twimg.com/responsive-web/web/ltr/icon-ios.a9cd885bccbcaf2f.png). Do you know if this is possible to do? I have not found any documentation how to change 'favicon' config to produce that.

You can have round icons on Android and square ones on iOS quite easily, however I don't think favicons offers a way for an overlay to be configured such that you get that shadow effect unfortunately.

Icons on Android are generated with a transparent background by default, so you can simply use an image that has the shape you want. To get a square icon on iOS, you can then set the background color in favicons such that it blends in with the original image.

I have created a pull request which adds this feature to 'favicons': itgalaxy/favicons#233

Favicons v5.2 has been shipped, thanks for your help!