web standards for favicon

[Joveice]

Hello I have asked something similar before but not quite the same.

 

So what I wonder what is the standards of favicons? some say png 16x16 or 16x16 ico, other people say one for each type, etc browser, phone, iphone, ipads etc.

 

What is the most used one or is there a standard for how this is?

[mariushm]

See https://css-tricks.com/favicon-quiz/

 

ICO format can have multiple images at different resolutions. 48x48 , 32x32 and 16x16 are most common.

My educated guess would be that the browser would pick the best quality one or the one they can use without resizing (ex may use 16x16 in the address bar and 32x32 in bookmarks or other places )

As the above page says, you can also specify one or several PNG images in various sizes and again the browser would pick the best. I personally would go with 48x48 and 32x32 ... since they're multiples of 16x16

[Joveice]

Just now, mariushm said:

See https://css-tricks.com/favicon-quiz/

 

ICO format can have multiple images at different resolutions. 48x48 , 32x32 and 16x16 are most common.

My educated guess would be that the browser would pick the best quality one or the one they can use without resizing (ex may use 16x16 in the address bar and 32x32 in bookmarks or other places )

As the above page says, you can also specify one or several PNG images in various sizes and again the browser would pick the best. I personally would go with 48x48 and 32x32 ... since they're multiples of 16x16

Okay thanks! but quick question how can you create the ico? for now I have used online convertion tools but I don't wanna do that with a logo that I own as the sites broadcast on the front with last converted icons.

[mariushm]

Use specialized software.. plenty of icon creation software

 

Usually people use vector art software which - unlike pixel art or bitmap editors - allows to resize images without losing quality, so they can make the icons at sizes like 512x512 and then render them down to 32x32 or whatever you want.

 

Look at Inkscape , Adobe Illustrator, Corel DRAW , Adobe FreeHand ... and so on

[Joveice]

Just now, mariushm said:

Use specialized software.. plenty of icon creation software

 

Usually people use vector art software which - unlike pixel art or bitmap editors - allows to resize images without losing quality, so they can make the icons at sizes like 512x512 and then render them down to 32x32 or whatever you want.

 

Look at Inkscape , Adobe Illustrator, Corel DRAW , Adobe FreeHand ... and so on

Got illustrator but dident know it could, thanks!

[MoVo]

Using a squared PNG works fine as well. But for some browsers you have to reference them with 

<link rel="icon" href="favicon.ico" type="image/png">

By using this syntax it's actually possible to nest the icon file into a sub-direcotry rather than having it in the root.