7

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?

1
  • 1
    If you add the image we might be able to suggest something. There is no clear cut answer to this.
    – curious
    Feb 8, 2014 at 0:51

5 Answers 5

7

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.

1
  • Great tool, I use it too! As you said, works the same as working in bitmap in Photoshop but it's quite handy because it sets the proper size, has a grid line for the pixels and saves the image in the right format. It also gives a proper live preview of the favicon, and I think you can even create your animated favicon with it :D
    – go-junta
    Oct 9, 2015 at 11:01
6

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.

1
  • 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 Jul 7, 2013 at 23:41
4

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.

3

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.

0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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