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 Ms P. Correia.

Here is the CSS element which I am using to display the source code in this post: /* Custom styling ----------------------------- */ .displaybox, .displaybox pre { font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; color: black; background-color: RGB(245,218,199); border: 1px dashed #999999; line-height: 14px; padding: 5px; overflow: auto; width: 100% }

I added this code to my blog template in the <b:skin&gt section of the template just about the Comments section.

Here is a sample of the output for a simple C function.  No changes had to be made to the source code except to change the include header angle brackets to &lt; and &gt; respectively. #include <shell.h> int b_hello(int argc, char *argv[], void *extra { if (argc != 2) { printf("Usage: hello arg\n"); return(2); } printf("Hello %s\n", argv[1]); return(0); }

This custom CSS element in my blog template will not eliminate the need to make any changes to source code before including the code in a post but it does simplify things.   With this CSS element in place, the only parts of the source code that I should have to manually edit in order to display correctly are angle brackets, ampersands and quotation marks.

UPDATE 07/01/2009 This post was written when I was using Blogspot. I am now using WordPress on my own web site.