can i use angular material icons for favicon?

Question

Instead of my own image file, i would like to use standard material icons as favicon for my website.

Is there any programmatic way of getting this done, instead of copying or making image files similar to those icons?

question from:https://stackoverflow.com/questions/65900781/can-i-use-angular-material-icons-for-favicon

Answer 1

In order to ensure that your favicon is compatible for all platforms you need to produce several different favicon file types. For example if you only produce a favicon.png it will display in Google Chrome Desktop for Windows but it will not display in Google Chrome Mobile for Android.

So what you end up having to do is create multiple favicons of various file type and resolution in order to ensure cross platform favicon compatibility.

There is a link below that will generate the required favicons to ensure cross platform favicon compatibility. It accepts an input of PNG, JPG, SVG.

You require:

Favicon PNG image for modern desktop browsers.

Favicon Apple Touch icon for mobile browsers.

Favicon icon (.ico) old browsers.

Favicon tile icon for internet explorer on Windows 8 and 10.

I know this is not quite what you are looking for but it should further elaborate on the complexity of favicons.

https://realfavicongenerator.net/