Re: Favicons

Posted by mark on Dec 21, 2019; 8:49am
URL: https://support.nabble.com/Favicons-tp7579941p7604693.html

Okay, I figured out how to fix it. It wasn't Nabble's fault! :) I just needed to make an ico file with multiple sizes packed into it. I was using an svg (which I guess works with Firefox's tabs, but not all other browsers).

I used Rob W.'s answer here: https://superuser.com/questions/491180/how-do-i-embed-multiple-sizes-in-an-ico-file

And Matt's answer here: https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16

And made the following bash script on Xubuntu Linux from that to get the appropriate ico from my svg:

#!/bin/bash
for size in 16 24 32 48 57 60 64 70 72 76 96 114 120 128 144 150 152 196 256 310; do
    inkscape -z -e $size.png -w $size -h $size mySvgFile.svg >/dev/null 2>/dev/null
done
convert 16.png 24.png 32.png 48.png 57.png 60.png 64.png 70.png 72.png 76.png 96.png 114.png 120.png 128.png 144.png 150.png 152.png 196.png 256.png 310.png -colors 256 icon.ico

I also changed the rel attribute in the link tag in my macro from "shortcut icon" to just "icon".

So, now it shows up on my Kindle Fire, and my Firefox bookmark's toolbar even updated it after a minute or so.

It works on Chromium, too, but the background isn't transparent there for some reason. It is transparent on Firefox, but it's not on my Kindle Fire. Close enough, for now, but hopefully I'll figure out how to fix that.

Edit: I tried adding -y 0.0 to the inkscape call, but it's still not transparent on Chromium and my Kindle Fire. Alas. I also added an additional size, which I saw someone using: 180x180.

This tool may be insightful: https://realfavicongenerator.net/

Edit: I decided just to use a different image that looks less strange without a transparent background.