Skip to content

Instantly share code, notes, and snippets.

@aeakett

aeakett/gist:7771268

Last active December 30, 2015 03:39
Show Gist options
  • Save aeakett/7771268 to your computer and use it in GitHub Desktop.
Save aeakett/7771268 to your computer and use it in GitHub Desktop.
Download ZIP
Shell script to generate apple-touch-icon files and niceness for Metro tiles. Input file should be square and larger than the greatest output size (currently 310px).
Raw
gistfile1.txt
#!/bin/bash
convert $1 -resize 180x180 apple-touch-icon-180x180-precomposed.png
convert $1 -resize 152x152 apple-touch-icon-152x152-precomposed.png
convert $1 -resize 144x144 apple-touch-icon-144x144-precomposed.png
convert $1 -resize 120x120 apple-touch-icon-120x120-precomposed.png
convert $1 -resize 114x114 apple-touch-icon-114x114-precomposed.png
convert $1 -resize 76x76 apple-touch-icon-76x76-precomposed.png
convert $1 -resize 72x72 apple-touch-icon-72x72-precomposed.png
convert $1 -resize 57x57 apple-touch-icon-precomposed.png
convert $1 -resize 192x192 touch-icon-192x192.png
convert $1 -resize 70x70 metro_tile-70x70.png
convert $1 -resize 150x150 metro_tile-150x150.png
convert $1 -resize 310x310 metro_tile-310x310.png
echo
echo 'Check http://mathiasbynens.be/notes/touch-icons periodically to see if this script needs to be updated.'
echo "You'll probably want to optimize the resulting PNG files."
echo 'Also, head on over to http://xiconeditor.com/ and make yourself a nice favicon.'
echo
echo
echo 'Copy and paste the following into your HTML <head>:'
echo
echo '<!-- For non-Retina (@1× display) iPhone, iPod Touch, and Android 2.1+ devices: -->'
echo '<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->'
echo '<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: -->'
echo '<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">'
echo '<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: -->'
echo '<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">'
echo '<!-- For iPhone with @2× display running iOS ≤ 6: -->'
echo '<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">'
echo '<!-- For iPhone with @2× display running iOS ≥ 7: -->'
echo '<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">'
echo '<!-- For iPad with @2× display running iOS ≤ 6: -->'
echo '<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">'
echo '<!-- For iPad with @2× display running iOS ≥ 7: -->'
echo '<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">'
echo '<!-- For iPhone 6 Plus with @3× display: -->'
echo '<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">'
echo '<!-- For Chrome for Android: -->'
echo '<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">'
echo '<!-- Nice stuff for Metro -->'
echo '<!-- Add your name here -->'
echo '<meta name="application-name" content="Name Goes Here"/>'
echo '<!-- Set a nice background colour for your tile -->'
echo '<meta name="msapplication-TileColor" content="#f357a1"/>'
echo '<meta name="msapplication-square70x70logo" content="metro_tile-70x70.png"/>'
echo '<meta name="msapplication-square150x150logo" content="metro_tile-150x150.png"/>'
echo "<!-- You'll need to make this one on your own -->"
echo '<!-- <meta name="msapplication-wide310x150logo" content="metro_tile-310x150.png"/> -->'
echo '<meta name="msapplication-square310x310logo" content="metro_tile-310x310.png"/>'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment