node package manager

icon-magic

Icon Magic ūüď≤ūüēī

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

Usage:

ūüõĎ ‚ö†ÔłŹ Make sure you have GraphicsMagick installed on your machine and available on the command-line. (Mac OS users with HomeBrew can brew install graphicsmagick)

// Install globally via npm (or yarn) 
npm install icon-magic -g
 
//¬†The¬†cli¬†takes¬†a¬†single¬†argument‚Ästa¬†source¬†image¬†path¬†
// (Your image must be a square .png file, larger than 512x512) 
icon-magic ./sample.png
 
// If everything is successful, you should have a directory named 'icons' 
//¬†with¬†all¬†the¬†prefixed,¬†resized,¬†and¬†optimized¬†images!¬†ūüéȬ†

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‚Ästsee¬†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 favicon
apple-touch-icon-60x60.png apple-touch-60
apple-touch-icon-120x120.png apple-touch-120
apple-touch-icon-152x152.png apple-touch-152
apple-touch-icon-152x152.png apple-touch-152
apple-touch-icon-167x167.png apple-touch-167
apple-touch-icon-180x180.png apple-touch-180
pwa-icon-192x192.png pwa-192
pwa-icon-256x256.png pwa-256
pwa-icon-384x384.png pwa-384
pwa-icon-512x512.png pwa-512

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