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.

Displaying Source Code in a Post

I generally include source code of one kind or another in my postings.  Being used to the <code>, </code> tags commonly available in user forums such as www.unix.com, I was surprised to find that no such facility was available for use on Blogger.  I searched around the Internet and came across similar complaints from other users and various suggestions and means of formating code so that it is attractively and usefully displayed in a post.  After trying a number of methods and formats developed by others and generally being unhappy with the results, I decided that my best approach was to develop and incorporate a custom CSS element for displaying source code into my Blogger layout template.

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> 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.