Last active
November 29, 2021 17:19
-
-
Save rcastellotti/88459478d98811f2b36d02b25cc57249 to your computer and use it in GitHub Desktop.
A simple bash script to create icons for your website/PWA
This file contains 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
#!/usr/bin/env bash | |
if [ $# == 0 ]; then | |
echo "Usage: $0 param1 [param2]" | |
echo "* param1: png image (best 512x512)" | |
echo "* param2: folder for images, default: static/" | |
exit | |
fi | |
#check if imagemagick is installed and fail otherwise | |
command -v convert >/dev/null 2>&1 | |
if [[ $? -ne 0 ]]; then | |
echo "Imagemagick is required to resize images!" | |
exit 1 | |
fi | |
mkdir ${2-static} | |
convert $1 -resize 36x36 ${2-static}/android-icon-36x36.png | |
convert $1 -resize 48x48 ${2-static}/android-icon-48x48.png | |
convert $1 -resize 72x72 ${2-static}/android-icon-72x72.png | |
convert $1 -resize 96x96 ${2-static}/android-icon-96x96.png | |
convert $1 -resize 144x144 ${2-static}/android-icon-144x144.png | |
convert $1 -resize 192x192 ${2-static}/android-icon-192x192.png | |
convert $1 -resize 256x256 ${2-static}/android-icon-256x256.png | |
convert $1 -resize 512x512 ${2-static}/android-icon-512x512.png | |
convert $1 -resize 57x57 ${2-static}/apple-icon-57x57.png | |
convert $1 -resize 60x60 ${2-static}/apple-icon-60x60.png | |
convert $1 -resize 72x72 ${2-static}/apple-icon-72x72.png | |
convert $1 -resize 76x76 ${2-static}/apple-icon-76x76.png | |
convert $1 -resize 114x114 ${2-static}/apple-icon-114x114.png | |
convert $1 -resize 120x120 ${2-static}/apple-icon-120x120.png | |
convert $1 -resize 144x144 ${2-static}/apple-icon-144x144.png | |
convert $1 -resize 152x152 ${2-static}/apple-icon-152x152.png | |
convert $1 -resize 180x180 ${2-static}/apple-icon-180x180.png | |
convert $1 -resize 70x70 ${2-static}/ms-icon-70x70.png | |
convert $1 -resize 144x144 ${2-static}/ms-icon-144x144.png | |
convert $1 -resize 150x150 ${2-static}/ms-icon-150x150.png | |
convert $1 -resize 310x310 ${2-static}/ms-icon-310x310.png | |
convert $1 -resize 16x16 ${2-static}/favicon-16x16.png | |
convert $1 -resize 16x16 ${2-static}/favicon-16x16.png | |
convert $1 -resize 32x32 ${2-static}/favicon-32x32.png | |
convert $1 -resize 96x96 ${2-static}/favicon-96x96.png | |
cat << EOF > links.html | |
<link rel="apple-touch-icon" sizes="57x57" href="${2-static}/apple-icon-57x57.png" /> | |
<link rel="apple-touch-icon" sizes="60x60" href="${2-static}/apple-icon-60x60.png" /> | |
<link rel="apple-touch-icon" sizes="72x72" href="${2-static}/apple-icon-72x72.png" /> | |
<link rel="apple-touch-icon" sizes="76x76" href="${2-static}/apple-icon-76x76.png" /> | |
<link rel="apple-touch-icon" sizes="114x114" href="${2-static}/apple-icon-114x114.png" /> | |
<link rel="apple-touch-icon" sizes="120x120" href="${2-static}/apple-icon-120x120.png" /> | |
<link rel="apple-touch-icon" sizes="144x144" href="${2-static}/apple-icon-144x144.png" /> | |
<link rel="apple-touch-icon" sizes="152x152" href="${2-static}/apple-icon-152x152.png" /> | |
<link rel="apple-touch-icon" sizes="180x180" href="${2-static}/apple-icon-180x180.png" /> | |
<link rel="icon" type="image/png" sizes="192x192" href="${2-static}/android-icon-192x192.png" /> | |
<link rel="icon" type="image/png" sizes="32x32" href="${2-static}/favicon-32x32.png" /> | |
<link rel="icon" type="image/png" sizes="96x96" href="${2-static}/favicon-96x96.png" /> | |
<link rel="icon" type="image/png" sizes="16x16" href="${2-static}/favicon-16x16.png" /> | |
<link rel="manifest" href="${2-static}/manifest.json" /> | |
EOF | |
cat << EOF > ${2-static}/manifest.json | |
{ | |
"short_name": "", | |
"name": "", | |
"lang": "en", | |
"description": "", | |
"start_url": "/", | |
"background_color": "#", | |
"theme_color": "#", | |
"dir": "ltr", | |
"display": "", | |
"orientation": "", | |
"display": "standalone", | |
"icons": [ | |
{ | |
"src": "/static/android-icon-36x36.png", | |
"sizes": "36x36", | |
"type": "image/png", | |
"density": "0.75" | |
}, | |
{ | |
"src": "/static/android-icon-48x48.png", | |
"sizes": "48x48", | |
"type": "image/png", | |
"density": "1.0" | |
}, | |
{ | |
"src": "/static/android-icon-72x72.png", | |
"sizes": "72x72", | |
"type": "image/png", | |
"density": "1.5" | |
}, | |
{ | |
"src": "/static/android-icon-96x96.png", | |
"sizes": "96x96", | |
"type": "image/png", | |
"density": "2.0" | |
}, | |
{ | |
"src": "/static/android-icon-144x144.png", | |
"sizes": "144x144", | |
"type": "image/png", | |
"density": "3.0" | |
}, | |
{ | |
"src": "/static/android-icon-192x192.png", | |
"sizes": "192x192", | |
"type": "image/png", | |
"density": "4.0" | |
}, | |
{ | |
"src": "/static/android-icon-256x256.png", | |
"sizes": "256x256", | |
"type": "image/png", | |
"density": "1.5" | |
}, | |
{ | |
"src": "/static/android-icon-512x512.png", | |
"sizes": "512x512", | |
"type": "image/png", | |
"density": "4.0" | |
} | |
] | |
} | |
EOF | |
cat << EOF > ${2-static}/browserconfig.xml | |
<?xml version="1.0" encoding="utf-8"?> | |
<browserconfig> | |
<msapplication> | |
<tile> | |
<square70x70logo src="/ms-icon-70x70.png"/> | |
<square150x150logo src="/ms-icon-150x150.png"/> | |
<square310x310logo src="/ms-icon-310x310.png"/> | |
<TileColor>#ffffff</TileColor> | |
</tile> | |
</msapplication> | |
</browserconfig> | |
EOF |
curl https://gist.githubusercontent.com/rcastellotti/88459478d98811f2b36d02b25cc57249/raw/ | bash -s -- favicon.png
thx @fedfontana for the update
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Since I am really fond of both my lungs,EHM, I do not own apple's hardware i cannot really test if this works, maybe I'll get my hands over something someday.
apple-touch-icon
should work, I thinkmanifest.json
isn't complete enough tho.