HTMLファビコン
ファビコンは、ブラウザタブのページタイトルの横に表示される小さな画像です。
HTMLにファビコンを追加する方法
好きな画像をファビコンとして使用できます。次のようなサイトで独自のファビコンを作成することもできます
ヒント：ファビコンは小さな画像なので、コントラストの高いシンプルな画像にする必要があります。
次のように、ブラウザタブのページタイトルの左側にファビコンイメージが表示されます。
Webサイトにファビコンを追加するには、ファビコン画像をWebサーバーのルートディレクトリに保存するか、ルートディレクトリにimagesというフォルダーを作成して、このフォルダーにファビコン画像を保存します。ファビコン画像の一般的な名前は「favicon.ico」です。
次に、「index.html」ファイルの<link>要素の後に、次のように<title>要素を追加します。
例
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>これは見出しです</h1>
<p>これは段落です</p>
</body>
</html>
ここで、「index.html」ファイルを保存し、ブラウザで再読み込みします。ブラウザのタブには、ページタイトルの左側にファビコン画像が表示されます。
ファビコンファイル形式のサポート
次の表は、favicon画像のファイル形式のサポートを示しています。
| ブラウザ | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | はい | はい | はい | はい | はい |
| Chrome | はい | はい | はい | はい | はい |
| FireFox | はい | はい | はい | はい | はい |
| Opera | はい | はい | はい | はい | はい |
| Safari | はい | はい | はい | はい | はい |
この章のまとめ
・HTML<link>要素を使用してファビコンを挿入します。
HTMLリンクタグ
| タグ | 説明 |
|---|---|
| <link> | ドキュメントと外部リソース間の関係を定義します |
利用可能なHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。