WEBサイトにおけるファビコンについて記載します。
ファビコンを設置する効果については説明しません。
ファビコン
ファビコンを設定するとどうなるか？
ファビコンを設定すると、例えばブラウザのタブにアイコンが表示されます。
ファビコンを設定しない場合、ブラウザのタブには地球儀のようなアイコンが表示されます。
主な表示箇所
ファビコンを設定すると、主に下記に記載する箇所にアイコンが表示されます。なお、下記が全てではありません。
- ブラウザのタブ
- お気にり
- 検索サイトの検索結果
設定方法
以下のような流れでファビコンを設定します。
- ファビコン画像ファイルの作成
- icoファイルへ変換 (必須ではない)
- サーバへアップロード
- htmlへの設定の記載
ファビコン画像ファイルの作成
Photoshopなどで表示したいファビコンのイメージ画像を作成します。
画像サイズ
画像は長方形にします。
画像サイズは縦横32px(32px × 32px)の倍数が良いと言われているようです。
ファビコン自体は小さく(16px × 16px)表示されるので大き過ぎない方が良いでしょう。
拡張子
ファビコンのイメージ画像は一般的な画像ファイルの拡張子(.png .jpeg など)で良いです。
ファイル名
任意で良いです。
icoファイルへ変換
.icoファイルに変換します。ちなみに、.icoファイルに変換しなくても .pngや.jpegでもファビコンは表示されます。
.icoファイルとは
複数のサイズの画像を1つにまとめる事が出来ます。
icoファイルに複数のサイズのファビコンイメージファイルを格納させます。
.icoファイルの作成
.pmgファイルなどのファビコンイメージ画像を、icoファイルへ変換させます。icoファイル変換サービスサイトがあるのでファビコンイメージ画像をicoファイルへ変換すると良いでしょう。
ファイル名
任意でも良いですが、理由がなければ “favicon.ico” とするのが良いでしょう。
サーバへアップロード
作成したファビコンファイルをWEBサーバへアップロードします。
htmlへの設定の記載
ファビコン(favicon.ico)をhtmlが読み込む必要があります。
以下のように読み込ませます。
<link rel=“icon” href=“./favicon.ico” type=“image/x-icon”>記載方法については用途に応じてたくさんあるようです。上記は一例です。
ちなみに、ブラウザによってはhtmlへファビコンの読み込みの記載をしなくてもfavicon.icoをサーバに配置するだけで勝手にファビコンを表示してくれます。
最後に
特にありません。