CodeLog

ファビコンの設定

Webサイトのトレードマークであるファビコンを設定する方法を解説します。ファビコンの設定は必須とも言えますので、サイトを運営するなら是非設定しておきましょう。

ファビコンとは?

ブラウザのタブなどに表示されるWebサイトのトレードマークの事をファビコン(favicon)と言います。「favorite icon」を短くして「favicon」と言うようになったというのが名前の由来です。

ブラウザのタブがいくつもあるような場合には、このファビコンを設定しておくことで目的のタブを探す場合に探しやすくなります。またタブだけでなく、ブックマーク一覧などにもファビコンが使われます。Webサイトやブログを運営するのであれば、ファビコンは必ず設定しておきたいところです。

ファビコンの設定方法

ファビコンを設定する場合は、まず画像を用意します。用意する画像は以下の2種類です。

  • icoファイル(48×48)
  • pngファイル(180×180)

※サイズの単位はピクセルです

用意した2種類の画像ファイルはサイトの画像フォルダなどに配置します。

次に<head>〜</head>内に以下のタグを追加します。

<link rel="icon" type="image/x-icon" href="{icoファイル}">
<link rel="apple-touch-icon" href="{pngファイル}" sizes="180x180">

これでファビコンの設定は完了です。

通常、ファビコンの設定はicoファイルだけでいいのですが、iPhoneなどで大きなアイコンとして使われることがあり小さなicoファイルを大きく表示すると綺麗に表示されない為、大きめのpngファイルも設定しています。

ファビコンが表示されない時の確認事項

設定をおこなったのにファビコンが表示されないときは、以下のことを確認してみてください。

キャッシュ

ファビコンを設定する前のHTMLがキャッシュとして残っていて表示されてない可能性があります。ブラウザをスーバーリロードするか、キャッシュをクリアしてから再度サイトを開いてみてください。

画像ファイルのパスやファイル名

<head>〜</head>内に追加したタグのicoファイルやpngファイルへのパスが正しいか確認してください。特にトップページが表示されるけど記事などの下層ページで表示されない場合はパスの間違いが疑われます。また画像ファイル名にスペースなどがないかも確認しておきましょう。

画像ファイルの形式が正しいか

pngファイルは特に問題ありませんが、icoファイルは単にサイズと拡張子を変えるだけでは正しい画像ファイル形式になっていません。GIMPなどを利用してicoファイルとして出力する必要があります。