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

各種ブラウザやデバイスに対応したファビコンをまとめて生成。

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

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

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

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

 

指定可能な画像タイプはPNG,JPG,GIFです。
512x512～700x700ピクセル画像が推薦サイズです。

今までに作成頂いた数：336723 個
ダウンロードしたファイルを解凍してウェブサーバーのドキュメントルートに配置します。
HTMLには以下の内容を<head>と</head>の間に記載します。(全てが必須ではありません。下記参照)
ドキュメントルートに設置しない場合は、これらパスとmanifest.json内のパスを適宜書き換えます。
上記metaタグ(msapplication)はWindows start screen tile用です。#0078d7はこのままでも構いませんが、適宜変更可能です。 同梱されるmanifest.jsonはGoogleChrome拡張機能となります。PWA作成でも使用いただけます。
icon-16x16.png ～ icon-512x512.png は敢えてlinkタグで記述する必要はありません。特定ブラウザによっては適切な画像が選択されない問題がある為、最後に icon-32x32.png を記述しています。
(2019年3月追記)
ところでこれだけの指定がすべて必要なのかというとそうでもありません。モダンブラウザをターゲットにする場合は以下で大丈夫です。大きな画像でもブラウザまたはデバイスが適宜縮小して表示してくれます。
Windows10のタイルへの表示を想定しないならば以下でいいでしょう。
画像は以下2個を任意の場所に置き、favicon.icoをドキュメントルートに置きます。
記述は以下の2行だけです。
画像サイズによってデザインを変更する場合はそれぞれ指定しましょう。
Mac OS X El Capitan Safari では、mask icon をsvg画像で用意する必要がありましたが、現時点ではその必要は無くなり、favicon画像が使用されるようになりました。
時代と共に記述も変化しますが、あくまでも利用者の為の記述ですので様々な環境が想定されます。よって可能な限り多くを記述したほうが安心ではあります。
ファビコン画像をドキュメントルートに設置しない場合でも、favicon.icoはドキュメントルートにコピーして配置しましょう。
ブラウザがHTMLの記述にかかわらずドキュメントルートのfavicon.icoを見るようです。
様々な種類のファビコン(アイコン)を一括生成します。
生成される最大画像サイズは512×512pxです。512×512～700×700ピクセルの画像を指定します。
ブラウザやデバイスの多様化により、昔ながらのfavicon.icoだけではなくapple-touch-iconなど様々なファビコンが使用される様になりました。
このサイトでは各サイズの画像ファイルと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(ファイルが見つからない)のエラーが残ってしまいます。メンテナンスの邪魔になる不要なエラーログを残さない為にも全てのファイルを設置しましょう。
スマートフォンでの閲覧を想定しない業務サイトであっても上記理由により設置をお勧めします。
このサイトで生成されるファイルは以下の53個です。
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
site-tile-70x70.png
site-tile-150x150.png
site-tile-310x150.png
site-tile-310x310.png
manifest.json

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