Fabulous Favicons Demonstration

by Tom Swan

Select one of the following links for a demonstration of the proper and perhaps not-so-proper ways to insert an icon image — called a favicon — into an Asciidoctor-generated HTML document.

NOT SO GOOD BUT MAY WORK
PROPER AND RECOMMENDED
FULL ARTICLE

Image Files

The image folder contains the following images. Figure 1 shows the test favicon after I reduced a public-domain high-resolution image that I found on the internet down to the more icon-compatible 72x72 range (I also added the green mask):

Image
Figure 1. favicon-72x72.png

Figure 2 shows the same image zoomed in and a bit out of focus due to the extreme downscaling (favicons are supposed to be small — don’t scale them up too far or this is what you’ll get):

Image
Figure 2. Favicons get fuzzy when zoomed in too far

If you have the Gimp graphics editor (try it — it’s free), you can also open my graphics work file to which I added a green mask-border after scaling down the original from its raw size to the more common 72x72 pixel dimensions often used for icons today (other common sizes are 16x16 and 32x32). Select this link to copy or open the work file:

GIMP WORK FILE