Last active
August 4, 2025 16:34
-
-
Save lordofthedanse/911b9b952de7d79c25986e7a47e96565 to your computer and use it in GitHub Desktop.
Making Favicons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Cheers to https://railsdesigner.com/favicons-in-rails/ | |
``` | |
inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png" | |
magick ./tmp.png ./public/favicon.ico | |
rm ./tmp.png | |
inkscape ./icon.svg --export-width=512 --export-filename="./public/icon-512.png" | |
inkscape ./icon.svg --export-width=192 --export-filename="./public/icon-192.png" | |
inkscape ./icon.svg --export-width=180 --export-filename="./public/apple-touch-icon.png" | |
npx svgo --multipass icon.svg | |
cat <<EOF > ./public/manifest.webmanifest | |
{ | |
"name": "Rails Designer", | |
"icons": [ | |
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, | |
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } | |
] | |
} | |
EOF | |
cat <<EOF > app/views/shared/_favicons.html.erb | |
<link rel="icon" href="/favicon.ico" sizes="32x32"> | |
<link rel="icon" href="/icon.svg" type="image/svg+xml"> | |
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> | |
<link rel="manifest" href="/manifest.webmanifest"> | |
EOF | |
``` | |
# In layout: | |
# = render partial: "shared/favicons" | |
# To see it take effect, you probably need to clear the cache (or open an incognito browser). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment