LoginLogin

favicon suggestion

Root / Site Discussion / [.]

TriforceOfKirbyCreated:
I think there's a big difference between 16x16 (where every pixel counts, since you only get 256 of them) and larger sizes (perhaps above around 50x50). When the favicon is being displayed at 16x16 pixels, it looks a lot better when everything in the SVG is aligned to the pixel grid, so it's more readable, especially with things that are meant to look pixelized. You might have to sacrifice things like having a centered icon, and using the actual SB font, to achieve this. However, with larger icons, there's no (noticable) grid to align to, so you can position everything so it looks best without worrying about individual pixels. You can use the same font as SB without making sure that the "pixels" in the letters are 1/16 of the width of the image, or whether the letters are aligned to the grid. This also lets you make the icon more centered, and gives more control over the sizes/thicknesses in the image. For example, Pastebin uses a favicon that's slightly different from their normal logo. They removed the rotation, and reduced the number of 1s and 0s so it would be more readable. The reason that most sites don't do this is because their logos are simpler. SBS's logo needs to have pixelated text inside a circle, which is a lot of detail to fit into such a small space.

I think there's a big difference between 16x16 (where every pixel counts, since you only get 256 of them) and larger sizes (perhaps above around 50x50). When the favicon is being displayed at 16x16 pixels, it looks a lot better when everything in the SVG is aligned to the pixel grid, so it's more readable, especially with things that are meant to look pixelized. You might have to sacrifice things like having a centered icon, and using the actual SB font, to achieve this. However, with larger icons, there's no (noticable) grid to align to, so you can position everything so it looks best without worrying about individual pixels. You can use the same font as SB without making sure that the "pixels" in the letters are 1/16 of the width of the image, or whether the letters are aligned to the grid. This also lets you make the icon more centered, and gives more control over the sizes/thicknesses in the image. For example, Pastebin uses a favicon that's slightly different from their normal logo. They removed the rotation, and reduced the number of 1s and 0s so it would be more readable. The reason that most sites don't do this is because their logos are simpler. SBS's logo needs to have pixelated text inside a circle, which is a lot of detail to fit into such a small space.
Yeah I suppose we could provide a 16x16 PNG and use the 192x192 SVG/PNG one for everything else. Don't really need a 16x16 SVG as only 1 size would be needed anyways and only Firefox currently supports SVG favicons. It would be nice if more web browsers supported SVG and used higher res icons so we could just use 1 favicon for everything. Here's a quick 16x16, diameter of 15, sb font shrunken down a bit: Same as above, with a full 16 diameter: Edit: btw, I'm using base64 encoded data URIs for these image links and pretty much all my others before; not sure if some people can't see these (3ds browser maybe?).