様々なファビコンを一括生成 リアルタイム版

画像をまとめて生成

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

様々なファビコンを一括生成 リアルタイム版

favicon.ico、icon*.png、android-chrome*.png、apple-touch-icon*.pngを一括生成します。
生成ファイルは指定可能。エラーログに余計な 404 not found を記録させない対策としても有効。
処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。個人利用無料、商用利用無料。

生成するファイル(追加や書き換え可能)

画像ファイルを選択。ここをクリックまたはドロップ

 
生成するファイルはJSON形式で書き換えや追記が可能です。ファビコンにかかわらず一括で多くの縮小画像を必要とする用途でご利用いただけます。
JSONの書式が間違っている場合は「生成するファイルの記述が間違っています。」とエラーメッセージが表示されます。
書式間違いについて以下をご確認ください。
・配列として[](角形括弧)で囲まれていることを確認。
・objectデータ最終に,(カンマ)が無いことを確認。
・objectデータ区切りの,(カンマ)が抜けていないことを確認。
・objectデータの属性は"(ダブルクォート)で囲まれているか確認。
・objectデータの値は"(ダブルクォート)で囲まれているか確認。数値の場合は"(ダブルクォート)不要。
・objectデータの属性と値の区切りは:(コロン)か確認。
ダウンロードしたZIPファイルを圧縮解除してウェブサーバーのドキュメントルートに配置します。
HTMLには以下の内容を<head>と</head>の間に記載します。
ドキュメントルートに設置しない場合は、これらパスを適宜書き換えます。
icon-16x16.png ～ icon-512x512.png は apple-touch-icon 及び android-chrome アイコンで指定済みの為、敢えて記述する必要はありません。
特定ブラウザによっては適切な画像が選択されない問題がある為、最後に icon-32x32.png を記述しています。
(2019年3月追記)
ところでこれだけの指定がすべて必要なのかというとそうでもありません。モダンブラウザをターゲットにする場合は以下で大丈夫です。大きな画像でもブラウザまたはデバイスが適宜縮小して表示してくれます。
1. favicon.icoをドキュメントルートに置きます。
2. 下記画像2個を任意の場所に置き、linkタグを2個設置します。画像までのパスは適宜変更。

Mac OS X El Capitan Safari では、mask icon をsvg画像で用意する必要がありましたが、現時点ではその必要は無くなり、favicon画像が使用されるようになりました。
時代と共に記述も変化しますが、あくまでも利用者の為の記述ですので様々な環境が想定されます。よって可能な限り多くを記述したほうが安心ではあります。
これらファビコンは数が多い為、特定のディレクトリに配置するとすっきりしますが、linkタグの記述にかかわらずドキュメントルートをアクセスされ、404エラーがサーバーのログに残る場合があります。
404エラーのログを残したくない場合は、例えば以下のファイルをドキュメントルートにもデプロイするといいでしょう。
favicon.ico
apple-touch-icon-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png
様々な種類のファビコン(アイコン)を一括生成します。
生成される最大画像サイズは512×512pxです。512×512ピクセル以上の画像を指定します。
ブラウザやデバイスの多様化により、昔ながらのfavicon.icoだけではなくapple-touch-iconなど様々なファビコンが使用される様になりました。
面倒な設定や処理は不要です。画像を1枚指定するだけで完成です。
favicon.icoは 16x16, 24x24, 32x32, 48x48 を含むマルチアイコンになります。
透過PNG画像も有効です。生成される画像は全て正方形です。長方形の画像を指定した場合は正方形に変形されます。
apple-touch-iconに関しては、まずapple-touch-icon-*-precomposed.pngがアクセスされ、見つからなければapple-touch-icon-*.pngがアクセスされるようです。よって、apple-touch-icon-*-precomposed.pngを設置しないとウェブサーバーのエラーログに404 not found(ファイルが見つからない)のエラーが残ってしまいます。メンテナンスの邪魔になる不要なエラーログを残さない為にも全てのファイルを設置しましょう。
このサイトで生成されるファイルは以下です。
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-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60-precomposed.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-76x76.png
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152-precomposed.png
apple-touch-icon-152x152.png
apple-touch-icon-180x180-precomposed.png
apple-touch-icon-180x180.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

これら以外にも生成するファイルのJSONを書き換えることで自由なサイズと名称のPNG画像を生成できます。
本サイトは手軽に必要数のファビコン(アイコン)を用意することを目的としていますので、必要に応じて個々のファイルを差し替えるなど調整が望ましい場合もあります。
よくある問題として、大きな画像ではしっかり見えた字や模様が16x16や32x32ではつぶれて読めなくなったり、逆に小さいサイズが基準のデザインでは大きな画像では物足りない事もあるでしょう。
小、中、大、それぞれの大きさに適したデザインを作成して、適宜混在させることが望ましいです。
動作環境(2022-09-17時点)
・Google Chrome 105
・Microsoft Edge 105
・Mozilla Firefox 104
・Apple Safari 15.6
この記事は2016年10月当時の物です。
2022年9月改訂。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。