Multiple favicons sizes that cater for different devices/browsers [duplicate]

Question

This question already has answers here:

How to have multiple favicon sizes, yet serve only a 16x16 by default? (5 answers)

Closed 5 years ago.

I was wondering how one can have multiple sizes of a favicon and have the correct size be served to the respective browser/device that is viewing the site.

I've read that having multiple sizes is good practice since your site can be viewed from the traditional browser, but it can also be viewed from tablets and smartphones. Thus having the perfect favicon size available for the device viewing the site is preferable.

How does one do this? According to my knowledge you have a 'favicon.ico' in the root of your site and that's it. But dealing here with multiple sizes e.g. multiple files, throws me off a bit. How do you accomplish this?

Also on a side note, I see that Adobe Photoshop and Illustrator doesn't have the functionality to export to .ico file format, any tips?

Answer 1

Seems like this may have already been answered in this question: How to have multiple favicon sizes, yet serve only a 16x16 by default?

Although personally a well optimized 32x32 ico is so small I don't usually bother with making a 16x16 version, the browser will shrink it automatically.