Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Joveice

web standards for favicon

Recommended Posts

Posted · Original PosterOP

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?


Operator @ Norsk Helsenett SF. Our mission is to deliver and develop a secure, robust and appropriate national ICT infrastructure for effective interaction between healthcare and healthcare professionals.

Link to post
Share on other sites

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

Link to post
Share on other sites
Posted · Original PosterOP
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.


Operator @ Norsk Helsenett SF. Our mission is to deliver and develop a secure, robust and appropriate national ICT infrastructure for effective interaction between healthcare and healthcare professionals.

Link to post
Share on other sites

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

Link to post
Share on other sites
Posted · Original PosterOP
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!


Operator @ Norsk Helsenett SF. Our mission is to deliver and develop a secure, robust and appropriate national ICT infrastructure for effective interaction between healthcare and healthcare professionals.

Link to post
Share on other sites

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.


"I speak English very well, bröcklersweiß und nier zu schnell"

-- Probably the favorite quote from bavarian students

Codepen http://codepen.io/MoVo99/

Software Skills

  • HTML, CSS & Client Side JavaScript
  • PHP (Laravel & Lumen)
  • JavaScript (NodeJs with Express)
  • Java (Android SDK; Bukkit SDK)
  • Ruby On Rails (Just learning.... 20%)
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×