How to create a crisp favicon

I have been trying to create a favicon for my website for sometime and I cannot get it to be crisp. It is a simple Favicon. This is the best I could make it, enter image description here

The W will not be crisp. Is this favicon good enough for web standards? How can I improve it?


The tricky thing about favicons is that they are tiny (well, while the classic favicon was 16×16 px, you can now use 24×24 px. Still quite small).

Because of this, and just as it happens when working with small icons in general, you need to create a version of it pixel by pixel. Scaling just doesn’t do. Check this related question:

Tools or methods for optimizing favicon appearance?

Microsoft recommends including a 16×16 pixel and a 24×24 pixel favicon (for when the user’s system-wide DPI setting is higher than 100%).

I find it personally useful to work with a tool that will allow me to see a preview of the icon while I work. I use an online one called It lets you upload an image and then manually adjust the pixels while looking at a preview:

enter image description here

Source : Link , Question Author : user2544045 , Answer Author : Yisela

Leave a Comment