このページでは 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が必要です。このサイズの画像が含まれていなくてもブラウザが自動で縮小表示します。
32x32画像しか持っていない場合は、32x32と16x16に同じ画像を指定します。
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">
動作環境(2022-09-17時点)
・Google Chrome 105
・Microsoft Edge 105
・Mozilla Firefox 104
・Apple Safari 15.6
2009年初版
2022年9月改訂
このサイトについてのお問い合わせは
エーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。
