Website icons

Data URI Scheme

We use the data URIs to store icons for websites.

A data URI looks like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

Benefits of storing icons using data URIs

• Speed. No additional requests for loading.
• Privacy. Some users might not want the script to load favicons directly.
• Reliability. The icon will still work even if the website is down or the URL has changed.

Requirements

• PNG image format
• 16x16 size
• Considerably small (a couple of hundred bytes)

Don't fret, they are easy to create.

Create data URI from Favicon

1. Download the favicon
   Most websites have a favicon and we can use it for creating our website icon (replace example.com with the actual domain):

• Use the Google service: https://www.google.com/s2/favicons?domain_url=example.com or
• Use the Duckduckgo service: https://icons.duckduckgo.com/ip2/example.com.ico
  (This will give you an ICO file format, so make sure to convert this to PNG using Gimp or another image editing software.)

2. Make sure the icon has a size of 16x16 pixels and PNG format. Consider to optimize the image for size.

3. Convert to data URI
   Use a service like this or this to generate the data URI from the image.

Optional: Optimize to achieve smallest possible size

1. Open the favicon in Gimp or your favourite image editing software.
2. Remove alpha layer (only if the image does not have any transparent areas).
3. Convert to indexed colors. Try something between 8 and 64 colors depending on the image.
4. Save and run through PNG optimizer.

The size should be somewhere between 100-500 bytes.

Create data URI on the command line

If you like working on the command line this is how it's done:

1. Download the favicon.
2. Convert to 16x16 pixels PNG if necessary.
3. (optional) Use pngcrush input.png output.png to optimize file size.
4. Use base64 -w0 < output.png to create base64 representation.
5. Assemble the data URI like so: data:image/png;base64,{BASE64}