Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I often must create a favicon for a fairly complex image, that when it gets down to 16x16, looks weird or blurry.

I have been trying with one image, reduced with bicubic-sharp in Photoshop and adding varying widths of stroke, making it slightly larger or smaller, to try and make it so the borders line up more with the pixel borders when reduced (it's a logo with 3 curved parallel lines that looks odd when two are mostly crisp and one is a bit blurry).

I wonder if there are any methods or online tools for optimizing this size reduction, sizing and positioning the base image best to maximize the detail that's preserved?

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

A tiny version of an icon must be created for the specific size. Even in the print world, we often do two versions of a company logo (which is, when you think about it, an icon with another name): one for "normal" use and one for small applications such as a business card, but it's even worse when your work is constrained to a grid of great big blocky pixels.

Even without taking the pixel grid into consideration, a complex image can't scale down past a certain point. The fine details become so fine that to the eye they become indistinct and look like noise, or a mistake.

The answer in such a case is to simplify for the smaller size, or to avoid complex images for icons. Note the favicon for this site. In particular, notice the grid behind the letters. It is at a much larger scale, relative to the letters, than in the page header. Imagine how unreadable the favicon would have been with an accurately scaled background grid. At the same time, the grid lines are much thicker and darker than on the page, so that they are visible.

A resampling algorithm can't substitute for the human eye and it has no judgment. It will do its mathematical best to please you, but the problem you have is perceptual, not mathematical.

share|improve this answer
    
Point taken, although the particular logo in question is definitely not more complicated than the default globe favicon in Chrome; I am fairly certain it could be made to look good at that size. I have it to a point I'm happy with right now, but wonder for the future of any helpful methods of optimizing appearance when doing drastic size reductions –  Damon Mar 5 '12 at 20:39
2  
The method most designers use is to recreate the item at the smaller dimension in a somewhat simplified form, especially when it gets down to the size of a 16x16 grid. You can get lucky with downsampling, but that's what it is -- luck. Creating a new version for the target size gives a better result 99% of the time. –  Alan Gilbertson Mar 5 '12 at 20:54
add comment

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.