Transparent favicons
Moderators: XnTriq, helmut, xnview
Transparent favicons
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!
What am I doing wrong? Thanks!
Re: Transparent favicons
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
Did the .png have transparency?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.
I think that Pierre is saying that transparency is always lost when converting .ai files...
Re: Transparent favicons
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.
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
Test file:
logo.png (135×102)
logo.png (135×102)
- Actions » Add action> » Image » Canvas resize
- Width: 135 pixels
Height: 135 pixels
Alpha: 0
- Width: 135 pixels
- Actions » Add action> » Image » Resize
- Width: 16 pixels
Height: 16 pixels
Resample: Lanczos
- Width: 16 pixels
- Output » Format » ICO - Windows Icon
Re: Transparent favicons
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!
THANKS!
Re: Transparent favicons
Hi again, Xanadu (-:
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.)
Sorry for the confusion! Yours truly was a little sleep-deprived \-: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!
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
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?
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
Your original PNGs already have the correct dimensions (32×32)? Could you upload a sample PNG which was converted from AI?Xanadu wrote:How are the instructions different than using a correctly-sized original .png as the source file and an .ico as the output?
AFAIK, web browsers will scale the image (ICO/GIF/PNG) to the required dimensions. For Firefox's tabs, this would be 16×16.Xanadu wrote:I thought favicons were supposed to be 32x32. Is that not right?
Re: Transparent favicons
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!!
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 (8.1 KiB) Viewed 3885 times
Re: Transparent favicons
You should be able to upload an .ico file if you place it in a ZIP or other archive...
Re: Transparent favicons
Xanadu wrote:Is there a way to submit a .png file to browser for the favicon?
- Copy & paste the following “code”…
… to a text editor and save it as test.htm.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.
- XnView Forum: Orange favicon on xnview pages?
- CSS Tricks: Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?
- Jonathan T. Neal: Understand the Favicon
- RealFaviconGenerator: Favicon - Why you're doing it wrong
Re: Transparent favicons
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.Xanadu wrote:I did image>canvas resize to 48px and also image>resize to 48x even though the original image is 48px.
If your input images already have the correct dimensions, you can skip these steps.