ブラウザのタブにアイコンを表示！静的HTMLページにファビコンを追加する方法
2024-04-02
静的HTMLページにファビコンを追加する方法
この解説では、静的HTMLページにファビコンを追加する方法について、以下の手順で説明します。
ファビコンの準備
まず、ファビコン用の画像ファイルを用意する必要があります。
- ファイル形式：
.ico、.png、.svgなど - サイズ：16x16ピクセル、32x32ピクセルなど
- 内容：サイトのロゴ、シンボルなど
ファビコンファイルの保存
次に、準備したファビコンファイルをHTMLファイルと同じ階層に保存します。
- ファイル名：
favicon.ico
HTMLコードへの記述
最後に、HTMLファイル内に以下のコードを記述します。
<link rel="icon" href="favicon.ico" type="image/x-icon">
rel="icon"：このリンクがファビコンであることを指定href="favicon.ico"：ファビコンファイルのパスを指定type="image/x-icon"：ファビコンファイルのMIMEタイプを指定
ポイント
type属性は、image/pngやimage/svg+xmlのように、ファイル形式に合わせて変更する必要があります。- 複数のサイズを用意したい場合は、
<link>要素を複数記述することができます。
補足
- 上記の手順は、基本的な方法です。環境やブラウザによっては、異なる方法が必要になる場合があります。
- ファビコンは、ブラウザによってキャッシュされることがあります。変更を反映するには、ブラウザのキャッシュをクリアする必要がある場合があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>サンプルページ</h1>
<p>ここにコンテンツを記述します。</p>
</body>
</html>
favicon.icoは、HTMLファイルと同じ階層に保存する必要があります。type属性は、ファビコンファイルのMIMEタイプに合わせて変更する必要があります。
静的HTMLページにファビコンを追加する他の方法
HTMLの<head>要素内に直接画像を埋め込む
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<link rel="shortcut icon" href="favicon.png" type="image/png">
</head>
<link>要素のrel属性をshortcut iconに設定href属性で画像ファイルのパスを指定type属性で画像ファイルのMIMEタイプを指定
CSSを使用して画像を背景として設定する
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>サンプルページ</h1>
<p>ここにコンテンツを記述します。</p>
</body>
body {
background-image: url("favicon.png");
background-repeat: no-repeat;
background-position: 16px 16px;
}
background-imageプロパティで画像ファイルのパスを指定background-repeatプロパティで画像の繰り返しを設定
JavaScriptを使用して画像を動的に追加する
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>サンプルページ</h1>
<p>ここにコンテンツを記述します。</p>
</body>
const favicon = document.createElement("link");
favicon.rel = "icon";
favicon.href = "favicon.ico";
document.head.appendChild(favicon);
- JavaScriptを使用して
<link>要素を作成 rel属性とhref属性を設定document.head.appendChild()を使用して要素をhead要素に追加
注意事項
- 上記の方法は、ブラウザや環境によっては対応していない場合があります。
- どの方法を使用する場合でも、ファビコンファイルはHTMLファイルと同じ階層に保存する必要があります。
html static favicon
