base: add favicon

eleventy.config.mjs

@@ -12,6 +12,8 @@ export default function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy('src/_assets/css/**/*.css')
   eleventyConfig.addPassthroughCopy('src/_assets/fonts/')
   eleventyConfig.addPassthroughCopy('src/_assets/img/')
+  /* Favicon*/
+  eleventyConfig.addPassthroughCopy({ 'src/_assets/favicon' : '/' } );
   /* Plugins*/
   eleventyConfig.addPlugin(EleventyI18nPlugin, {
     defaultLanguage: 'en',

src/_assets/favicon/icon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128" height="128" version="1.1" viewBox="0 0 33.9 33.9" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    #favicon { fill: #000000; }
+    @media (prefers-color-scheme: dark) {
+      #favicon { fill: #ffffff; }
+    }
+  </style>
+  <g id="favicon">
+    <path d="m14.6 3.18v14h-11.4v13.5h27.5v-13.5h-11.4v-14zm-6.35 16.1h9.26v4.23h-5.29v5.03h-3.97z" stroke-width="1"/>
+  </g>
+</svg>

src/_includes/layouts/base.njk

@@ -12,11 +12,8 @@
       name="description"
       content="{{ description or translations[page.lang]['description'] }}">
 
-    <link
-      rel="alternate"
-      href="/feed/feed.xml"
-      title="{{ translations[page.lang]['title'] }}"
-      type="application/atom+xml">
+    <link rel="icon" href="/favicon.ico" sizes="32x32">
+    <link rel="icon" href="/icon.svg" type="image/svg+xml">
 
     <link rel="stylesheet" href="/_assets/css/fonts.css">
     <link rel="stylesheet" href="/_assets/css/vendor.css">