SVG Favicon

Decorate your site with a unique SVG favicon.

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

Expand to view code 
{{/*
Copyright (C) 2019  VHS <vhsdev@tutanota.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">
Note: HTML (Go) template comments are stripped out during site generation.

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

Replace SVG with another graphic if desired:

<link rel="icon" sizes="128x128" href="/favicon.png">

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

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
<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. ↩︎