We need to generate a specialized favicon file: the ICO file. This is a container format that actually has multiple differently sized graphics inside. Specifically we want
48px size icons inside the ICO container. The browser will choose whichever suits its purpose.
On non-retina screens browsers will chose the
16px icon size—form within the single
.ico file—to show in tabs. But on retina screens they’ll choose the
32px size icon—all from within the single file format.
The absolute best application to make favicons with is IconSlate—but it costs about $7. (It’s totally worth it.) No other application will allow us to use the
48px icon that we really need.
I would suggest you use IconSlate to generate the favicon, but if you don’t want to spend the money, skip to the next step and see how to do it for free.
If you check out your Desktop now, you’ll have the 4 PNG files and your new ICO file.
Make sure you rename you brand new favicon to exactly
favicon.ico for it to work properly.