Improper Way

by Tom Swan

This page shows the improper — but relatively easy — way to attach a favicon icon to an AsciiDoc document. If you can see the favicon image in your browser tab next to the label "Improper Way," then the image reference is working. If not, see proper-way.html.

Also try setting a bookmark to this page — the icon should display next to the bookmark title.


Declaration Header

To inspect this page’s source text while you read along, open improper-way.txt in a new browser tab or window.

In the source text, under a comment header you find the statement:

  include::config.adoc[]

That loads some common definitions that you can read if you want in the file config.adoc.

Farther below are the commands that reference the favicon image, in this case stored in file favicon-72x72.png in subfolder image:

  ++++
  <link rel="icon"
  type="image/png"
  href="image/favicon-72x72.png">
  ++++

The two lines of four plus signs are Asciidoctor’s "pass-through" command. The text in between is injected directly into the HTML output, in this case inserting a <link> tag with the properties shown including the href URI to the icon image file. This can also be in the form http://<path>/<file>.png.

The problem with this method is that it injects the HTML tag into the <body> of the document. It is more proper to place such statements in the <head> element, as demonstrated in proper-way.html.