HTMLを使用してWebサイトにファビコンを追加する方法

このチュートリアルでは、HTMLを使用してWebページにファビコンを追加する手順について説明します。 ファビコンには任意の画像を使用できますが、ファビコンのサイズが小さい場合、シンプルで高コントラストの画像が最適に機能することが多いことに注意してください。 favicon.ccなどのサイトからカスタムファビコンを生成することもできます。

ファビコンは、Webページのタイトルの左側にあるブラウザタブにある小さな画像です。 下の画像は、ファビコンの場所を示しています。

サイトにファビコンを追加するには、プロジェクトディレクトリにimagesというフォルダを作成し（まだ持っていない場合）、目的のファビコン画像をこのフォルダに保存します。 画像がない場合は、デモ用Webサイトでホストしているこの SammytheShark画像をダウンロードしてください。 （HTMLを使用してWebページに画像を追加する方法の復習については、このチュートリアルシリーズの前半にあるチュートリアルHTML画像にアクセスしてください。

次に、<link>要素（以下で強調表示）を<title>要素のすぐ下のindex.htmlファイルに追加します。 これで、コードは次のようになります。

...
<title> Sammy’s First Website </title>
<link rel="shortcut icon" type="image/jpg" href="Favicon_Image_Location"/>
...

Favicon_Image_Locationをファビコン画像の相対ファイルパスに置き換えてください。 index.htmlファイルを保存し、Webブラウザにリロードします。 これで、ブラウザタブにファビコン画像が含まれるはずです。

これで、HTMLを使用してファビコン画像をWebサイトに追加する方法を理解する必要があります。