base64 images in HTML pages

I have found out that it is possible to embed images in a HTML page as base64 strings! I like the idea of having everything as text. I use it to display the favicon on the front page of my web site.

This is very easy:

Convert your favicon to base64:

$ base64 -w 0 favicon.ico

The -w switch is to have the whole string as a single line.

Include this entry in the <head> section of your HTML page:

<link href="data:image/x-icon;base64,AAABAAE...fAAD//wAA" rel="icon" type="image/x-icon" />

I cut the base64 string a little for better visibility.

Another cool use of base64.

Avatar
Lydéric Landry
écrivain et éditeur

Après plusieurs vies, j'écris maintenant