ブラウザのタブアイコン（ファビコン）の追加方法

2024-02-15 17:07 ファビコン ウェブ開発 HTML

  1. 画像の作成: ファビコンとして使用する画像を作成します。一般的なファビコンのサイズは、16x16ピクセルまたは32x32ピクセルです。画像はICO形式が最も一般的ですが、他の形式（PNG、GIFなど）もサポートされています。

  2. ファビコンのファイルを作成: 作成した画像をfavicon.icoという名前で保存します。このファイルは、ウェブサイトのルートディレクトリに保存する必要があります。

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

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

上記のコードでは、href属性の値をファビコンのファイルパスに置き換えてください。

  1. 代替テキストの指定（オプション）: ファビコンが読み込まれない場合に表示される代替テキストを指定することもできます。以下のコードをheadセクションに追加します。
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="alternate icon" type="image/png" href="/favicon.png">

上記のコードでは、代替テキストとして使用する別の画像ファイル（favicon.png）を指定しています。

以上で、ブラウザのタブアイコン（ファビコン）が追加されました。ウェブサイトをブラウザで表示すると、指定した画像がタブに表示されるはずです。