chrisheninger/icon-magic

:calling: :business_suit_levitating: :sparkles: Generate "Add to Homescreen" icons for Apple and Android devices from a single .png image.

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– a 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– 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"
}

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]

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-167x167.png
apple-touch-icon-180x180.png
pwa-icon-192x192.png
pwa-icon-256x256.png
pwa-icon-384x384.png
pwa-icon-512x512.png

icon-magic's Issues

Update sample to follow guidelines

Apple dictates the web app icons shouldn't have rounded corners– they will automatically do this in their UI.

• Update sample png
• Document this in readme

Android has some rules too I think- something with dynamic icons?

• Research this
• Do things

CLI error

> icon-magic 800x800.png
📏  Resizing...
❌  { Error: Command failed: gm convert: Unable to open file (/Users/chrisheninger/.nvm/versions/node/v7.10.0/lib/node_modules/icon-magic/.tmp/apple-touch-icon-167x167.png) [No such file or directory].

Need to figure out how to properly create a .tmp directory to write the resize files to, and then need to make sure the icons directory ends up wherever the user executes the script from. (and make sure not to clobber an existing directory with the same name)

Until then, cloning this repo and running npm start ./sample.png should work.

npm + cli

Make available and executable via npm install image-magic followed by image-magic ./path/to/source.png, which would then output an icons directory wherever it was executed from.

GUI

Build a GUI that is basically https://github.com/imagemin/imagemin-app

• Electron + CRApp initial setup facebook/create-react-app#1718
• Figure out why the release-build app won't load– development works OK
• Implement react-dropzone (familiar+great library)
• Figure out how to get the dropzone callback function to run the node icon-magic.js script with the dropped PNG as the argument

Read file from CLI arg

• Remove hardcoded sample.png call
• Read file from CLI arg
• Show helpful error if file isn't provided, explaining how to type the command or drag-and-drop a file into the CLI

Add favicon.png support

• Might as well generate a favicon (32x32) png while we're at it

Image Validation

• Source image must be a png
• Source image must be a square
• Source image must be greater than or equal to 512x512

Think this should be sufficient.

Update Readme

• Quick explanation with links
• Instructions