【初心者向け】たった5分でできる！Webサイトにファビコンを設置する方法

2024-04-02

ブラウザタブアイコン（ファビコン）を追加する方法

ファビコンを追加する利点

ユーザーがウェブサイトを認識しやすくなる
ブックマークバーでウェブサイトを見つけやすくなる
ブランドイメージを向上させる

ファビコンの追加方法

ファビコン画像を用意する

ファビコンは favicon.ico という名前のファイルで用意する必要があります。サイズは 16x16ピクセル または 32x32ピクセル が一般的です。透過PNG形式やICO形式など、いくつかのファイル形式に対応しています。

HTMLファイルにコードを追加する

HTMLファイルの <head> タグ内に以下のコードを追加します。

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

コードの説明

rel="shortcut icon": ファビコンファイルであることを指定
href="favicon.ico": ファビコンファイルのパスを指定

アップロードする

作成した favicon.ico ファイルとHTMLファイルをウェブサイトにアップロードします。

確認する

ブラウザでウェブサイトを開き、タブにファビコンが表示されていることを確認します。

複数のサイズのファビコンを用意することで、さまざまなデバイスで最適な表示を実現できます。
ファビコンは、ブラウザのキャッシュに保存されるため、変更した場合はキャッシュをクリアする必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルサイト</title>
  <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
  <h1>サンプルサイト</h1>
  <p>ここにサイトの内容</p>
</body>
</html>

ポイント

ファビコンファイルの名前は favicon.ico である必要があります。
ファビコンファイルは、HTMLファイルと同じ場所に配置する必要があります。
href 属性には、ファビコンファイルのパスを指定します。

補足

複数のサイズのファビコンを用意したい場合は、link 要素を複数回記述する必要があります。

ファビコンを追加するその他の方法

HTMLファイルに直接画像を埋め込む

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルサイト</title>
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
</head>

sizes 属性で、ファビコンのサイズを指定します。

.htaccess ファイルを使用して、ファビコンのパスを指定することができます。

htaccess ファイルの内容

# ファビコンの設定
AddType image/x-icon .ico

# ファビコンの場所
FaviconIcon favicon.ico

.htaccess ファイルは、ウェブサイトのルートディレクトリに配置する必要があります。
FaviconIcon ディレクティブで、ファビコンファイルの名前を指定します。

JavaScriptを使用して、動的にファビコンを変更することができます。

JavaScriptのコード例

const favicon = document.querySelector('link[rel="shortcut icon"]');

// ファビコンを変更する関数
function changeFavicon(newFavicon) {
  favicon.href = newFavicon;
}

// イベントリスナーを追加
window.addEventListener('click', () => {
  changeFavicon('new-favicon.ico');
});