ファビコンは「お気に入りアイコン」の略で、Web サイトを表す小さな画像です。通常、ブラウザのタブとブックマークに表示されます。 HTML ドキュメントにファビコンを追加するには、次の手順に従います。

  1. ファビコンを作成します。

    • ファビコン用に正方形の画像をデザインします。標準サイズは 16x16 ピクセルまたは 32x32 ピクセルですが、解像度を高めるには 64x64 ピクセルなどのより大きなサイズを使用できます。
    • 画像を .ico、.png、.gif、.jpg などの一般的な Web 形式で保存します。
  2. ファビコンをプロジェクト ディレクトリに配置します。

    • ファビコン画像をプロジェクトのルート ディレクトリまたは特定のフォルダー (例: images ) に保存します。
  3. HTML ドキュメントの<head>にファビコン リンクを追加します。

    • HTML ファイルを開き、 <head>セクションを見つけます。
    • <head>セクション内に次の行を追加します。
    html
    <link rel="icon" href="path/to/your/favicon.ico" type="image/x-icon">

    "path/to/your/favicon.ico"ファビコン画像への実際のパスに置き換えます。

    ファビコンが別の形式 (PNG など) である場合は、以下を使用できます。

    html
    <link rel="icon" href="path/to/your/favicon.png" type="image/png">

    複数のサイズと解像度をサポートしたい場合は、次のコードを使用してさまざまなサイズを指定できます。

    html
    <link rel="icon" href="path/to/your/favicon-16x16.png" sizes="16x16" type="image/png"> <link rel="icon" href="path/to/your/favicon-32x32.png" sizes="32x32" type="image/png">
  4. 保存してテスト:

    • HTML ファイルを保存します。
    • ブラウザで Web ページを開くと、タブとブックマークにファビコンが表示されるはずです。

「path/to/your/favicon.ico」をファビコン画像への実際のパスに置き換えることを忘れないでください。プロジェクトがオンラインでホストされている場合は、正しいパスを指定して、Web からファビコン ファイルにアクセスできることを確認してください。