SVG Favicon

Decorate your site with a unique SVG favicon.

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

{{/*
Copyright (C) 2019  Josh Habdas <jhabdas@protonmail.com>

This file is part of After Dark.

After Dark is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

After Dark is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/ -}}

<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 H5BP Extend 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.