add favicon
This commit is contained in:
parent
2b12175ffa
commit
59f166adec
3 changed files with 37 additions and 7 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
|||
bake/
|
||||
.sass-cache/
|
||||
sandbox/
|
||||
www/imgs
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue