reworked site icons, added generator script

README.md

@@ -1,4 +1,4 @@
-![logo](static/img/icon.svg)
+![logo](static/logo.svg)
 
 # Ficurinia
 
@@ -36,8 +36,13 @@ summaryLength = 70  # number of words for article summaries
     author = "Gabriele Musco"
     description = "A description for my website"  # this will be added as metadata
 
-    logo = "/images/mylogo.png"
-    favicon = "/images/myfavicon.png"
+    # It's best to put these icons in the "static" folder of your site
+    logo = "/logo.svg"
+    favicon = "/favicon.png"
+    faviconIco = "/favicon.ico"
+    appletouch = "/apple-touch-icon.png"
+    svgicon = "/logo.svg"
+
     showTags = true  # show the Tags menu item; default true
     showRss = true  # show the link for the RSS feed; default true
 
@@ -178,6 +183,27 @@ Following is an example configuration:
 | `featured` | Boolean, indicate if the post should be shown as featured |
 | `image` | The main image representing the post |
 
+## Generate icons
+
+It's best to use the provided `generate_icons.sh` script to generate all necessary icons for your website. This script requires ImageMagick, that you will need to install separately.
+
+For the best results, place your logo in svg format inside the `static` directory of your website, rename it to `logo.svg` and then call `./themes/hugo-ficurinia/generate_icons.sh static/logo.svg`.
+
+The script will take care of generating all the icons you need.
+
+Finally, make sure to edit your config.toml to include the following:
+
+```toml
+# ...
+[params]
+    logo = "/logo.svg"
+    favicon = "/favicon.png"
+    faviconIco = "/favicon.ico"
+    appletouch = "/apple-touch-icon.png"
+    svgicon = "/logo.svg"
+    # ...
+```
+
 ## Inject custom content
 
 Ficurinia supports injecting custom content into the theme. There are several files you can create in `layouts/partials/inject` that will be included inside the theme in different places.

generate_icons.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+if [ -z "$1" ]; then
+    echo "Usage: $0 path/to/icon.svg"
+    exit 1
+fi
+FNAME=$1
+if [ ! -f "$FNAME" ]; then
+    echo "Error: file $FNAME doesn't exist"
+    exit 1
+fi
+
+DESTDIR="$(dirname "$FNAME")"
+convert -density 1200 -background none -resize  32x32  "$FNAME" "$DESTDIR/favicon.ico"
+convert -density 1200 -background none -resize  32x32  "$FNAME" "$DESTDIR/favicon.png"
+convert -density 1200 -background none -resize 180x180 "$FNAME" "$DESTDIR/apple-touch-icon.png"
+convert -density 1200 -background none -resize 192x192 "$FNAME" "$DESTDIR/android-chrome-192x192.png"
+convert -density 1200 -background none -resize 512x512 "$FNAME" "$DESTDIR/android-chrome-512x512.png"

layouts/partials/head.html

@@ -15,7 +15,7 @@
         {{ end }}
     {{ end }}
 
-    <link rel="shortcut icon" href='{{ .Site.Params.favicon | default "/img/favicon.png" }}' type="image/x-icon" />
+    {{- partial "head_icons.html" . -}}
 
     <title>
         {{ if and (.Title) (ne .Title .Site.Title) }}

layouts/partials/head_icons.html

@@ -0,0 +1,20 @@
+<link
+    rel="icon"
+    href='{{ .Site.Params.favicon | default "/favicon.png" }}'
+/>
+<link
+    rel="shortcut icon"
+    href='{{ .Site.Params.faviconIco | default "/favicon.ico" }}'
+    type="image/x-icon"
+/>
+<link
+    rel="apple-touch-icon"
+    href='{{ .Site.Params.appletouch | default "/apple-touch-icon.png" }}'
+/>
+{{ if .Site.Params.svgicon }}
+    <link
+        rel="icon"
+        href='{{ .Site.Params.svgicon | default "/logo.svg" }}'
+        type="image/svg+xml"
+    />
+{{ end }}

layouts/partials/header.html

@@ -2,7 +2,7 @@
     {{- partial "inject/header-before.html" . -}}
     <div class="titleAndSearchContainer">
         <div id="titleContainer">
-            <img src='{{ .Site.Params.Logo | default "/img/icon.svg" }}' />
+            <img src='{{ .Site.Params.Logo | default "/logo.svg" }}' />
             <div>
                 <div class="titleAndHamburger">
                     <h1>{{ .Site.Title | default "Ficurinia" }}</h1>

static/logo.svg

@@ -13,17 +13,17 @@
    viewBox="0 0 67.733331 67.733335"
    version="1.1"
    id="svg8"
-   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
-   inkscape:export-filename="/home/gabmus/git/gabmus.gitlab.io/themes/hugo-ficurinia/static/img/favicon.png"
-   inkscape:export-xdpi="48"
-   inkscape:export-ydpi="48">
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)"
+   inkscape:export-filename="/home/gabmus/git/hugo-ficurinia/static/img/appletouch.png"
+   inkscape:export-xdpi="67.5"
+   inkscape:export-ydpi="67.5">
   <defs
      id="defs2" />
   <sodipodi:namedview
      inkscape:window-maximized="1"
-     inkscape:window-y="27"
+     inkscape:window-y="32"
      inkscape:window-x="0"
-     inkscape:window-height="1376"
+     inkscape:window-height="1371"
      inkscape:window-width="2560"
      showguides="true"
      inkscape:snap-global="true"