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


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


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


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


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


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

16x1624x2432x3248x4864x64
16x1624x2432x3248x4864x64
16x1624x2432x3248x4864x64
16x1624x2432x3248x4864x64
16x1624x2432x3248x4864x64
16x1624x2432x3248x4864x64
16x1624x2432x3248x4864x64
16x1624x2432x3248x4864x64

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

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

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

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

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

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

各サイズで最適な画像を作成しておき、その画像を指定するのが理想です。
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">

ファビコンをlinkタグで指定する場合は、.ico形式以外も使用できます。
type属性にそれぞれの画像形式のmime typeを指定します。
例)
ICO形式
<link rel="icon" type="image/vnd.microsoft.icon" href="https://example.com/favicon.ico">
GIF形式
<link rel="icon" type="image/gif" href="https://example.com/favicon.gif">
PNG形式
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
SVG形式
<link rel="icon" type="image/svg+xml" href="https://example.com/favicon.svg">

ファビコンを初めて設置した直後はすぐには表示されない場合があります。何度かリロードしたり、ブラウザのキャッシュを削除してみてください。閲覧履歴を削除することも有効です。
(2021年)
2020年以降のモダンブラウザ用にSVG画像のファビコンも広く使用されるようになってきました。SVGではダークテーマにも対応することと、何より多くの画像を用意する必要も無く軽量なSVG画像1個で全てのサイズをカバーできます。
ここに紹介しているラスター画像とは作りが全く異なりますので作り方は割愛となります。Illustratorお使いの場合は簡単に作成することができます。
私自身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">
不要になった記述
・Windowsのタイルアイコン
Windows 8, 8.1, 10 で採用されたタイルアイコン。ウェブサイトをスタートメニューに登録する為のアイコンでしたが既に不要と言っていいでしょう。
以下のような形式でした。
<meta name="msapplication-square70x70logo" content="/site-tile-70x70.png">
<meta name="msapplication-square150x150logo" content="/site-tile-150x150.png">
<meta name="msapplication-wide310x150logo" content="/site-tile-310x150.png">
<meta name="msapplication-square310x310logo" content="/site-tile-310x310.png">
<meta name="msapplication-TileColor" content="#0078d7">
不要になった記述
・Macのmask-icon
Mac OS X v10.7(Lion)2010年で採用されたこの形式は2016年頃には廃止されています。
現在(2024年)はapple.comでも記述されていませんので完全に廃止と考えていいでしょう。
以下のような形式でした。
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#c31731">
不要になった記述
・IEのshortcut icon
IE(Internet Explorer)で有効でしたがIEが消滅した今は全く不要です。
以下のような形式でした。
<link rel="shortcut icon" href="/favicon.ico">
動作環境(2024-04-21時点)
・Google Chrome 124
・Microsoft Edge 124
・Mozilla Firefox 125
・Apple Safari 17.4
この記事は2009年当時の物です。
2022年9月リアルタイム版。
2022年10月改訂。
2024年4月改訂。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。