Page 1 of 1
Transparent favicons
Posted: Tue Nov 08, 2016 9:34 pm
by Xanadu
Hello, I'm trying to create a transparent favicon. I'm converting my original .ai file to a transparent .png and then converting that to favicon.ico in XNConvert. It keeps coming out with a white background even though the original .png is transparent.
What am I doing wrong? Thanks!
Re: Transparent favicons
Posted: Wed Nov 09, 2016 8:09 am
by xnview
XnConvert doesn't support transparency from .ai/.pdf files
Re: Transparent favicons
Posted: Wed Nov 09, 2016 2:46 pm
by Xanadu
Yes, but I converted the .ai file to a .png, and then tried to convert that .png file to the transparent .ico file.
Re: Transparent favicons
Posted: Wed Nov 09, 2016 4:24 pm
by cday
Xanadu wrote:Yes, but I converted the .ai file to a .png, and then tried to convert that .png file to the transparent .ico file.
Did the .png have transparency?
I think that Pierre is saying that transparency is always lost when converting .ai files...
Re: Transparent favicons
Posted: Wed Nov 09, 2016 7:39 pm
by Xanadu
Thanks for weighing in.
Yes, I made it a point to be sure the .ai file had no background and the .png I created did indicate transparency when it was created. And I've made many, many .png files from .ai files and they always maintain their transparent integrity. I can't recall ever having a problem converting .ai files to .png files that are transparent.
Re: Transparent favicons
Posted: Wed Nov 09, 2016 10:30 pm
by XnTriq
Test file:
logo.png (135×102)
- Actions » Add action> » Image » Canvas resize
- Width: 135 pixels
Height: 135 pixels
Alpha: 0
- Actions » Add action> » Image » Resize
- Width: 16 pixels
Height: 16 pixels
Resample: Lanczos
- Output » Format » ICO - Windows Icon
Please change the extension of the attached file from
zip to
ico after downloading it to see the result:
Re: Transparent favicons
Posted: Thu Nov 10, 2016 5:01 pm
by Xanadu
My apologies, XnTriq, I'm not understanding what you're telling me or telling me to do. Can you fill in a bit more detail?
THANKS!
Re: Transparent favicons
Posted: Thu Nov 10, 2016 6:30 pm
by XnTriq
Hi again, Xanadu (-:
Xanadu wrote:My apologies, XnTriq, I'm not understanding what you're telling me or telling me to do. Can you fill in a bit more detail?
THANKS!
Sorry for the confusion! Yours truly was a little sleep-deprived \-:
I wanted you to check if you get the desired results with your PNGs by following the steps in my previous post. (Of course you can skip the optional
Canvas resize action if your input images are already square.)
Re: Transparent favicons
Posted: Thu Nov 10, 2016 6:46 pm
by Xanadu
I'm glad it's not just me being sleep-deprived today.
I thought favicons were supposed to be 32x32. Is that not right?
How are the instructions different than using a correctly-sized original .png as the source file and an .ico as the output?
Re: Transparent favicons
Posted: Thu Nov 10, 2016 7:15 pm
by XnTriq
Xanadu wrote:How are the instructions different than using a correctly-sized original .png as the source file and an .ico as the output?
Your original PNGs already have the correct dimensions (32×32)? Could you upload a sample PNG which was converted from AI?
Xanadu wrote:I thought favicons were supposed to be 32x32. Is that not right?
AFAIK, web browsers will scale the image (ICO/GIF/PNG) to the
required dimensions. For Firefox's tabs, this would be 16×16.
- Amazon (16×16 + 24×24 + 32×32 + 48×48)
- CNN (16×16 + 32×32 + 48×48)
- eBay (16×16)
- Google (16×16 + 32×32)
Re: Transparent favicons
Posted: Thu Nov 10, 2016 10:26 pm
by Xanadu
Okay, XnTriq, so here's what I did:
I created a new test .ai file that is 48x48 thanks to your great browser tips (so browsers wouldn't have to enlarge.)
I made a .png that was 48x48 and made sure it was transparent, which it was.
I converted the transparent .png in XnConvert using the instructions you gave me earlier. I did image>canvas resize to 48px and also image>resize to 48x even though the original image is 48px.
I got a "The extension ico is not allowed" when I tried to upload the .ico file, but I've attached a .jpg of it. It appears that it IS transparent, which is fabulous, but it looks like it may have reduced the size of the original image. In it's original .png file it went edge to edge on a 48px square.
1- Do you know why the image is now smaller and centered in the larger box?
2- Is there a way to submit a .png file to browser for the favicon?
Thanks!!
Re: Transparent favicons
Posted: Thu Nov 10, 2016 10:42 pm
by cday
You should be able to upload an .ico file if you place it in a ZIP or other archive...
Re: Transparent favicons
Posted: Thu Nov 10, 2016 11:00 pm
by XnTriq
Xanadu wrote:Is there a way to submit a .png file to browser for the favicon?
- Copy & paste the following “code”…
Code: Select all
<html>
<head>
<link rel="icon" type="image/png" href="favicon.png" />
</head>
<body>
Test
</body>
</html>
- Put an image named favicon.png into the same folder.
- Open test.htm in your web browser.
Related info:
<!--// to be continued //-->
Re: Transparent favicons
Posted: Fri Nov 11, 2016 8:00 pm
by XnTriq
Xanadu wrote:I did image>canvas resize to 48px and also image>resize to 48x even though the original image is 48px.
Resizing the canvas (= fill with padding) of non-square images to make them square prevents them from being distorted (= stretched) during downscaling to the appropiate size(s) for favicons.
- Original: 135×102
- p135757_1.png (5.64 KiB) Viewed 4100 times
- Canvas resized: 135×135
- p135757_2.png (5.73 KiB) Viewed 4100 times
If your input images already have the correct dimensions, you can skip these steps.