: 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

@Candy945

The .ico file format can contain many sizes of the icon - the whole point of it is the program will display the closest match. Mac programs will include icons up to 1024px.

However, any icon smaller than 32x32 will usually need some manual tweaking - you won't get good results by starting with a large vector image and letting the program scale it down. You will need to set the scale size starting with the original vector artwork, convert it to a raster layer, and then manually adjust the image. At 16x16 (standard web icon) size you will probably end up working each pixel by hand - won't take long, there's only 256 of them. Antialiasing is possible to eliminate the jaggies, but you will also do this manually. There simply isn't enough space for the usual algorithms to work properly.

Vote Up Vote Down

@Margaret771

There are many devices available now days. With that in mind, there are many favicon sizes needed. Here is a great explanation of the many different sizes of favicons, how to design them, and implement them on your website.

If you are talking about it being crisp on certain devices and not on others, you need to implement all of the sizes that are in use to have a crisp favicon on all browsers and displays.

If you are talking about the crispness in regards to a 16 x 16 icon, it comes down to skill designing it. The best way is to zoom in, select the pencil tool, and start editing those pixels. You could beef up the thin lines of the W that way.

Vote Up Vote Down

@Radia289

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:

Vote Up Vote Down