Favicon Issues

Today I decided to add some color to my blog by adding a picture to my profile and to the title bar.   As soon as I have my profile picture in place, I decided that it would be a good idea to use this same picture to add a favicon to my blog.  Bad mistake!  Turns out that Blogger.com does not allow you to upload a favicon (AKA shortcut icon) file.  Instead you are expected to link to a shortcut icon file residing on another host.

Well, I decided that I did not want to set up another account on another host just to display a favicon so I figured that there must be some way of embedding the shortcut icon in my Blogger template.  After some experimentation I have managed to embed a shortcut icon in my template such that the shortcut icon is displayed correctly with Firefox.

Here is the code I inserted into my template just after the <title> line.

<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,
AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAABILAAASCwAAAAEA
AAABAAAHCgwACAoMAAoLDAAGDRIACA0RAAgOFAANEBIADxITABQREQAUFBIAEBUYABIXHQAYFRMA
DhgjABEcLAAbHyUAFyIsABwmLgAbIjUAGSs5ACMeGAAoIx8AJiUjACEgKQAlJigAJycoACUlLwAp
JikALSotACAuNgAhLjkAKikyAC4tMgAiMTsAJjQ9AC8xMQAqMTsAKzM9AC0yPAA5MSwAMjcwADAw
OwA0Pj4AODM2ADo1NgA7NTcAPDc4AB42bAAbNncAISxRACY4SQAqNkUALTZCACs7WwA4OUcAOj9I
ADE+XwAjO2QALTtvAC49agAiOnoAJjh8ACg1cgA7QjcAPENBADdHVQA7RlMAO05cADZSaQA/VWgA
QTMxAEQ5OABARjgAREg9AFdMPQBeST0Ack03AH5MMAB8UjcAT0xKAEBOWwBBUVoAS1tTAFdISQBc
UVAAQFhpAEVYaQBGXG8ASV5pAEhdbwBCXXUAUGVcAFJkXQBUZl8ARmV/AEhjdwBLZ34AT2d8AFdi
ZQBdbWQAWmdwAFlrdgBea3cAXXJqAF1yawBhTUYAa1NEAGNRXwBoVlMAa1hRAHRSQABwWksAcVpL
AHJZSQB1WEsAelhEAH1ZQgB4WksAfl5NAGRcZgBmXWsAb2VXAHJqXQB+YFAAYGluAGN0bgBjem8A
b3J5AG5+eABufX0AcGNgAH5uZwB9bnoAfHN+AHp4eAAeM4oAIjuHACo7kwAlQoAALkqFACpBlAAv
RpwALE6rADNXpwA3WKwAMlWyADNWtgA0U7oAOVaxADhetAA5W7kAOmKvADpitwA9ZL0ANEzAADdQ
wAA+Y8gAQFWQAEhngABJaIAASmuDAEdikQBNc44AT3ubAE98nwBSboQAWHaLAFl4jQBTepcAU32d
AF9/lgBOb6sAZF6CAGB1ggBgdoUAZnmHAEFzzQBSfOMAcoR8AFqIqAB5jYYAeY+IAHqOkAB9jJ4A
fpKGAH+TjAB/mJQAZoqkAGqTrgBikrUAYpO0AGKUtgBmmLwAaZOwAGqdvwB7i6EAVYfIAFGL2ABW
jt0ATpHnAFmN5wBWleQAXJ/vAGqdwQBro8oAbaPIAIBTOgCHY04Ai2BDAIhjTQCCZFAAjGdSAIpy
ZwCLd20Aj356AJN4YACPjIoAhYiSAIaNlwCBkYkAgZSMAIGVjACAlo0AgZeOAIKXkACDmZEAg5mS
AICZlACFmpIAhpiSAIaakwCGnJUAiZySAJKfjwCMopkAkaWcAJSonwCZqJgAiae2AJ+jpgCer6YA
layzAJe1rACZsKcAtpiKAKCnrACnqacAqqakAKerswChs6kAsLCwAKrBtAC0xbQAtMa0AAAAAAAA
AAAAw7V+Z2ddfvK4uuLl87Ln+X+GY1tdUj/t6rrk4ObmufDY1HyAKD8/YvrquOK0tODl1FNk+CxJ
L6Hp/PO54IF6avTWZe83Ty/FxPH823nSTkzV2q3vcVOPycrJ7tdN0dPShben98+Lk7HGx6t7cm1s
VITZr/p3MD2MkLCdR0YsLS1KeWb2eIeJm7CZkWtObnN0QBgQIDY8jZSQlY6s0HVxcQMTDQQOiJqW
mJKKEhQWJ0ujpEQyDzE+Ojg7NQYFAwIMqbO9vSIIGBsbHCALCgYBAFq9wsuoMxcaHyklHSEeEQhD
VWBeVUE0JCZCV1ZZpaanoqCgX1FYqru8vGFQYMDNzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=" />

How did I come up with this base64 image string?  First of all, I created a favicon.ico file from my profile picture using the free favicon generator at iconj.com.  Then I used another free tool Base64 Online Encoder to convert the contents of the favicon.ico file into a base64 string which I then embedded into the HTML <link> element as shown above.

Here is what it looks like when this blog is viewed using Firebox.



As you can see the favicon displays correctly on both a tabbed window and the toolbar.  However this hack does not work for any version of Internet Explorer or Safari that I know of.

Incidently, the image used to create the blog title bar came from recent photograph taken at dawn on Panglao Island, PH by Patricia Correia.