LukeberryPi/phived

add 32x32 version to favicons for high-res screens

Closed this issue · 1 comments

kazzkiq commented

First of all, congrats for this awesome project!

It looks like the both versions of the favicon are available only in 16x16 size. For high-res desktop screens (such as retina displays, 4k, etc) a 32x32 version is needed or the favicon gets pixelated.

Example (check how the icon is heavily pixelated, while the other parts of the browser UI are not):

Screenshot 2023-08-02 at 16 27 54 Screenshot 2023-08-02 at 16 28 06

In order to have multiple sizes favicons you have basically two options:

  1. Generating 2 files for each resolution (e.g. favicon-16.png and favicon-32.png) and adding both metatags to the HTML <head> as follows:
<link rel="icon" href="/favicon-16.png" sizes="16x16">
<link rel="icon" href="/favicon-32.png" sizes="32x32">
  1. Generating a single .ico file with both 16x16 and 32x32 images inside it, and simply replace the current .ico files.
LukeberryPi commented

thank you for this issue, i just fixed it. let me know if you still see the pixelated favicon on your screen! thanks