Icon Magic 📲🕴

A Node script that uses GraphicsMagick and imagemin + imagemin-Zopfli to resize, optimize, and prefix your "Add to Homescreen" icons for Apple and Android devices from a single image source (.png).

Usage:

Make sure you have GraphicsMagick ☝️ installed on your machine and available on the command-line already.

// Clone the repository and cd into the directory
git clone git@github.com:chrisheninger/icon-magic.git && cd icon-magic

// Install dependencies via npm (or yarn)
npm install

// The script takes a single argument– a source image path (png-only)
npm start ./path/to/sample.png

// If everything is successful, you should have a directory named 'icons'
// with all the prefixed, resized, and optimized images! 🎉

// Move the outputted icons directory to your project directory
mv icons/ ../path/to/desired/directory/

Markup:

<link rel="shortcut icon" href="./path/to/icons/favicon.png">
<!-- Apple Guidelines: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html -->
<link rel="apple-touch-icon" href="./path/to/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="./path/to/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="./path/to/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="167x167" href="./path/to/icons/apple-touch-icon-167x167.png" />
<link rel="apple-touch-icon" sizes="180x180" href="./path/to/icons/apple-touch-icon-180x180.png" />
<meta name="apple-mobile-web-app-title" content="App Title">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Android Guidelines: https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/-->
<link rel="manifest" href="./path/to/manifest.json">
<meta name="theme-color" content="#009ad3">

/* Manifest.json– see Android Guidelines above for configuration options */
{
  "short_name": "App Title",
  "name": "A bit longer of an App Title",
  "start_url": "./path/to/index.html",
  "icons": [
    {
      "src": "./path/to/icons/pwa-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./path/to/icons/pwa-icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "./path/to/icons/pwa-icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "./path/to/icons/pwa-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "background_color": "#f5f5f5",
  "theme_color": "#009ad3",
  "display": "standalone",
  "orientation": "portrait"
}

Example:

npm start ./sample.png

Filename	Image
favicon.png
apple-touch-icon-60x60.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png
apple-touch-icon-152x152.png
apple-touch-icon-167x167.png
apple-touch-icon-180x180.png
pwa-icon-192x192.png
pwa-icon-256x256.png
pwa-icon-384x384.png
pwa-icon-512x512.png

Guidelines

Browser and Mobile OS vendors have different methods for handling web apps on their different devices. These are always changing and seem to be quite opinionated. If you feel that something is out-of-date with this script, feel free to open an issue and submit a pull request!

[Apple Guidelines] [Google Guidelines]

Mac OS App

A drag-and-drop standalone Mac OS App is currently in the works thanks to Create React App and Electron.

https://github.com/chrisheninger/icon-magic-app