HTML でタブアイコンを挿入

  2. プログラミングのヒント
  3. HTML ハウツー
  4. HTML でタブアイコンを挿入
Sushant Poudel 2023年12月11日
HTML HTML Favicon
  1. HTML で <link rel="icon"> と PNG 画像を使用して Web サイトのファビコンを追加する
  2. HTML で <link rel="icon"> と ICO 画像を使用して Web サイトのファビコンを追加する
HTML でタブアイコンを挿入

タブアイコンは基本的に、ブラウザのタブに表示される小さなアイコンです。通常、ピクセル単位の最小サイズの非常に小さいサイズの画像のように見えます。ファビコンとも呼ばれます。この記事では、HTML で Web サイトのブラウザタブアイコンを追加する方法を紹介します。

<link> タグと rel="icon"属性を使用して、ブラウザのファビコンを HTML に追加できます。コード内の <link> タグは、現在のドキュメントを外部リソースに接続します。これは、通常、外部スタイルシートにリンクするために使用されるタグです。属性のみが含まれているため、空の要素とも呼ばれます。rel 属性は、現在のリソースとリンクされたリソースの間の関係を定義するためにも使用されます。href 属性でファビコンとして使用する画像のリンク先を設定できます。.png 拡張子の付いた画像は、href 属性で使用する必要があります。

最初に、デバイスでファビコンとして使用する PNG 画像を用意する必要があります。それは小さなピクセルでなければなりません。ファビコンを作成するための最も一般的なサイズは 16x16 ピクセルです。それにもかかわらず、それらは少し大きい寸法（32x32）でも表示される可能性があります。ここで、HTML の <head>タグ内で、<link> タグを開き、その中で rel 属性を使用します。rel 属性を icon に設定します。その後、href 属性を記述し、引用符内でファビコンとして使用する PNG 画像ファイルを指定します。この後、以前に開いたすべてのタグを閉じます。

ここでは、画像 favicon.png をファビコンとして使用しています。画像はローカルシステムにあります。このようにして、HTML の Web ページにファビコンを追加できます。

サンプルコード：

<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>

ICO イメージを使用して、下位互換性の目的で HTML で Web サイトにファビコンを追加できます。最近のほとんどすべてのブラウザは、ファビコンとして使用される PNG 画像をサポートしています。IE10 およびその以前のバージョンのようなブラウザーでは、ICO イメージを使用できます。ICO イメージには、拡張子として .ico があります。ConvertICO などのツールを使用して、PNG 画像を ICO に変換できます。

たとえば、ConvertICO Web サイトを参照し、favicon.png ファイルをアップロードします。ウェブサイトは画像を ICO 形式に変換し、ダウンロードできるようにします。次に、最初の方法で行ったように、<link> タグの href 属性で画像パスを使用します。次に、Web ページでファビコンを確認できます。

サンプルコード：

<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
著者： Sushant Poudel
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn