Transparent favicons

XnConvert Multi Platform - Windows, MacOSX, Linux
Xanadu
Posts: 10
Joined: Fri Jul 22, 2016 7:32 pm

Transparent favicons

Postby Xanadu » Tue Nov 08, 2016 9:34 pm

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: 28043
Joined: Mon Oct 13, 2003 7:31 am
Location: France
Contact:

Re: Transparent favicons

Postby xnview » Wed Nov 09, 2016 8:09 am

XnConvert doesn't support transparency from .ai/.pdf files
Pierre.

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

Re: Transparent favicons

Postby Xanadu » Wed Nov 09, 2016 2:46 pm

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: 1561
Joined: Sun Apr 29, 2012 9:45 am
Location: Cheltenham, U.K.

Re: Transparent favicons

Postby cday » Wed Nov 09, 2016 4:24 pm

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

Postby Xanadu » Wed Nov 09, 2016 7:39 pm

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: 5085
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Postby XnTriq » Wed Nov 09, 2016 10:30 pm

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 41 times

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

Re: Transparent favicons

Postby Xanadu » Thu Nov 10, 2016 5:01 pm

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: 5085
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Postby XnTriq » Thu Nov 10, 2016 6:30 pm

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

Postby Xanadu » Thu Nov 10, 2016 6:46 pm

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: 5085
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Postby XnTriq » Thu Nov 10, 2016 7:15 pm

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

Postby Xanadu » Thu Nov 10, 2016 10:26 pm

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 2210 times

cday
XnThusiast
Posts: 1561
Joined: Sun Apr 29, 2012 9:45 am
Location: Cheltenham, U.K.

Re: Transparent favicons

Postby cday » Thu Nov 10, 2016 10:42 pm

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: 5085
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Postby XnTriq » Thu Nov 10, 2016 11:00 pm

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: 5085
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: Transparent favicons

Postby XnTriq » Fri Nov 11, 2016 8:00 pm

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.

p135757_1.png
Original: 135×102
p135757_1.png (5.64 KiB) Viewed 2017 times

p135757_2.png
Canvas resized: 135×135
p135757_2.png (5.73 KiB) Viewed 2017 times

If your input images already have the correct dimensions, you can skip these steps.


Return to “XnConvert”

Who is online

Users browsing this forum: No registered users and 4 guests