レシピ

ファビコンを設定する

  • このエントリーをはてなブックマークに追加

サイトのアイコンとなるファビコンの設置方法について解説します。

この記事のポイント

  • ファビコンを設置する方法が分かる

Webサイトのアイコンとなる「ファビコン」を設定する

ファビコンはブラウザのアイコンとして表示される、拡張子「.ico」を持った画像ファイルです。
表示されるサイズは小さいですが、サイトの特徴を表す一種の看板の役目を担っている重要な要素です。

IE11でのファビコン表示例
IE11でのファビコン表示例
Chromeでのファビコン表示例
Chromeでのファビコン表示例

ファビコンはPC版ブラウザのタブ部分のみでなく、スマホ版のブラウザでも表示されます。

iPhoneのSafariでのファビコン表示例
iPhoneのSafariでのファビコン表示例
iPhoneのChromeでのファビコン表示例
iPhoneのChromeでのファビコン表示例

ファビコンの設置はCSS同様にlink要素を使って行います。
今回はファビコン画像「favicon.ico」を設置する例として解説します。

ファビコンとして設置する画像「favicon.ico」
ファビコンとして設置する画像「favicon.ico」

head要素内で、link要素を使って「favicon.ico」を次のように指定します。

コード例

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">

指定する属性は3つ。
rel属性は「shortcut icon」、href属性は画像パス、type属性は「image/x-icon」を指定します。

ファビコンは設定されていないサイトでもブラウザが参照しようとするため、基本的にはサイトの全ページに指定することをオススメします。
また、ページの階層によってパスは変わるため、href属性のパスはルートパスで指定する方が確実です。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ