本講座ではfaviconを表示させてみましょう。

faviconとは

"favorite icon"の略で、元々はお気に入り登録時に表示される、他サイトとの差別化を目的とする画像でした。
現在はタイトルと共にブラウザのタブ上に表示されるようになっており、多くのサイトで設定されています。

タブとお気に入りに表示されるfavicon

faviconを設定しよう

faviconを設定にするにあたり、まずはfavicon用の画像を用意しましょう。
お気に入りの画像をfavicon用の画像に変換してくれるサイトがあるので、利用してみましょう。

favicon作成サイト

私はイア(看板キャラクター)の顔画像を使ってみます!

イアの画像

変換されたfavicon.icoをダウンロードしたら、index.htmlと同じ階層に配置します。

では、index.htmlにfaviconを設定していきましょう。

faviconの設定はhead要素で行います。
以下のように記述してみましょう。

<head>
  <title>はじめてのHTML</title>
  <link rel="icon" href="./favicon.ico">
</head>

ブラウザで表示を確認してみます。

faviconの表示例

タイトル横にお気に入りの画像らしきものが表示されたでしょうか?
はい、完璧!です。
(実際に設定するときには、このサイズでも認識出るように専用の画像を用意するのが良いでしょう)

同様にlink.htmltask.htmlにもfaviconを設定しておきましょう。

favicon設定の書き方

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

faviconの設定にはlinkタグを使います。

linkタグは特定のファイルを指定して、そのファイルと自身との関係性を示すためのタグです。
href属性でファイルを指定、rel属性で関係性を示します。
relは"relation(関係)"の略です。

設定可能な拡張子

今回設定したfaviconは.icoという拡張子でした。
この他に、.gif.pngという拡張子でも設定が可能です。

.icoを使うメリット

.icoはfaviconに最適な拡張子で、もちろんメリットがあります。

faviconは表示環境によって最適なサイズが変わります。
もっともよく使われるのは16px x 16px32px x 32pxですが、サポートしたい範囲によっては48px x 48px152px x 152pxまで必要になってくることもあります。 ※

.icoは、これらを1つのファイルにまとめることができます。

favicon作成サイトでは16px x 16px32px x 32px48px x 48pxの3つの画像ファイルを1つにまとめることができます。
Gieerのfaviconもこれを利用して、16px x 16px32px x 32pxの2つをまとめた.icoファイルをfaviconに設定しています。


※ Internet Explorerでピン止めされた場合やスマートフォンでホーム画面に保存された場合など、サポート範囲によって様々なサイズが必要になりますが、基本的なブラウザ上の表示のみをサポートする場合、16px x 16px32px x 32pxのみ用意すれば問題ないでしょう

おすすめの設定方法

faviconの設定方法を調べると、いろいろな記述を見かけることがあります。
これは古いブラウザを考慮して書かれているためです。
ですが、現在主流のブラウザを対象にするのであれば、今回設定した

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

という書き方がシンプルでおすすめです。

まとめ

本講座では

  • faviconについて
  • faviconの設定方法

について学びました。

faviconはあなたのサイトを表す重要な画像になります。
サイトを公開する際には是非設定してみてください!

最終コード

  • index.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのHTML</title>
  <link rel="icon" href="./favicon.ico">
  <style>
  h1 {
    color: red;
    font-size: 20px;
  }
  .outsideLink {
    color: orange;
  }
  </style>
</head>
<body>
  <h1>はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
  <a href="https://www.google.co.jp/" target="_blank" class="outsideLink">Googleへ</a>
</body>
</html>
  • link.html
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのリンク</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>
  • task.html
<!doctype html>
<html lang="ja">
<head>
  <title>HTML入門課題</title>
  <link rel="icon" href="./favicon.ico">
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

次の記事

これまでの記事

隠します!
Loading...