Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
1  
I read a very interesting and informative article about favicons recently here: jonathantneal.com/blog/understand-the-favicon –  DumbNic Apr 12 at 21:12
1  
What exactly do you mean by "crisp"? Can you show an example of a "crisp" favicon? The icon you've posted looks about as crisp as it can be at 16x16 pixels. You could make it look sharper yet by getting rid of the anti-aliasing, but that would also make it look pixelated. –  Ilmari Karonen Apr 12 at 22:31

3 Answers 3

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

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.