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 –  Mr E. Upvoter Apr 12 at 21:12
    
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

1 Answer 1

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

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.