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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s