アプリ用アイコンを生成するサイトは前に紹介しました。
Web用のアイコンを一括生成する
Webでも似たようなサイトを使ってまとめてガッと作っちゃうことができます。
色々ありそうですが僕はこれを使うかな。最初に見つけたので。
ファイルをアップロードする
ベースとなるアイコンを選択し、少し設定をいじって「Create Favicon」を押せばOK。
しばらくすると完了ページへ遷移します。
一番下のチェックが入ってると公開ギャラリーに含まれちゃうみたいなので外すのが無難です。
ファイルをダウンロード&タグ設置
完了ページにあるダウンロードリンクを押すと全ファイルをダウンロードできます。
ダウンロードされるファイルは↓の通り。
% tree .
.
├── android-icon-144x144.png
├── android-icon-192x192.png
├── android-icon-36x36.png
├── android-icon-48x48.png
├── android-icon-72x72.png
├── android-icon-96x96.png
├── apple-icon-114x114.png
├── apple-icon-120x120.png
├── apple-icon-144x144.png
├── apple-icon-152x152.png
├── apple-icon-180x180.png
├── apple-icon-57x57.png
├── apple-icon-60x60.png
├── apple-icon-72x72.png
├── apple-icon-76x76.png
├── apple-icon-precomposed.png
├── apple-icon.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── favicon.ico
├── manifest.json
├── ms-icon-144x144.png
├── ms-icon-150x150.png
├── ms-icon-310x310.png
└── ms-icon-70x70.png
実際にはfaviconだけあれば良いケースが多い気もしてますが、が、iOSでホーム画面に追加するときにはapple-icon-*
が使われるので僕は自サイトには一応入れています。
またこのページには、HTMLのコードが載っています。これは<head>
内に挿入するためのコードで、パスさえ気をつければほぼそのまま使えます。
このタグを思い出して書くのが面倒だからこのサイトを使っていると言っても過言ではないです。