docs: document favicon generation; chore: add generate-favicon script and yarn task

This commit is contained in:
2025-08-16 13:22:00 -06:00
parent 7e4b13606c
commit 89a75c94ca
3 changed files with 55 additions and 0 deletions

View File

@@ -73,3 +73,17 @@ bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
## Favicons
The SVG favicon is the source of truth: `public/favicon.svg`.
Generate a multi-size `favicon.ico` from the SVG using rsvg-convert + ImageMagick:
```bash
yarn favicons
```
Notes:
- ImageMagick on macOS can have issues loading arbitrary TTFs by file path (RenderFreetype errors). To avoid font lookup issues entirely, this project rasterizes the SVG directly using `rsvg-convert` and then packages the sizes into a single ICO using ImageMagick.
- If browsers fail to load webfonts in an external SVG, consider converting the “b” glyph to paths inside the SVG to guarantee pixel-identical rendering across formats.

View File

@@ -7,6 +7,7 @@
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"favicons": "bash tools/generate-favicon.sh",
"postinstall": "nuxt prepare"
},
"dependencies": {

40
tools/generate-favicon.sh Executable file
View File

@@ -0,0 +1,40 @@
#!/usr/bin/env bash
set -euo pipefail
# Generates a multi-size favicon.ico from public/favicon.svg
# Dependencies:
# - rsvg-convert (from librsvg)
# - ImageMagick (magick)
# macOS install:
# brew install librsvg imagemagick
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
ROOT_DIR="$(cd "${SCRIPT_DIR}/.." && pwd)"
SVG_PATH="${ROOT_DIR}/public/favicon.svg"
OUT_ICO_PATH="${ROOT_DIR}/public/favicon.ico"
if ! command -v rsvg-convert >/dev/null 2>&1; then
echo "ERROR: rsvg-convert not found. Install with: brew install librsvg" >&2
exit 1
fi
if ! command -v magick >/dev/null 2>&1; then
echo "ERROR: ImageMagick (magick) not found. Install with: brew install imagemagick" >&2
exit 1
fi
tmp_dir="$(mktemp -d)"
cleanup() { rm -rf "${tmp_dir}"; }
trap cleanup EXIT
sizes=(16 32 48 64)
pngs=()
for s in "${sizes[@]}"; do
out_png="${tmp_dir}/favicon-${s}.png"
rsvg-convert -w "${s}" -h "${s}" "${SVG_PATH}" -o "${out_png}"
pngs+=("${out_png}")
done
magick "${pngs[@]}" "${OUT_ICO_PATH}"
echo "Generated ${OUT_ICO_PATH}"