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タグリファレンスにアクセスしてください。