: How you can rework logo to fit favicon of browser - 16x16px? 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

@Mendez620

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.
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!

Vote Up Vote Down

@Turnbaugh909

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.



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:



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.

Vote Up Vote Down

@Radia289

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.

Vote Up Vote Down

@Kevin459

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:



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.

Vote Up Vote Down

@Turnbaugh909

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.

Vote Up Vote Down