ショートカットアイコンとアイコンコードの違いの紹介

ステートメント 1: <link rel="shortcut icon" href="favicon.ico" />
ステートメント 2 <link rel="icon" href="animated_favicon.gif" type="image/gif" />
注: ステートメント 1 のショートカットアイコンは、URL バーの前に表示されるアイコンです。
質問: ステートメント 2 のアイコンの機能は何ですか? ステートメント 1 との違いは何ですか?
これまで、Web サイトのデザイナーや開発者は、ファビコンが表示されるようにさまざまな方法を採用してきました。同じバージョンのブラウザを使用している場合でも、すべてのコンピューターでファビコンが表示されることを確実に保証することは困難です。
次のコードのもう 1 つの制限は、ファビコンを特定の HTML または XHTML ドキュメントに関連付けることです。これを回避するには、favicon.ico ファイルをルートディレクトリに配置する必要があります。ほとんどのブラウザはそれを自動的に検出して使用します。
次の 2 行の HTML コードを含めることをお勧めします。
コード：
<link rel="ショートカットアイコン" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
ただし、"shortcut icon" 文字列は、ほとんどの標準準拠ブラウザによって、可能なキーワードのリストとして解釈されます ("shortcut" は無視され、"icon" のみが使用されます)。一方、Internet Explorer では、単一の名前 ("shortcut icon") として扱われるため、最初の行のみが必要です。これにより、コードがすべてのブラウザで理解可能になります。 2 行目の追加は、新しいブラウザに代替のフォールバック画像 (アニメーション GIF など) を提供する場合にのみ必要です。
HTML では、リンク要素はヘッド要素内 (<head> と </head> の間) に配置する必要があります。
XHTML の場合、リンクは「 />」（または「></link>」）で終わる必要があり、「>」で終わることはできません。
href は /favicon.ico の場所を指すことができますが、必ずしもそうである必要はありません。任意の URL を指すことができます。
通常、画像にはブラウザでサポートされている任意の画像形式を使用できます。
通常、.ico ファイル形式は、ファビコンを表示できるすべてのブラウザで読み取ることができます。
正しい MIME 識別子を送信するようにサーバーを構成します。
ICO ファイル image/vnd.microsoft.icon (互換性のため image/x-icon も使用できます。ただし、ほとんどの主要ブラウザが現在サポートしているため、IANA 登録済みの MIME タイプを使用することをお勧めします)
GIF ファイルimage/gif
PNG ファイルimage/png
適切な解像度と色深度を使用してください。
ICO: さまざまな解像度 (最も一般的なのは 16×16 と 32×32 ですが、Mac OS X では 64×64 と 128×128 が使用されることもあります) とビット深度 (ピクセルあたりのビット数) (主に 4、8、24 bpp、つまり 1600 万色、256 万色、1600 万色) が含まれます。
GIF: 16×16、256色を使用します。
PNG: 16×16、256 色または 24 ビットを使用します。
注意: favicon.ico がドキュメントルートに配置されている場合、サイト上にそのページを指すリンクがない場合でも、リンク要素を処理しない一部のブラウザーによって検出されます。
標準化
ファビコン機能は Microsoft によって最初に作成され、Microsoft の Internet Explorer Web ブラウザはすべての Web サイトにファビコンを要求します。 Microsoftがサポートするリンクタグは、以下の理由により、World Wide Web Consortium (W3C)のHTML勧告[1]に準拠していません。
rel 属性には、スペースで区切られたリンクタイプのリストが含まれている必要があるため、2 語のリンクタイプは標準に準拠したブラウザーでは認識されません。
「.ico」ファイルタイプ (Microsoft Windows のアイコンに使用されるラスター形式) には登録された MIME タイプがなく、現時点ではほとんどのブラウザーで認識されないようです。しかし、2003 年に、この形式は MIME タイプ image/vnd.microsoft.icon で IANA に登録され、問題の最初の部分は解消されました。
ウェブサイト上の予約済み場所を使用することは、World Wide Web のアーキテクチャと一致しておらず、リンクスクワッティングまたは URI スクワッティングと見なされます。
Mozilla ブラウザは、Web 標準に準拠したアプローチを使用してファビコンのサポートを追加しました。 rel="icon" を使用すると、Web デザイナーはサポートされている任意の画像形式でファビコンを追加できます。たとえば、<link rel="icon" type="image/png" href="/path/image.png"> です。その後、ほとんどのブラウザは、すべての新しいコンテンツにこの機能が使用されることを考慮して、この機能のサポートを追加しました。

<<: Jenkins + Docker + ASP.NET Core の自動デプロイメントの問題について (落とし穴を避ける)

>>: デザインのヒント: きっと気に入っていただけると思います