When I import vector image to the photoshop from illustrator and try downsampling it with turned on option "Bicubic sharper (best for reduction)". But Photoshop still provides its interpolations and I stil dont get high clear-cut small image as on others sites I see. Example:

enter image description here

  • 2
    Why do you believe 'others sites' are also using Illustrator and Photoshop? Favicons are small enough to draw them one pixel at a time. – usr2564301 Nov 28 '14 at 11:50
  • No i dont, im not a designer, i need only pretty icon ) – Ivan Stelmakh Nov 28 '14 at 11:53
  • First of all, you dont want to downsample. Try to open your .ai-File directly with PS - you will get a dialog for the size you want! When your art is in PS - most of the times it IS pixels - You might not want that! Also, try to read obout "Smart-Objects". – Rockbot Nov 28 '14 at 18:10
  • For such simple images I usually use online favicon editors. Here's what I've created within some minutes (feel free to edit and use): favicon.cc/?action=icon&file_id=795806 On this website you can also see a live preview of current favicon at your browser's tab – Aksana Zinchanka Jan 27 '15 at 13:49

The scale of a favicon (typically 16x16 pixels, although nowadays larger sizes are 'accepted' as well and scaled to fit by most browsers) is too small for general software to do anything useful with.

For the best possible favicon, just draw them one pixel at a time. The image below took only 3 minutes or so.

Note that it is not displayed at 100% -- it really is 16x16 pixels. That's why the black lines are considerably thicker than the white parts, when compared to your original vector image.

The extra white on the right and bottom is because your logo is strongly symmetrical. I recognized that and so chose to move the design 1/2 pixel to the top left, rather than attempting to keep the original positioning by converting them to antialiased gray lines. That is not something current software is able to do at this scale -- it needs human judgement.

look! a favicon!

| improve this answer | |
  • Unfortunately this image was only provided for the example, i tried to investigate more common way to resample images for favicons. But now i realized that one way is to draw it in actual size manually ... – Ivan Stelmakh Nov 28 '14 at 12:34

The best way overall, as mentioned in comments, is to redraw it at the necessary size.

I've tried many kinds of downscaling but none were of an acceptable quality.

It is genuinely quicker and easier in most cases to just redraw it. Redrawing it with PS can be a bit more difficult than it should be, because arguably, PS was built for much more complex purposes.

That's why I just downloaded a free icon making software. It's extremely simple, and the program is practically built for creating favicons. It took me less than 30 minutes to polish a favicon that I'd already spent hours trying to downsize etc.

The program I use is Icon Craft which you can see below.


Also, I personally drew it at the smallest size, 16px x 16px, and then just duplicated that version for larger dimensions. Which can be done by right clicking on the icon in the menu on the right.

Last but not least, this allows you to create and package multiple favicons in a single .ico file.

| improve this answer | |

Way that helped me - was to export all vector shapes of my logo from Illustrator to the Photoshop paths (just copy them in Illustrator and paste as Path to Photoshop), then reduce image with paths to 16x16 pixels. And then personally fill or stroke any path. In my case it looked not bad.

| improve this answer | |

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.