add favicon

This commit is contained in:
Emile Clark-Boman 2026-02-05 00:32:48 +10:00
parent 2b12175ffa
commit 59f166adec
3 changed files with 37 additions and 7 deletions

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
bake/
.sass-cache/
sandbox/
www/imgs

View file

@ -1,12 +1,31 @@
#!/usr/bin/env bash
# TODO: write this as a Makefile maybe?
set -euo pipefail
# ===== Configuration ===== #
IMGS_DIR="imgs"
BAKE_DIR="www/baked"
IMGS="imgs"
BAKED="www/imgs"
FAVICON="$BAKED/favicon"
# ========================= #
mkdir -p "$BAKE_DIR"
magick -background '#000000' -size 100x100 "$IMGS_DIR/mirror-icon.svg" "$BAKE_DIR/mirror-icon.png"
magick "$IMGS_DIR/c00L_y2k_g1rL.png" -resize 50% "$BAKE_DIR/avatar.png"
mkdir -p "$BAKED"
mkdir -p "$FAVICON"
echo 'Generating mirror icon'
magick -background '#000000' -size 100x100 "$IMGS/mirror-icon.svg" "$BAKED/mirror-icon.png"
# resize avatar
echo "Resizing avatar"
magick "$IMGS/c00L_y2k_g1rL.png" -resize 50% "$BAKED/avatar.png"
# crop avatar
echo 'Cropping avatar'
magick "$IMGS/c00L_y2k_g1rL.png" -crop '%wx%w+0+180' "$BAKED/avatar_crop.png"
# create favicon
echo 'Generating favicon.ico'
magick -define icon:auto-resize=16,32,48,64,128,256 -compress zip "$BAKED/avatar_crop.png" "$FAVICON/favicon.ico"
# create separate png favicon alternatives
for n in 16 32 48 64 128 256; do
echo "Generating favicon-${n}x${n}.png"
magick "$BAKED/avatar_crop.png" -resize "${n}x${n}" "$FAVICON/favicon-${n}x${n}.png"
done

View file

@ -5,6 +5,16 @@
<meta charset="utf-8" />
<title>have you tried crying more?</title>
<!-- !! Favicon !! -->
<link rel="icon" href="imgs/favicon/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="imgs/favicon/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="imgs/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="imgs/favicon/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="64x64" href="imgs/favicon/favicon-64x64.png" />
<!-- TODO: add 96x96 -->
<link rel="icon" type="image/png" sizes="128x128" href="imgs/favicon/favicon-128x128.png" />
<link rel="icon" type="image/png" sizes="256x256" href="imgs/favicon/favicon-256x256.png" />
<script src="js/main.js" type="module"></script>
<!-- Theming -->