HTML にウェブサイトアイコンを追加する方法

HTML にウェブサイトアイコン（Favicon）を追加する方法を学びます。

HTML にウェブサイトアイコンを追加する方法

ウェブサイトアイコン（favicon）は、ブラウザのタブのページタイトルの横に表示される小さな画像です。

好きな画像を使用してウェブサイトアイコンを作成できます。また、https://favicon.cc などのサイトで自分のウェブサイトアイコンを作成することもできます。

ヒント：ウェブサイトアイコンは小さな画像であるため、高コントラストのシンプルな画像であるべきです。

ウェブサイトアイコンの画像は、以下のようにブラウザのタブのページタイトルの左側に表示されます：

ウェブアイコンの例

ウェブサイトにアイコンを追加するには、ウェブサーバーのルートディレクトリにウェブサイトアイコンの画像を保存するか、ルートディレクトリに "images" というフォルダを作成し、ウェブサイトアイコンの画像をここに保存してください。ウェブサイトアイコンの一般的な名前は "favicon.ico"。

次に、"index.html" ファイルの中で <title> 要素の後ろに追加する <link> 以下のように要素を示します：

<!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" ファイルを保存し、ブラウザで再読み込みしてください。ブラウザのタブはページタイトルの左側にウェブサイトアイコンが表示されるべきです。