Advertisement


How to create a crisp favicon


Question

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?

2014/04/12
1
5
4/12/2014 7:41:00 PM

The tricky thing about favicons is that they are tiny (well, while the classic favicon was 16x16 px, you can now use 24x24 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 16x16 pixel and a 24x24 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 favicon.cc. It lets you upload an image and then manually adjust the pixels while looking at a preview:

enter image description here

2014/04/14
8
4/14/2014 2:58:00 AM