HTMLファビコン
ファビコンは、ブラウザタブのページタイトルの横に表示される小さな画像です。
HTMLでファビコンを追加する方法
ファビコンとして好きな画像を使用できます。https://favicon.ccなどのサイトで独自のファビコンを作成することもできます。
ヒント：ファビコンは小さな画像であるため、コントラストの高いシンプルな画像である必要があります。
ブラウザタブのページタイトルの左側に、次のようにファビコン画像が表示されます。
Webサイトにファビコンを追加するには、ファビコンイメージをWebサーバーのルートディレクトリに保存するか、ルートディレクトリにimagesという名前のフォルダを作成して、ファビコンイメージをこのフォルダに保存します。ファビコン画像の一般名は「favicon.ico」です。
次に、次のように、要素<link>の後に「index.html」ファイルに要素を追加します。<title>
例
<!DOCTYPE html>
<html>
<head>
<title>My Page
Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
次に、「index.html」ファイルを保存して、ブラウザにリロードします。ブラウザタブで、ページタイトルの左側にファビコン画像が表示されます。
ファビコンファイル形式のサポート
次の表は、ファビコンイメージのファイル形式のサポートを示しています。
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
章のまとめ
- HTML
<link>要素を使用してファビコンを挿入します
HTMLリンクタグ
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。