1

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?

1

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

Create the line with the Line Segment Tool:

enter image description here

Go to Object -> Expand:

enter image description here

Review the options in the panel:

enter image description here

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

enter image description here

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
0

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:

close-up of generated grid

  • 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:

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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