Item — HN Reader

Awkward ad intermission

Tired of all the "404 Not Found: /favicon.ico" log messages from your local test server? Fret no more! Just add this minor incantation to your HTML and you're set!

  <link rel="icon" href="data:," />

3 comments

I prefer this:

    <link rel="icon" href="data:image/svg+xml,%3csvg%3e %3c/svg%3e">

Why is that preferable?

Because it’s a valid image.

No it’s not: the root <svg> element must exist in the http://www.w3.org/2000/svg namespace, or the file won’t be valid SVG and won’t be rendered.

Alas for my beautiful short form that won’t work after all:

  <link rel=icon href=data:image/svg+xml,<svg/%3E>

I’ll just have to settle for this:

  <link rel=icon href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>">

Note, however, that by making it a valid SVG file, the browser will render an empty favicon, rather than saying “this page has no favicon” and either leaving the space out or putting some default icon in instead. Consequently, `data:,` is almost certainly preferable.

(If you’re not sure why I worded the namespaces remark so rather than just talking about an xmlns attribute, here’s some valid SVG: <foo:svg xmlns:foo="http://www.w3.org/2000/svg"/>.)

Because it has all the cool benefits of SVG :p

why not just

  touch favicon.ico

so it gets cached and forget about it?

Too easy

Seems like the author is ahead of you, inlining the svg in your head tag should fix that too?