SVG Favicon

Decorate your site with a unique SVG favicon.

After Dark ships with an 169B optimized1 SVG favicon embedded into every page:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">

The favicon is a black-colored oblique triangle in the shape of a tepee as shown2 on the Online Help Overview. The center of the triangle uses negative space to give the illusion of a second equilateral triangle in the shape of a pyramid, or open fire, contained within.

The color of the icon can be modified by changing the fill attribute:

fill="%23f00"
fill="lime"
fill="%2300f"

Adjust it from favicon.html in the site layouts/partials/head directory:

├── content
├── layouts
│   └── partials
│       └── head
│           └── favicon.html
├── static

If the file doesn’t exist yet, copy it from the theme default:

$ mkdir -p layouts/partials/head
$ cp themes/after-dark/layouts/partials/head/favicon.html layouts/partials/head

If optimizing for platform experiences do so from within favicon.html:

1<meta name="apple-mobile-web-app-capable" content="yes">
2<meta name="apple-mobile-web-app-status-bar-style" content="black">
3<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
4<link rel="apple-touch-icon" href="data:image/png;base64,{{ readFile "static/icon.png" | base64Encode }}">

See the H5BP Wiki for platform-specific requirements and Hugo Documentation for help with templating functions and variables.


  1. See Optimizing SVGs in data URIs for help optimizing your own SVGs.
  2. Learn how to apply SVG animation with SMIL.