アイコン画像を作りたい
レトロなやり方はやめたい
Webサイト制作をしていると、ほぼ100%の確率でfaviconを作成することになると思うのですが、このfaviconの作成方法について、以外と確立されていないのが現状です。
イラストレーターで作ったり、無料のWebツールで作成したりと手段は様々ありますが、画質が荒くなったりサイズごとの画像を用意しないといけなかったり課題がたくさんです。
Electronでもアイコン画像が必要
最近のデスクトップアプリの開発でよく使われているElectronでも、アプリアイコンが必要となっています。
Electron自体はマルチプラットフォームのアプリなのでWindowsでもMacでも動くのですが、それぞれ別のアイコンファイルを作成する必要があり、これもそれぞれ作らないといけないのが手間ですね。orz
npmのicon-genを使えば一発でまとめて作成
そんなあなたにオススメなのが、icon-genです！
こちらを使えば、コマンドベースで単一の画像ファイルからサクッと様々な形式のアイコン画像をまとめて作ることが出来ます。
マルチアイコンにも対応
さらに、このicon-genの強みとして、マルチアイコンの作成にも対応している点が挙げられます。
一つのSVGからコマンド一発でWindows/mac/ホームページのそれぞれのマルチアイコンを生成出来るのは最強すぎませんかね？！
手順
インストール
まずは今回使うicon-genを以下のコマンドでインストールしましょう。
npm install icon-gen
以下のように依存パッケージ含めインストールが完了します。
└─┬ icon-gen@2.0.0
├─┬ del@3.0.0
│ ├─┬ globby@6.1.0
│ │ ├─┬ array-union@1.0.2
│ │ │ └── array-uniq@1.0.3
│ │ ├─┬ glob@7.1.3
│ │ │ ├── fs.realpath@1.0.0
│ │ │ ├─┬ inflight@1.0.6
│ │ │ │ └── wrappy@1.0.2
│ │ │ ├── inherits@2.0.3
│ │ │ ├─┬ minimatch@3.0.4
│ │ │ │ └─┬ brace-expansion@1.1.11
│ │ │ │ ├── balanced-match@1.0.0
│ │ │ │ └── concat-map@0.0.1
│ │ │ ├── once@1.4.0
│ │ │ └── path-is-absolute@1.0.1
│ │ ├── object-assign@4.1.1
│ │ ├── pify@2.3.0
│ │ └─┬ pinkie-promise@2.0.1
│ │ └── pinkie@2.0.4
│ ├── is-path-cwd@1.0.0
│ ├─┬ is-path-in-cwd@1.0.1
│ │ └─┬ is-path-inside@1.0.1
│ │ └── path-is-inside@1.0.2
│ ├── p-map@1.2.0
│ ├── pify@3.0.0
│ └── rimraf@2.6.2
├─┬ mkdirp@0.5.1
│ └── minimist@0.0.8
├── pngjs-nozlib@1.0.0
├─┬ svg2png@4.1.1
│ ├── file-url@2.0.2
│ ├─┬ phantomjs-prebuilt@2.1.16
│ │ ├── es6-promise@4.2.5
│ │ ├─┬ extract-zip@1.6.7
│ │ │ ├─┬ concat-stream@1.6.2
│ │ │ │ ├── buffer-from@1.1.1
│ │ │ │ ├─┬ readable-stream@2.3.6
│ │ │ │ │ ├── core-util-is@1.0.2
│ │ │ │ │ ├── isarray@1.0.0
│ │ │ │ │ ├── process-nextick-args@2.0.0
│ │ │ │ │ ├── string_decoder@1.1.1
│ │ │ │ │ └── util-deprecate@1.0.2
│ │ │ │ └── typedarray@0.0.6
│ │ │ ├─┬ debug@2.6.9
│ │ │ │ └── ms@2.0.0
│ │ │ └─┬ yauzl@2.4.1
│ │ │ └─┬ fd-slicer@1.0.1
│ │ │ └── pend@1.2.0
│ │ ├─┬ fs-extra@1.0.0
│ │ │ ├── graceful-fs@4.1.15
│ │ │ ├── jsonfile@2.4.0
│ │ │ └── klaw@1.3.1
│ │ ├─┬ hasha@2.2.0
│ │ │ └── is-stream@1.1.0
│ │ ├── kew@0.7.0
│ │ ├── progress@1.1.8
│ │ ├─┬ request@2.88.0
│ │ │ ├── aws-sign2@0.7.0
│ │ │ ├── aws4@1.8.0
│ │ │ ├── caseless@0.12.0
│ │ │ ├─┬ combined-stream@1.0.7
│ │ │ │ └── delayed-stream@1.0.0
│ │ │ ├── extend@3.0.2
│ │ │ ├── forever-agent@0.6.1
│ │ │ ├─┬ form-data@2.3.3
│ │ │ │ └── asynckit@0.4.0
│ │ │ ├─┬ har-validator@5.1.3
│ │ │ │ ├─┬ ajv@6.6.1
│ │ │ │ │ ├── fast-deep-equal@2.0.1
│ │ │ │ │ ├── fast-json-stable-stringify@2.0.0
│ │ │ │ │ ├── json-schema-traverse@0.4.1
│ │ │ │ │ └─┬ uri-js@4.2.2
│ │ │ │ │ └── punycode@2.1.1
│ │ │ │ └── har-schema@2.0.0
│ │ │ ├─┬ http-signature@1.2.0
│ │ │ │ ├── assert-plus@1.0.0
│ │ │ │ ├─┬ jsprim@1.4.1
│ │ │ │ │ ├── extsprintf@1.3.0
│ │ │ │ │ ├── json-schema@0.2.3
│ │ │ │ │ └── verror@1.10.0
│ │ │ │ └─┬ sshpk@1.15.2
│ │ │ │ ├── asn1@0.2.4
│ │ │ │ ├── bcrypt-pbkdf@1.0.2
│ │ │ │ ├── dashdash@1.14.1
│ │ │ │ ├── ecc-jsbn@0.1.2
│ │ │ │ ├── getpass@0.1.7
│ │ │ │ ├── jsbn@0.1.1
│ │ │ │ ├── safer-buffer@2.1.2
│ │ │ │ └── tweetnacl@0.14.5
│ │ │ ├── is-typedarray@1.0.0
│ │ │ ├── isstream@0.1.2
│ │ │ ├── json-stringify-safe@5.0.1
│ │ │ ├─┬ mime-types@2.1.21
│ │ │ │ └── mime-db@1.37.0
│ │ │ ├── oauth-sign@0.9.0
│ │ │ ├── performance-now@2.1.0
│ │ │ ├── qs@6.5.2
│ │ │ ├── safe-buffer@5.1.2
│ │ │ ├─┬ tough-cookie@2.4.3
│ │ │ │ ├── psl@1.1.29
│ │ │ │ └── punycode@1.4.1
│ │ │ └── tunnel-agent@0.6.0
│ │ ├─┬ request-progress@2.0.1
│ │ │ └── throttleit@1.0.0
│ │ └─┬ which@1.3.1
│ │ └── isexe@2.0.0
│ ├── pn@1.1.0
│ └─┬ yargs@6.6.0
│ ├── camelcase@3.0.0
│ ├─┬ cliui@3.2.0
│ │ ├─┬ strip-ansi@3.0.1
│ │ │ └── ansi-regex@2.1.1
│ │ └── wrap-ansi@2.1.0
│ ├── decamelize@1.2.0
│ ├── get-caller-file@1.0.3
│ ├─┬ os-locale@1.4.0
│ │ └─┬ lcid@1.0.0
│ │ └── invert-kv@1.0.0
│ ├─┬ read-pkg-up@1.0.1
│ │ ├─┬ find-up@1.1.2
│ │ │ └── path-exists@2.1.0
│ │ └─┬ read-pkg@1.1.0
│ │ ├─┬ load-json-file@1.1.0
│ │ │ ├─┬ parse-json@2.2.0
│ │ │ │ └─┬ error-ex@1.3.2
│ │ │ │ └── is-arrayish@0.2.1
│ │ │ ├── pify@2.3.0
│ │ │ └─┬ strip-bom@2.0.0
│ │ │ └── is-utf8@0.2.1
│ │ ├─┬ normalize-package-data@2.4.0
│ │ │ ├── hosted-git-info@2.7.1
│ │ │ ├─┬ is-builtin-module@1.0.0
│ │ │ │ └── builtin-modules@1.1.1
│ │ │ ├── semver@5.6.0
│ │ │ └─┬ validate-npm-package-license@3.0.4
│ │ │ ├─┬ spdx-correct@3.0.2
│ │ │ │ └── spdx-license-ids@3.0.2
│ │ │ └─┬ spdx-expression-parse@3.0.0
│ │ │ └── spdx-exceptions@2.2.0
│ │ └─┬ path-type@1.1.0
│ │ └── pify@2.3.0
│ ├── require-directory@2.1.1
│ ├── require-main-filename@1.0.1
│ ├── set-blocking@2.0.0
│ ├─┬ string-width@1.0.2
│ │ ├── code-point-at@1.1.0
│ │ └─┬ is-fullwidth-code-point@1.0.0
│ │ └── number-is-nan@1.0.1
│ ├── which-module@1.0.0
│ ├── y18n@3.2.1
│ └── yargs-parser@4.2.1
└── uuid@3.3.2
次に、以下のコマンドでpackage.jsonを作成しましょう。
対話は基本空欄でいいのでエンター連打でOKです。
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (icon-gen)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/blogenist/tmp/work/javaScript/npm/icon-gen/package.json:
{
"name": "icon-gen",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"icon-gen": "^2.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
すると、以下のようにpackage.jsonが生成されます。
.
├── node_modules # 省略
└── package.json
package.jsonの中身はこんな感じ。
{
"name": "icon-gen",
"version": "1.0.0",
"description": "",
"main": "script.js",
"dependencies": {
"icon-gen": "^2.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
スクリプトの準備
では、実際にicon-genを使うスクリプトを用意しましょう。
今回は同階層にあるblogenist_icon.svgと言うsvg画像から生成してみます。
まずは、script.jsと言うファイルを用意して以下の内容をコーディングしてください。
※${XXX}は適時変えてください
const icongen = require('icon-gen');
icongen('${iconにしたいファイル}', '${出力先ディレクトリ}', { report: true })
.then((results) => {
console.log(results)
})
.catch((err) => {
console.error(err)
});
出力先ディレクトリの作成
ここで指定したディレクトリが存在しない場合は自動生成されないため、エラーが発生するので存在するディレクトリを指定する必要があります。
> icon-gen@1.0.0 start /Users/blogenist/tmp/work/javaScript/npm/icon-gen
> node script.js
Error: Output directory is not found.
at GenerateIcon (/Users/blogenist/tmp/work/javaScript/npm/icon-gen/node_modules/icon-gen/dist/lib/icon-generator.js:209:27)
at Object.<anonymous> (/Users/blogenist/tmp/work/javaScript/npm/icon-gen/script.js:3:1)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
package.jsonに起動スクリプトの追加
次に、package.jsonに起動スクリプトを定義します。
{
"name": "icon-gen",
"version": "1.0.0",
"description": "",
"main": "script.js",
"dependencies": {
"icon-gen": "^2.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1", // Json形式なのでカンマ(,)をお忘れなく
"start": "node script.js" // 追加
},
"author": "",
"license": "ISC"
}
実行
では、実際に以下のコマンドで実行をしてみましょう。
npm run start
すると、以下のようなログが出始めて処理が開始されます。
> icon-gen@1.0.0 start /Users/blogenist/tmp/work/javaScript/npm/icon-gen
> node script.js
Icon generator from SVG:
src: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/blogenist_icon.svg
dir: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons
SVG to PNG:
Create: /var/folders/qs/XXX/T/YYY/16.png
Create: /var/folders/qs/XXX/T/YYY/24.png
Create: /var/folders/qs/XXX/T/YYY/32.png
Create: /var/folders/qs/XXX/T/YYY/48.png
Create: /var/folders/qs/XXX/T/YYY/57.png
Create: /var/folders/qs/XXX/T/YYY/64.png
Create: /var/folders/qs/XXX/T/YYY/72.png
Create: /var/folders/qs/XXX/T/YYY/96.png
Create: /var/folders/qs/XXX/T/YYY/120.png
Create: /var/folders/qs/XXX/T/YYY/128.png
Create: /var/folders/qs/XXX/T/YYY/144.png
Create: /var/folders/qs/XXX/T/YYY/152.png
Create: /var/folders/qs/XXX/T/YYY/195.png
Create: /var/folders/qs/XXX/T/YYY/228.png
Create: /var/folders/qs/XXX/T/YYY/256.png
Create: /var/folders/qs/XXX/T/YYY/512.png
Create: /var/folders/qs/XXX/T/YYY/1024.png
ICNS:
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.icns
ICO:
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.ico
ICO:
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon.ico
Favicon:
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-32.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-57.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-72.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-96.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-120.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-128.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-144.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-152.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-195.png
Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-228.png
[ '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.icns',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.ico',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon.ico',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-32.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-57.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-72.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-96.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-120.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-128.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-144.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-152.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-195.png',
'/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-228.png' ]
確認
iconsディレクトリの中を見ると一通りのアイコンファイルが生成されています。
icons
├── app.icns
├── app.ico
├── favicon-120.png
├── favicon-128.png
├── favicon-144.png
├── favicon-152.png
├── favicon-195.png
├── favicon-228.png
├── favicon-32.png
├── favicon-57.png
├── favicon-72.png
├── favicon-96.png
└── favicon.ico
マルチアイコンにもしっかりなっていますね♪
終わりに
以上のように簡単にSVG画像から各種アイコン画像を生成することが出来ました。
もちろん、SVGだけでなくPNGからの生成も出来ますし、様々なオプションが備わっているので是非試してみてください♪