diff --git a/index.html b/index.html index 2c71818..30c657b 100644 --- a/index.html +++ b/index.html @@ -37,11 +37,10 @@ - - - - - + + + +
diff --git a/package.json b/package.json index d91fba1..4dd5bd6 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "type": "module", "scripts": { "build": "vite build", - "build-icons": "svgo --multipass assets/pentagon.svg assets/s2f.svg assets/share2fedi.svg -o assets/pentagon.min.svg assets/s2f.min.svg assets/share2fedi.min.svg", "dev": "vite", "fmt": "prettier --write .", "lint": "prettier --check . && eslint . && stylelint '**/*.scss'", diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index 7ca9079..bda057a 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 5295823..4fdca35 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/icon-192.png b/public/icon-192.png index 3581344..0e9aec6 100644 Binary files a/public/icon-192.png and b/public/icon-192.png differ diff --git a/public/icon-512.png b/public/icon-512.png index 2a6f529..97758ec 100644 Binary files a/public/icon-512.png and b/public/icon-512.png differ diff --git a/public/icon.svg b/public/icon.svg index d1b883a..987bfa4 100644 --- a/public/icon.svg +++ b/public/icon.svg @@ -1 +1,25 @@ - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/mastodon.svg b/public/mastodon.svg deleted file mode 100644 index 90a59b5..0000000 --- a/public/mastodon.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/script/build-icons b/script/build-icons new file mode 100755 index 0000000..4848732 --- /dev/null +++ b/script/build-icons @@ -0,0 +1,25 @@ +#!/bin/bash +# This script converts raw SVG icons to favicons according to the article: +# https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs + +set -euo pipefail + +if ! type "magick"; then + echo "ImageMagick ('magick') not found; exiting" + exit 1 +fi + +echo "[1/4] Making 'favicon.ico' for legacy browsers..." +magick convert -background none assets/pentagon.svg -alpha Set -define icon:auto-resize="32,16" -channel RGBA -depth 8 public/favicon.ico + +echo "[2/4] Making 'icon.svg' for modern browsers..." +cp -f assets/pentagon.svg public/icon.svg + +echo "[3/4] Making 'apple-touch-icon.png'..." +magick convert assets/s2f.svg -resize 140x140 -background white -gravity center -extent 180x180 public/apple-touch-icon.png + +echo "[4/4] Making 'icon-*.png' icons for PWAs..." +magick convert -background none assets/s2f.svg -alpha Set -resize 192x192 public/icon-192.png +magick convert -background none assets/s2f.svg -alpha Set -resize 512x512 public/icon-512.png + +echo "Done."