: Illustrator: how to make a transparent favicon of non-square logo I have a logo that isn't square. I want to make it a favicon that has a transparent background, but doing so requires making

@Lengel450

Even though the other answers are technically correct, I'd really advice against just shrinking a very broad or very tall logo into a 16x16 pixel space to make a favicon. There's a good chance that nothing about the logo is going to be recognisable anymore, resulting in a somewhat random jumble of pixels.

A good logo should have a simplified alternative that works at a tiny size and is roughly 1x1 in proportions. Use that to base your favicon on. Don't include any text, or reduce it to one or two characters.

Even if that doesn't work, you might want to take an element of the logo (provided you designed it yourself) and use that as a favicon.

As an example, one of my customers has a rather complex logo, including sand dunes and a compass behind their brand name. AS a favicon, I only used the compass needle:

Vote Up Vote Down

@Mendez620

Start a new document at the size you want (16x16 px).

Select your logo group and drag over to new file.

Resize by:

clicking and holding shift on one of the corners (this will keep the dimensions of scale as you resize).

or

click the chain link between the dimensions (to link width and height) before changing a dimension.

The first layer in the 16x16 new doc, can be used to change the background colour or leave as transparent.

All that said, to meet the new standards for mobile devices and desktops, you will need several favicon sizes, ranging from 16x16 to 512x512, device specific, some with transparent and some with solid block colour.

Your logo will also need to be visable / usable in one colour/transparent, which can be tricky if the logo is not pure vector.

You can set your defaults as needed in preset ai files ready to drop your designs into or there are plenty of online services which automate the whole process.
eg.https://realfavicongenerator.net/ or www.favicon-generator.org/
You can upload a 800x800.png (larger than 512px) and it will do all the extraction work for you.

Vote Up Vote Down

@Ravi4787994

Generate a larger PNG favicon like 256x256px and this can easily be achieved in Illustrator by placing your non-square logo in the middle of a square artboard and saving for web with the "Clip to Artboard' ticked on. Then, link this PNG as a favicon.

<link rel="icon" type="image/png" href="/path/favicon.png" />


If it has to be an ICO, Illustrator (CS6) does not export to ICO so you will still need to make a 16x16 PNG first (see above) and then drop it in Photoshop or use an online converter.

Vote Up Vote Down