fr1nge.xyz/themes/after-dark/docs/content/feature/svg-favicon.md

+++ title = "SVG Favicon" description = "Decorate your site with a unique SVG favicon." categories = ["customizing"] tags = ["color", "style", "graphics", "branding"] features = ["code highlighter", "snippets", "related content"] copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

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

Expand to view code

{{< highlight html >}} {{< include "themes/after-dark/layouts/partials/head/favicon.html" >}} {{< /highlight >}}

{{% hackcss-alert type="info" %}}Note: HTML (Go) template comments are stripped out during site generation.{{% /hackcss-alert %}}

The favicon is a black-colored oblique triangle in the shape of a tepee as shown² 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:

{{< hackcss-grid class="-around" >}} {{< hackcss-cell class="-2of12" >}}

fill="%23f00"

{{< /hackcss-cell >}} {{< hackcss-cell class="-2of12" >}}

fill="lime"

{{< /hackcss-cell >}} {{< hackcss-cell class="-2of12" >}}

fill="%2300f"

{{< /hackcss-cell >}} {{< /hackcss-grid >}}

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:

{{< highlight go-html-template >}}

{{< /highlight >}}

See {{< external href="https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md#web-apps" text="H5BP Extend" />}} for platform-specific requirements and {{< external href="https://gohugo.io/documentation/" text="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. ↩︎