Mobile app version of vmapp.org
Login or Join
Hamaas979

: 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

@Hamaas979

Posted in: #AdobeIllustrator #Favicon #Icon #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 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.

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Hamaas979

3 Comments

Sorted by latest first Latest Oldest Best

 

@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:

10% popularity 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.

10% popularity 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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme