BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
今回はサイトで必須のファビコンについて作成方法と設定方法をご紹介いたします。

ファビコンとは?


「そのサイトのアイコン」という位置付けで、ブラウザのブックマークや、アドレスバーに表示される画像です。
画像のフォーマットにはPNG形式、GIF形式なども使えますが、古いブラウザとの互換性を確保するために、ICO形式にするのが一般的です。

利用シーン

  • ファビコン画像を設定したい時
  • すべてのWebページでファビコンは設定しておいた方がいい

ファビコンの設定方法

ファビコンを設定するににはHTMLのheadタグの中に下記タグを追加します。

このlinkタグには、href属性とtype属性を含める必要があります。このうちhref属性には、ファビコンの画像パスを指定します。
また、type属性はファビコンにICO形式の画像を使用するなら常に「image/vnd.microsoft.ico」を指定します。

ファビコン配置場所

ファビコン画像は一般的にそのWEBサイトのルートディレクトリ直下に保存します。
そのため多くの場合はhref属性は、ローと相対パスを使用します。

補足:ファビコンは必ず読み込まれます

主要なブラウザはHTMLに”shortcutico”の記述が書かれていなくても、ルートディレクトリに「favicon.ico」というファイルがあるかどうか探して、あればファビコンに利用します。そのため「favicon.ico」をルートディレクトリに保存指定さえすれば”shortcutico”の記述を書く必要はありません。

逆にルートディレクトリにfavico.icoがなく、linkタグもない場合、「ファイルが見つからない」というエラーが発生します。
このエラーは発生するまでに少し時間がかかることから、若干のページ読み込み速度が遅くなるといわれています。
また、存在しないファイルをWebサーバーが一生懸命探すことになるので、わずかではありますがサーバーの負荷が増大します。

faviconファイルは「飾り」ではなく「必ず作るもの」と覚えておきましょう!

ファビコンファイルの作り方

ファビコンの「.ico」ファイルはPhotoshopでは作成できません。
macOSであれば標準でインストールされている「プレビューappで」作成できます。
またWeb上に便利で無料な作成サービスもありますので、「ファビコン、作成」などで検索してみてください。

参考画像作成サイト
・ファビコン favicon.icoを作ろう!
https://ao-system.net/favicon/

まとめ

ファビコンは「飾り」だと思っている方も多いと思いますが、「エラー発生での読み込み速度低下」や「サーバーの負荷」になったりするので、サイト作成の際には必ず設定しましょう。