方法-HTMLでファビコンを追加する
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」ファイルを保存して、ブラウザにリロードします。ブラウザタブで、ページタイトルの左側にファビコン画像が表示されます。