base64 images in HTML pages

12 février 2016

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. You can use it to display the favicon on the front page of a 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.