HTMLでブラウザアイコンを追加する方法

2024-02-15 17:30 HTML ブラウザアイコン Favicon

  1. ファビコン画像を用意する: ファビコン画像は、通常、16x16ピクセルまたは32x32ピクセルのサイズで作成されます。PNGやICO形式で保存します。

  2. HTMLのheadセクションにリンクを追加する: HTMLファイルのheadセクション内に、以下のコードを追加します。

    <link rel="icon" href="path/to/favicon.ico" type="image/x-icon">

    上記のコードでは、href属性の値を適切なパスに変更してください。例えば、ファビコン画像が同じディレクトリにある場合は、href="favicon.ico"となります。

  3. ファビコンの表示確認: ファビコンが正しく表示されるかどうかを確認するために、HTMLファイルをブラウザで開きます。アドレスバーの左側やブックマークリストにファビコンが表示されるはずです。

  4. 追加のファビコン設定（オプション）: ファビコンに関する追加の設定を行いたい場合は、以下の方法を参考にしてください。

    • iOS用のホーム画面アイコンを指定する場合:

      <link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

    • Android用のホーム画面アイコンを指定する場合:

      <link rel="manifest" href="path/to/manifest.json">

      上記の場合、それぞれのhref属性の値を適切なパスに変更してください。

以上が、HTMLでブラウザアイコンを追加する方法の概要です。適切なファビコン画像を用意し、HTMLファイルのheadセクションにリンクを追加することで、ブラウザ上でアイコンが表示されるようになります。必要に応じて、iOSやAndroid向けのアイコンも指定することができます。