Favicon General Question

Favicon General Question… what should be the size of favicon because i see alot of generators online when i create and upload on my website it show size error

Micheal Morris has it right - a single .ico file can contain multiple sizes and color depths, so you should be making multiple versions…

Designing 32x32 as the only format in a favicon is usually a miserable /FAIL/ since 99% of the time it is used in browsers it will be auto-resized to 16x16 – so get a 16x16 version in the file. At the same time someone may put it on their desktop or into a menu that shows it larger… rare occurance but a 32x32 wouldn’t hurt. I’d not bother with a 48x48 at all since it’s just a waste of bandwidth.

… and restrict yourself to 256 colors or less, especially on the 16x16 – since 16x16 is only 256 pixels in the first place…

Yep 32x32 I would recommend because you can make a slightly better favicon.

Set it to 16 x 16 px or 32 x 32 px. That seems to be the standard. :slight_smile:

Size of Favicon should be according to Browser of your target audience.

16×16 – This is the standard size for favicons. If you can create a good favicon with these dimensions, then rest assured that it will be displayed correctly across all browsers.

32×32 or 48×48 – If you need the favicons to have slightly higher resolution then 16×16, then these are the ideal sizes. All modern browsers support favicons with these dimensions. However, some older browsers may distort it due to resizing. So, if your target audience uses old browsers, then go with favicons with dimensions 16×16.

If you use the ico format you can provide multiple sizes of the icon in the same file. This is especially important for IE 9 since it will use the 16x16 image on the address bar, but the 32x32 or 64x64 image on the taskbar if someone pins your site to the task bar. ICO format supports up to 256x256 icons.

It’s also worth giving an additional nod to Apple. If you want your Favicon to work on devices like the iPod Touch, iPhone and iPad (who wouldn’t)? It’s different.

You want to produce a PNG file, make sure it’s at least 57x57 pixels (Apple devices will scale down larger ones) and reference it with the following code.

<link rel=“apple-touch-icon” href=“images/icon.png” />

Note: This is independent of your other favicon, you can link to them both in the head. :slight_smile:

PS: I personally think it’s worth including as then people can add your site link to their home screen and have one click access to your stuff!

The standard size for favicons is 16x16.