Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Let's say, I have a logo of website, with size 120x50px.

Favicon should be 16x16px to be supported by major browsers.

How it is possible to rework some image, making it smaller nearly in 10 times, and save the basic look?

share|improve this question
    
If you add the image we might be able to suggest something. There is no clear cut answer to this. –  Emilie Feb 8 at 0:51

5 Answers 5

If you look at any good website you'll see that their favicon is not their logo, it's a tiny version that is similar enough to look right with the site.

The simplest way that I've found, for conveying the brands message consistently in the favicon, is using the two most prominent colours or the colour scheme of the logo and the first letter of the company name. At a stretch, with a one colour simple background you could have two letters, like the SE GD favicon.

In response to your comment:

the problem is that there is train on logo, train is impossible to represent with [a] square, and trying to represent it inside 16x16 makes [the] main element too small to have any sense

Without more information, I can only speculate; but consider this:

Train

Look at the train, identify the main features that define it's character. Particularly the front shape, and the smoke billowing out. Using this kind of shape would convey a train even at 16px by 16px.

I'm not saying go with this, but I'm sure there are some characteristics you could extract from the logo to represent it at a tiny size.

share|improve this answer
    
yeah, the problem is that there is train on logo, train is impossbile to represent with square, and trying to represent it inside 16x16 makes main element too small to have any sense –  Joe Half Face Jul 7 '13 at 23:41

As mentioned, you need to re-draw the icon in the correct size.

I've found this a bit difficult to do in Photoshop, so what I did was export an image in full size, and then use the favicon.cc generator to adjust the pixels manually. You can do this in any program, but I find this tool quite useful.

share|improve this answer

Just to demonstrate that it is possible to produce a favicon with little rework and an automatic process, here's a badge which is used by a group I'm associated with. It's a heart and a fleur-de-lys.

Badge

To create the favicon, I removed the thin lines in the fleur-de-lys and thickened the "outline" line where it pokes through the top of the heart. It could have been a bit thicker, but I preserved a white outline around the image and it works on a coloured background in a browser tab bar.

Then I used Paint Shop Pro to reduce that 150x150 image to 16x16 by pasting it into a 16x16 selection (which presumably uses its "Smart size" algorithm, whatever that is) and ended up with this:

Favicon

This method does work well for simple images, and mine is single-colour and fairly bold. It does its best with complex images and the results can be usable. It isn't always necessary to work out each one of 256 pixels individually.

To make it work for a more complex image, you need to simplify that image. That may be as basic as using a silhouette in the principal house colour.

share|improve this answer

Generally, you can't "rework" anything. The best course is to recreate the fav icon by drawing every pixel specifically. Trying to reduce any image down to a 16x16 pixel image will result is essentially an unidentifiable blob.

share|improve this answer

This tool is a super time saver. Try it out! It takes care of everything for you.

Upload your image at something around 800px x 800px so its nice and crisp.

http://realfavicongenerator.net/

Also add this meta tag so you can name your icon if some saves to there iOS device.

<meta name="apple-mobile-web-app-title" content="Website Name">

Hope that helps!

share|improve this answer

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.