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ピクセル画像が推薦サイズです。

今までに作成頂いた数:354066 個
ダウンロードしたファイルを解凍してウェブサーバーのドキュメントルートに配置します。
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ではつぶれて読めなくなったり、逆に小さいサイズが基準のデザインでは大きな画像では物足りない事もあるでしょう。
小、中、大、それぞれの大きさに適したデザインを作成して、適宜混在させると完璧です。
ICO形式の進化:Windows Vista (2006年) でPNGサポートが追加
ICO形式は、Windowsのアイコンファイルに用いられる画像形式です。かつてはBMP形式の画像のみを格納していましたが、Windows Vista以降、PNG形式の画像も含まれるようになりました。この変更は、高解像度ディスプレイの普及と、アイコンの拡大・縮小表示への対応のために重要な進化でした。
PNG形式がICOファイルに採用された理由は以下の通りです。
・高解像度対応: Windows Vista以降、より大きなアイコンサイズ(例:256x256ピクセル)の需要が高まりました。BMP形式ではファイルサイズが大きくなりすぎるため、圧縮率の高いPNG形式が適していました。
・透過情報の保持: PNG形式は、アルファチャンネルと呼ばれる透過情報を効率的に扱うことができます。これにより、アイコンの背景を透過させたり、複雑な形状のアイコンを作成したりすることが容易になりました。
・品質の向上: PNG形式は可逆圧縮のため、画質の劣化なく画像を保存できます。これにより、様々なサイズで表示されるアイコンの視認性が向上しました。
このPNG形式のサポートにより、Windowsのアイコンはより鮮明で柔軟な表現が可能になり、現代の多様なディスプレイ環境に適応できるようになりました。現在、ICOファイルはBMPとPNGの両方の画像データを格納できる、多機能なコンテナ形式として利用されています。
ウェブページに使用されるfavicon.ico(ファビコン)も同じです。
2016年10月初版
2018年3月改訂 アイコンサイズ追加。記述間違い訂正。
2019年3月改訂 作成されるアイコン変更。情報追記。
2025年7月改訂 favicon.icoはPNG可逆圧縮(品質を維持して圧縮)になりました。以前はBMP無圧縮でした。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。