Favicon With Transparent Background?

[JD]

URL: aeipathy.proboards.com/

Does anyone know how to get a favicon image that has a transparent background like this site does? I've tried using different resources and I've not worked out how to do it... :S

Thanks to anyone who can help <3

[Retread]

JD , if you start with a .png image which has a transparent background, the convertor mentioned in the Help Guide article will work just fine.

www.favicon-generator.org/

I downloaded the favicon on your forum: storage.proboards.com/6900007/images/0onvXIzABDZdvLarFkVD.ico

Then I uploaded it to an ico to png convertor.

I downloaded that, then uploaded it to online image editor and made the outer background transparent.

I downloaded that, then uploaded it to www.favicon-generator.org/

That resulted in this:

Since you only have a 16px by 16px final canvas to work with, you'll want to crop the starting image such that there is no padding between the figure and the edges.

[elli]

I'd actually recommend realfavicongenerator.net/. it provides all of the images and HTML to suit multiple device types, and compresses the image files for you. All you have to do is upload the original image and select the options you want.

And these days, you aren't limited to a single 16x16 .ico file. You can use whatever size .png you want and call it the same as you would an .ico. A good standard size is 144x144 if you want to cover most devices without the extra code and files.

realfavicongenerator.net/faq#.XMikpRNKi3I

[Lynx]

Just posting to add to what elli stated above, as I checked the forum in question and they are using a 120 x 94 PNG crown image for that favicon.

[Bob]

Apr 30, 2019 8:57:30 GMT -8 JD said:

URL: aeipathy.proboards.com/

Does anyone know how to get a favicon image that has a transparent background like this site does? I've tried using different resources and I've not worked out how to do it... :S

Thanks to anyone who can help  <3

Design the favicon and save it out as a PNG. Then just use an online resource to convert it to a ICO file. Both support transparency. If it wasn't for a lack of support amongst mobile browsers I would recommend just using a PNG file. It's relatively common to do these days. But, converting to an ICO to maximize support is too easy not to do, in my opinion.

[JD]

Thank you for the help everyone!

For some reason, even when uploading a png to the favicon generator on the site I still ended up with one with a background - not sure what I did wrong there.

But the one that Em. suggested worked great! Thanks very much! <3