この記事をシェアする

favicon(ファビコン)を設定しておくと、ブラウザでホームページを表示した時にアドレスバーやタブ、お気に入りにオリジナルのアイコンが表示されます。

(最低限)必要なのは16×16ピクセルと32×32ピクセルのアイコン用の画像です。これらを.ico形式に変換し、名前を「favicon.ico」に変えてWebサーバーにアップロードします。

いろいろなブラウザでの見え方
いろいろなブラウザでの見え方

favicon.ico 作成方法

特にこだわりがなければオンラインのfavicon作成ツールを利用するのが便利です。

FavIcon from Pics
FavIcon from Pics

「参照」をクリックしてfaviconにしたい画像ファイルを選択し「Generate Favicon.ico」をクリックすると、favicon.icoとアニメーションのanimated_favicon1.gifの2種類が作成されます。

そのままで良ければ「Download FavIcon Package」をクリックしてファイルをダウンロードします。
また、必要に応じてアニメーションのカスタマイズや、iPhone用の画像を作成したりできます。

完成画面
完成画面

favicon.ico 設置方法

サイトのルートディレクトリにfavicon.icoをアップロードしてみましょう。その状態でブラウザのアドレスバーにfaviconが表示されればOKです。

表示されない、あるいはルート以下のディレクトリで任意のfaviconにしたい場合はHTMLファイルの<head></head>内に以下のタグを記述します。

<link rel="shortcut icon" href="favicon.ico" />

hrefの値は記述したHTMLファイルからfavicon.icoまでの相対パスです。

この記事をシェアする