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

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

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

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

...
<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サイトに追加する方法を理解する必要があります。