1

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 it a 16px X 16px, which changes the logo, squishing it. Is there a way to make a transparent square behind the logo in illustrator so that the logo doesn't get damaged and the favicon looks fine. The favicon on this website is an example of what I want to do. Please show me how in Adobe Illustrator.

  • You can follow the same directions from this question on GDSE (you just want to keep the background transparent and the logo centered in a square, regardless of shape) – WELZ Nov 27 '17 at 13:22
2

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:

2directIT favicon

0

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 https://www.favicon-generator.org/

You can upload a 800x800.png (larger than 512px) and it will do all the extraction work for you.

0

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.

  • If I save to PNG is that PNG-8 or PNG-24 and should I use save for web (legacy) every time I create a favicon / logo / icon? – Mackenzie Nov 27 '17 at 8:19
  • also if the quality of the icon is really bad after exporting is that fixable? – Mackenzie Nov 27 '17 at 8:23
  • PNG-8 vs 24: not sure it matters. try and see what works. what do you mean bad quality? assuming your logo is true vector, the export should be sharp – Lucian Nov 27 '17 at 8:36
  • what does true vector mean? made in Illustrator? – Mackenzie Nov 27 '17 at 17:26
  • yes. 100% made in illustrator as vector shapes, with no pictures or any raster bits added – Lucian Nov 27 '17 at 17:29

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.