ブラウザのタブなどでよく見かけるマークのようなもの、通称「ファビコン」と呼ばれる画像ファイルを設定したい場合の方法をご紹介します。
指定方法はいくつかありますが、今回はルートディレクトリに「favicon.ico」というファイル名でファイルを設置します。
まずはじめに、ファビコンに利用したい画像ファイルを用意しますが、画像編集ソフトで作成するか、pngファイルなどを無料変換ツールで「ico形式」に変換しましょう。
※IE以外の最新ブラウザでは「JPG」「GIF」「PNG」なども利用できますが、IEに限っては「icoファイル」にしか対応してないので、共通の「icoファイル」を用意します。
サンプルとして下図のような「favicon.png」を用意しました。
こちらを「png形式」から「ico」形式に変換します。サイズは「32×32px」にしておきます。
以前、ご紹介した「PNGからICOを自動生成してくれるWebツール(ConvertIcon)」を利用すればいいかと思います。
ConvertIconで変換された「favicon.ico」を、ご自身の任意の場所ににアップロードします。
HTMLを記述
1 |
<link rel="shortcut icon" type="画像タイプ" href="画像ファイルURL" /> |
画像タイプ
ico形式 | image/vnd.microsoft.icon |
png形式 | image/png |
jpeg形式 | image/jpg |
gif形式 | image/gif |
ico形式で指定する場合は以下のようになります。
1 |
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="../image/favicon.ico" /> |
すると、
このように表示されるかと思います。
以上になります。