Transparent favicons

XnConvert Multi Platform - Windows, MacOSX, Linux

Moderators: XnTriq, helmut, xnview

Post Reply
Xanadu
Posts: 10
Joined: Fri Jul 22, 2016 7:32 pm

Transparent favicons

Post 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!
User avatar
xnview
Author of XnView
Posts: 43357
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Transparent favicons

Post by xnview »

XnConvert doesn't support transparency from .ai/.pdf files
Pierre.
Xanadu
Posts: 10
Joined: Fri Jul 22, 2016 7:32 pm

Re: Transparent favicons

Post 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.
cday
XnThusiast
Posts: 3976
Joined: Sun Apr 29, 2012 9:45 am
Location: Cheltenham, U.K.

Re: Transparent favicons

Post 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...
Xanadu
Posts: 10
Joined: Fri Jul 22, 2016 7:32 pm

Re: Transparent favicons

Post 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.
User avatar
XnTriq
Moderator & Librarian
Posts: 6336
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Post by XnTriq »

Test file:

Image
logo.png (135×102)
  1. Actions » Add action> » Image » Canvas resize
    • Width: 135 pixels
      Height: 135 pixels
      Alpha: 0
  2. Actions » Add action> » Image » Resize
    • Width: 16 pixels
      Height: 16 pixels
      Resample: Lanczos
  3. Output » Format » ICO - Windows Icon
Please change the extension of the attached file from zip to ico after downloading it to see the result:
p135720.zip
(1.12 KiB) Downloaded 78 times
Xanadu
Posts: 10
Joined: Fri Jul 22, 2016 7:32 pm

Re: Transparent favicons

Post 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!
User avatar
XnTriq
Moderator & Librarian
Posts: 6336
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Post 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.)
Xanadu
Posts: 10
Joined: Fri Jul 22, 2016 7:32 pm

Re: Transparent favicons

Post 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?
User avatar
XnTriq
Moderator & Librarian
Posts: 6336
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Post 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)
Xanadu
Posts: 10
Joined: Fri Jul 22, 2016 7:32 pm

Re: Transparent favicons

Post 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!!
Attachments
testscreenshotico.jpg
testscreenshotico.jpg (8.1 KiB) Viewed 3864 times
cday
XnThusiast
Posts: 3976
Joined: Sun Apr 29, 2012 9:45 am
Location: Cheltenham, U.K.

Re: Transparent favicons

Post by cday »

You should be able to upload an .ico file if you place it in a ZIP or other archive...
User avatar
XnTriq
Moderator & Librarian
Posts: 6336
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Post by XnTriq »

Xanadu wrote:Is there a way to submit a .png file to browser for the favicon?
  1. Copy & paste the following “code”…

    Code: Select all

    <html>
    <head>
    <link rel="icon" type="image/png" href="favicon.png" />
    </head>
    <body>
    Test
    </body>
    </html>
    … to a text editor and save it as test.htm.
  2. Put an image named favicon.png into the same folder.
  3. Open test.htm in your web browser.
Related info:
<!--// to be continued //-->
User avatar
XnTriq
Moderator & Librarian
Posts: 6336
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Post 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
Original: 135×102
p135757_1.png (5.64 KiB) Viewed 3671 times
Canvas resized: 135×135
Canvas resized: 135×135
p135757_2.png (5.73 KiB) Viewed 3671 times
If your input images already have the correct dimensions, you can skip these steps.
Post Reply