PIYO - Tech & Life -

Webサイト用のアイコンをまとめて生成するサイト

Web Tips

アプリ用アイコンを生成するサイトは前に紹介しました。

モバイルアプリ用の全アイコンサイズを1枚の画像から書き出せるサイト - PIYO - Tech & Life -
モバイルアプリのアイコンを全部用意するの面倒ですよね。毎度必要なサイズが変わるし。 僕は大きめの正方形画像を用意して、それを元に一括で縮小して生成してくれるサイトを使っています。ちゃんと調べていないので

Web用のアイコンを一括生成する

Webでも似たようなサイトを使ってまとめてガッと作っちゃうことができます。

色々ありそうですが僕はこれを使うかな。最初に見つけたので。

Favicon & App Icon Generator
Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.

ファイルをアップロードする

ベースとなるアイコンを選択し、少し設定をいじって「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>内に挿入するためのコードで、パスさえ気をつければほぼそのまま使えます。

このタグを思い出して書くのが面倒だからこのサイトを使っていると言っても過言ではないです。