Workflow and software choice when converting complex image to favicon?

Question

I have a logotype which is complex (a line screened image consisting of multiple thin lines) that I want to turn into a favicon. If I just scale it down to favicon size (32×32px) I get a blur.

Are there any good tools to do this better? What would a good workflow look like?

For example I would be able to approximate the logo if I could have the original image in full resolution as a background layer and 'trace' the 32×32px icon on top of that in another layer—is that possible?

Answer 1

I would look into developing your complex design as vector in Illustrator:

Create the line with the Line Segment Tool:

Go to Object -> Expand:

Review the options in the panel:

After ok you should be able to adjust the fill or even apply an outline:

When expanding the lines they will adjust in size if you adjust the artboard in Illustrator.

You could use that to script a variation of sized that were in this article I read once by CSS Tricks titled Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?.

This article led to a generator that could produce everything needed for a webpage named RealFaviconGenerator.

After reading that article I did decide to just create a PNG but since your question asks how to create a favicon I thought I would also provide an Imagemagick solution that can be found here:

convert image.png  -bordercolor white -border 0 \
      \( -clone 0 -resize 16x16 \) \
      \( -clone 0 -resize 32x32 \) \
      \( -clone 0 -resize 48x48 \) \
      \( -clone 0 -resize 64x64 \) \
      -delete 0 -alpha off -colors 256 favicon.ico

Answer 2

One workaround which makes it possible to trace a low-res image on top of a high-res in Gimp or Photoshop goes like this (example in Gimp):

• Open the desired original image.
• Resize the canvas to a square with the same width and height as the largest dimension of the image. E g if the original image is 800×600, make the canvas 800×800.
• Create a new transparent layer on top of the original image.
• In the new transparent layer use Filter-Render-Patterns-Grid and create a grid so that the image is devided into 32 rows and 32 columns. Choose a color for the grid that you will not use in the image.
• Turn down the opacity a bit of the underlaying original image, it will look like this:

• Each square in the grid will become a pixel in the final image, so now fill the appropriate ones until you have something like this:

• Last step is to scale this image to 32×32 and save as an icon!