Skip to main content
offended icon

Springheel and Favicons

This started out as an F.A.Q. entry in the Springheel, but ended up a bit more complex than I'd expected. The short version is:

  • Springheel itself does not and cannot add favicons to generated sites.
  • This is unlikely to change for the foreseeable future.
  • You do (theoretically) have the ability to hack a favicon in on your own, but I can't offer much in the way of support.

Favicons are a disaster. At minimum, you need to create seven different icons and manually point your pages to every one. Most guides recommend a dozen or more sizes, and the cited article by Mr. Meiert describes tools that add 31 or even 45 icons. I can't emphasize enough that most of these are PNGs of different dimensions, and yet browsers are apparently incapable of taking a (say) 196x196 image and scaling it down to 192x192. Not to mention:

The current HTML5 specification recommends specifying multiple sizes for the icons, using the attributes rel="icon" sizes="space-separated list of icon dimensions" within a <link> tag.[45] Multiple icon formats, including container formats such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon's content type in the format type="file content-type" within the tag.

As of iOS 5, Apple mobile devices ignore the HTML5 recommendation and instead use the proprietary apple-touch-icon method [...]

Wikipedia article on favicons as of publication (emphasis added)

My biggest priority with Springheel is simplicity. I don't want users to have to fiddle with a lot of opaque settings just to get a halfway working site. Whenever I add a new feature, I agonize over how to make its workflow as painless and straightforward as possible. (This is why linking multi-language sites wasn't added until version 5.2, when I'd been mulling it over since before 1.0.) The default is always the bare-bones option, with opt-in for those who do know what they're after.

Searching for "favicon" immediately suggests the completions "generator" and "maker" on DuckDuckGo, because no one crafts them by hand anymore. It's not easy or intuitive, and there is no "safe", plain option that works OK in most browsers. Adding the most rudimentary favicon support to Springheel would require the same features as those dedicated generator services. That would mean:

  • asking the user for multiple source images (it would also need a background layer for some mobile devices, for example)
  • new and intense image-processing dependencies to resize the files, create an .ico for Internet Explorer, etc.
  • adding a nontrivial number of extra queries to templates -- depending on the desired level of compatibility, it's possible that the majority of a page could end up being icon links
  • beefing up the file size of Springheel output by an order of magnitude, considering that most sites' non-comic assets total in the tens of kilobytes

Anything short of this would not work at all in the most common browsers, and would ultimately cause more headaches than it solved for users who did want their favicons to actually, you know, work. It would also veer away from the principle of doing "one thing well" that I more or less try to follow. Upon careful consideration, I decided that the most Spring-heeled choice was no native favicon support at all.

If we get to a point where you can write a single nice, clean line for a favicon and 99% of browsers in use will respect it -- like we do for character encoding and RSS feeds and stylesheets -- then Springheel will do exactly that. Until then, users will have to roll their own.

Here's my official recommendation for adding favicons to a Springheel site:

  1. Use one of the aforementioned generators to make your icons, because ain't nobody got time for that.
  2. Open the templates directory in your Springheel site.
  3. Insert the HTML from the generator into the <head> of each .html template. (Just remove the part that says <!-- Add favicon code here --> and put it there.)
  4. Put the icons themselves in output.
  5. Generate your site like normal.

Don't forget to re-add the icons if you ever clear out the output directory, or to re-add the icon linking code if you update or re-initialize the templates.

On a final note, modifying your site's local templates is also my recommendation for serving ads (put the JS blocks in the appropriate spots) or setting a language as right-to-left (add dir="rtl" to all <html> elements). The latter is not done automatically based on navdirection because some languages that use right-to-left navigation directionality (like Japanese) are still read from left-to-right when written horizontally.


Comments powered by Disqus