Tools or methods for optimizing favicon appearance?

Question

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?

Answer 1

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.