スマートフォンやWebサイトなどアイコンを使う機会は多いですが、それらはプラットフォームなどによってサイズがすべて違います。iOSであってもデバイスの画面の大きさや解像度によって異なります。これを一つ一つ作るのは大変です。 そこで一つのSVG画像さえ用意すれば後は自動で生成してくれるnpm-icon-genを使いましょう。

npm-icon-genの使い方

実行しているところです。順番に画像ファイルを生成していきます。

$ icon-gen -i DevRelCon-Tokyo-2017.svg -o ./dist -r
Icon generetor from SVG:
  src: /path/to/DevRelCon-Tokyo-2017.svg
  dir: /path/to/dist
SVG to PNG:
  Create: /var/folders/s3/q1g_r4fn0bj__vcwwk_kkg6m0000gp/T/3d82db54-5200-43d9-a0d5-43454ef1daf7/16.png
    :
  Create: /var/folders/s3/q1g_r4fn0bj__vcwwk_kkg6m0000gp/T/3d82db54-5200-43d9-a0d5-43454ef1daf7/1024.png
ICO:
  Create: /path/to/dist/app.ico
ICNS:
  Create: /path/to/dist/app.icns
ICO:
  Create: /path/to/dist/favicon.ico
Favicon:
  Create: /path/to/dist/favicon-32.png
    :
  Create: /path/to/dist/favicon-228.png

npm-icon-genを使うと一気に十数種類のアイコンファイルが生成されます。実際生成してみると、これだけの画像ファイルが必要とされていることに驚くはずです。サイズは16pxから1024pxと幅広くあります。デザインの更新などを考慮すると、npm-icon-genを使ってまとめて生成するのが手軽でしょう。

npm-icon-genはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

akabekobeko/npm-icon-gen: Icon file generator for Windows, macOS, Web