favicon.ico,apple-touch-iconなど様々なブラウザやデバイスに対応したファビコンをまとめて生成。

様々なファビコンを一括生成。favicon generator

使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、icon*.png、android-chrome*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、manifest.jsonを一括生成します。
エラーログに余計な404 not foundを記録させない対策としても有効。PWAのアイコン作成にも。

画像ファイルを選択
 
指定可能な画像タイプはPNG,JPG,GIFです。
512x512~700x700ピクセル画像が推薦サイズです。
今までに作成頂いた数:60464
ダウンロードしたファイルを解凍してウェブサーバーのドキュメントルートに配置します。
HTMLには以下の内容を<head>と</head>の間に記載します。(全てが必須ではありません。下記参照)
ドキュメントルートに設置しない場合は、これらパスとbrowserconfig.xml、manifest.json内のパスを適宜書き換えます。
上記metaタグ及び同梱されるbrowserconfig.xml内に指定されている色(#2d88ef等)はこのままでも構いませんが、適宜変更可能です。 同梱されるmanifest.jsonはGoogleChrome拡張機能となります。PWA作成で使用いただけます。
icon-16x16.png ~ icon-512x512.png は敢えてメタタグで記述する必要はありませんが、特定ブラウザによっては適切な画像が選択されない問題がある為、最終的に icon-32x32.png を記述しています。
android-chrome-*.png と icon-*.png は重複です。適宜間引いてもいいでしょう。
様々な種類のファビコン(アイコン)を一括生成します。
生成される最大画像サイズは512×512pxです。512×512~700×700ピクセルの画像を指定します。
ブラウザやデバイスの多様化により、昔ながらのfavicon.icoだけではなくapple-touch-iconなど様々なファビコンが使用される様になりました。
このサイトでは各サイズの画像ファイルとbrowserconfig.xml、manifest.jsonを生成します。
面倒な設定や処理は不要です。画像を1枚指定するだけで完成です。
favicon.icoは 16x16, 24x24, 32x32, 48x48 を含むマルチアイコンとなります。
受付可能なファイルタイプはPNG、GIF、JPGで、PNG画像ではアルファチャンネルがそのまま生かされます。生成される画像は全て正方形です。長方形の画像を指定した場合は短辺を基準に長辺のはみ出た部分は切り捨てられます。
通常のウェブサイトとしては本サイトで生成したファイルの設置でほぼ対応できるのではないかと思います。
apple-touch-iconに関しては、まずapple-touch-icon-*-precomposed.pngがアクセスされ、見つからなければapple-touch-icon-*.pngがアクセスされるようです。よって、apple-touch-icon-*-precomposed.pngを設置しないとウェブサーバーのエラーログに404 not found(ファイルが見つからない)のエラーが残ってしまいます。メンテナンスの邪魔になる不要なエラーログを残さない為にも全てのファイルを設置しましょう。
スマートフォンでの閲覧を想定しない業務サイトであっても上記理由により設置をお勧めします。
このサイトで生成されるファイルは以下の55個です。
favicon.ico (16x16,24x24,32x32,48x48の4個を含むマルチアイコン)
icon-16x16.png
icon-24x24.png
icon-32x32.png
icon-36x36.png
icon-48x48.png
icon-72x72.png
icon-96x96.png
icon-128x128.png
icon-144x144.png
icon-152x152.png
icon-160x160.png
icon-192x192.png
icon-196x196.png
icon-256x256.png
icon-384x384.png
icon-512x512.png
android-chrome-36x36.png
android-chrome-48x48.png
android-chrome-72x72.png
android-chrome-96x96.png
android-chrome-128x128.png
android-chrome-144x144.png
android-chrome-152x152.png
android-chrome-192x192.png
android-chrome-256x256.png
android-chrome-384x384.png
android-chrome-512x512.png
apple-touch-icon.png
apple-touch-icon-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-60x60.png
apple-touch-icon-60x60-precomposed.png
apple-touch-icon-72x72.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-114x114.png
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-120x120.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-144x144.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-152x152.png
apple-touch-icon-152x152-precomposed.png
apple-touch-icon-180x180.png
apple-touch-icon-180x180-precomposed.png
mstile-70x70.png
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
browserconfig.xml
manifest.json

本サイトは手軽に必要数のファビコン(アイコン)を用意することを目的としていますので、必要に応じて個々のファイルを差し替えるなど調整が望ましい場合もあります。
よくある問題として、大きな画像ではしっかり見えた字や模様が16x16や32x32ではつぶれてしまって読めなくなったり、逆に小さいサイズが基準のデザインでは大きな画像で物足りない感じになってしまう事もあるでしょう。時間の許される限り微調整と言ったところでしょうか。
背景に表示されるジグソーパズルはただの遊び心です。邪魔になってごめんなさい。
プレビューが見にくい場合はプレビュー背景色を指定してください。
この記事は2016年10月当時の物です。
2018年3月4日アイコンサイズ追加。記述間違い訂正。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
top of page