ファビコン favicon.ico 作成 リアルタイム 16×16,32×32,48×48の3サイズ版

16×16px用画像を
選択 or ドロップ

32×32px用画像を
選択 or ドロップ

48×48px用画像を
選択 or ドロップ

16x1632x3248x48
16x1632x3248x48
16x1632x3248x48
16x1632x3248x48
16x1632x3248x48
16x1632x3248x48
16x1632x3248x48
16x1632x3248x48

ウェブコーダーやブロガーに必須アイテム。半透過マルチアイコンが作れます。

ファビコン favicon.ico 作成 リアルタイム版

ウェブブラウザで、タブやURLのとなりに表示されているアイコンがfaviconです。 16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。
処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。個人利用無料、商用利用無料。

旧バージョンや関連サイト：
ファビコンfavicon.ico作成 5サイズ版
ファビコンfavicon.ico作成 9サイズ版
ファビコンfavicon.ico作成 初期バージョン
ファビコンfavicon.ico作成 リアルタイム版の初版
様々なファビコンを一括生成 初期バージョン
様々なファビコンを一括生成 リアルタイム版
マルチアイコン作成
マルチアイコン作成 リアルタイム版
このページでは 16x16, 32x32, 48x48 の3つの画像を含むマルチアイコンを生成します。
16x16のみ、16x16と32x32の2個、などのアイコンも作成可能です。
入力された画像は指定サイズに拡大縮小されます。16x16の画像に100x100の画像を指定すると縮小されます。
長方形の画像を指定した場合は正方形に変形されます。
透過情報を含むPNG画像も指定可能です。
192x192の画像1枚から16x16と32x32のマルチアイコンを生成したい場合は、それぞれに192x192の画像を指定します。自動縮小されます。
指定した大きさの画像がアイコン内に作成されます。

16x16の画像のみ作成する場合は16x16に画像を指定して下さい。
32x32の画像のみ作成する場合は32x32に画像を指定して下さい。

同時に複数画像を指定すると、マルチアイコンになります。
16x16と32x32に画像を同時に指定すると2サイズのマルチアイコンになります。
16x16,32x32,48x48すべてに同時に画像を指定すると、3サイズのマルチアイコンになります。
これらの画像は、異なる画像でも同じ画像でも構いません。
画像サイズは自動で拡大縮小されます。

各サイズで最適な画像を作成しておき、その画像を指定するのが理想です。
16x16ではアルファベット1文字のデザイン、48x48ではアルファベット6文字のデザインなど。
favicon(ファビコン)とはウェブサイトやウェブページに関連付けられたアイコンのことです。ウェブブラウザではURLの左横またはタブに表示されます。お気に入りに登録するとブックマークアイコンとして表示されます。
faviconは日本では「ファビコン」と読まれることが多いです。Favorite icon(フェイバリット・アイコン）の略なので、英語ではファブアイコン(Fav-Icon)と読まれます。
多くのウェブブラウザがこのファビコンに対応しており、ブックマーク(お気に入り)リストやアドレス表示、タブブラウザではタブにファビコンが表示されます(ブックマークアイコン)
ファイル形式はICOが一般的です。GIFやPNGもサポートされています。
ファビコンのウェブブラウザでの表示では16x16サイズですが、デスクトップにショートカットを置いた場合は32x32、エクスプローラーでアイコン表示にした場合48x48サイズでの表示になります(Windowsの場合)。
ファビコンはICO形式であれば、16x16と32x32と48x48などの複数のアイコンを一つのファイルに格納する事が出来ます。これをマルチアイコンと呼びます。
マルチアイコンは画像が2,3個に限らず4個5個の格納も可能で、それぞれ全く違う画像を格納できます。

ファビコンは通常、ウェブサーバーのドキュメントルート(ドメインのルート)ディレクトリに favicon.ico を設置すれば認識されます。
ファビコンをルートに設置できない場合、また、ディレクトリごとで違うfaviconを表示させたい場合は<head>セクション内に以下の記述をすることで指定できます。(URLは適宜変更して下さい)
<link rel="icon" type="image/vnd.microsoft.icon" href="https://example.com/favicon.ico">

ドキュメントルートにfavicon.icoを配置する場合：
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">

その他ディレクトリにfavicon.icoを配置する場合の例：
<link rel="icon" type="image/vnd.microsoft.icon" href="/common/image/favicon.ico">

ファビコンをhrefで指定する場合は、アイコン名はfavicon.ico以外も使用できます。
typeには画像のmime typeを指定します。
ICO形式 --- image/vnd.microsoft.icon
GIF形式 --- image/gif
PNG形式 --- image/png
SVG形式 --- image/svg+xml

ファビコンを初めて設置した直後はすぐには表示されない場合があります。何度かリロードしたり、ブラウザのキャッシュを削除してみてください。閲覧履歴を削除することも有効です。
(2021年)
2020年以降のモダンブラウザ用にSVG画像のファビコンも広く使用されるようになってきました。SVGではダークテーマにも対応することと、何より多くの画像を用意する必要も無く軽量なSVG画像1個で全てのサイズをカバーできます。
ここに紹介しているラスター画像とは作りが全く異なりますので作り方は割愛となります。Illustratorお使いの場合は簡単に作成することができます。説明するまでもないでしょう。
私自身SVGのファビコンは待ち望んでおりましたので時代の移り変わりとともにSVGでファビコンを作成しております。
つまりこのサイトは役目を終える時が来たという事です。ただし、ベクター画像を簡単に作成できるか否かは初心者の方には難しいと思われますし、SVGに対応していないサービスも存在します。

SVGアイコンの設置例1
<link rel="icon" type="image/svg+xml" href="https://example.com/favicon.svg">

SVGアイコンの設置例2
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

SVGアイコンの設置例3
<link rel="icon" type="image/svg+xml" href="/common/image/favicon.svg">
動作環境(2024-04-21時点)
・Google Chrome 124
・Microsoft Edge 124
・Mozilla Firefox 125
・Apple Safari 17.4
2009年初版
2022年9月改訂 リアルタイム版
2022年10月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。