faviconの設定方法

faviconの設定方法

ブラウザのタブなどでよく見かけるマークのようなもの、通称「ファビコン」と呼ばれる画像ファイルを設定したい場合の方法をご紹介します。

 

 

tab

指定方法はいくつかありますが、今回はルートディレクトリに「favicon.ico」というファイル名でファイルを設置します。

まずはじめに、ファビコンに利用したい画像ファイルを用意しますが、画像編集ソフトで作成するか、pngファイルなどを無料変換ツールで「ico形式」に変換しましょう。

※IE以外の最新ブラウザでは「JPG」「GIF」「PNG」なども利用できますが、IEに限っては「icoファイル」にしか対応してないので、共通の「icoファイル」を用意します。

サンプルとして下図のような「favicon.png」を用意しました。

favicon

こちらを「png形式」から「ico」形式に変換します。サイズは「32×32px」にしておきます。

以前、ご紹介した「PNGからICOを自動生成してくれるWebツール(ConvertIcon)」を利用すればいいかと思います。

 

ConvertIconで変換された「favicon.ico」を、ご自身の任意の場所ににアップロードします。

 

HTMLを記述

 

画像タイプ
ico形式 image/vnd.microsoft.icon
png形式 image/png
jpeg形式 image/jpg
gif形式 image/gif

 

ico形式で指定する場合は以下のようになります。

 

 すると、

rab-new

このように表示されるかと思います。

以上になります。

 


 

タイトルとURLをコピーしました