ショートカットアイコンとアイコンコードの違いの紹介
2022-02-06 11:38:47
ステートメント1：<link rel="shortcut icon" href="favicon.ico" />
ステートメント2<link rel="icon" href="animated_favicon.gif" type="image/gif" />
注：ショートカットアイコンとは、URLの前に表示されるアイコンのことです。
Question:ステートメント2のアイコンは何のためにあるのですか？ステートメント1とステートメント2の違いは何ですか？
ガイダンス
これまで、Webデザイナーや開発者は、ファビコンを確実に表示させるためにさまざまな方法を用いてきました。あるブラウザの同じバージョンであっても、すべてのコンピュータでファビコンが表示されることを明示的に保証することは困難です。
以下のコードのもう一つの制限は、ファビコンを特定のHTMLまたはXHTML文書に関連付けることです。これを避けるには、favicon.icoファイルをルートディレクトリに配置する必要があります。ほとんどのブラウザは自動的にこれを検出して使用します。
次の2行のHTMLコードを含めることをお勧めします。
CODEを使用します。
<link rel="shortcut icon" 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") として扱われるからです。この結果、すべてのブラウザがこのコードを理解することになります。新しいブラウザで代替画像（アニメーションGIFなど）を提供したい場合にのみ、2行目を追加する必要があります。
HTMLでは、link要素はhead要素内（<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を使用）とビット深度（1ピクセルあたりのビット数）（多くは4、8、24bpp、すなわち16、256、1600万色を使用）が含まれています。
GIF。16×16、256色で使用します。
PNG：16×16、256色または24ビットを使用します。
注）favicon.icoをドキュメントルートに配置すると、リンクコンポーネントを扱わない一部のブラウザでは、サイト内にリンクがなくても検出されることがあります。
標準化について
ファビコン機能はマイクロソフトが最初に作ったもので、マイクロソフトのInternet Explorerウェブブラウザはすべてのウェブサイトにファビコンを要求します。マイクロソフトがサポートするリンクタグはWorld Wide Web Consortium（W3C）のHTML勧告に従っていないためです[1]。
rel属性はスペースで区切られたリンクタイプのリストを含む必要があり、2つの単語を含むリンクタイプは標準準拠のブラウザでは理解することができません。
".ico"ファイルタイプ（Microsoft Windowsのアイコンに使われるラスターフォーマット）は、MIMEタイプが登録されておらず、当時はほとんどのブラウザで理解されなかったようです。しかし、2003年にこのフォーマットはIANAに image/vnd.microsoft.icon というMIMEタイプで登録され、この問題の最初の部分は解決されました。
Webサイトで予約ロケーションを使用することは、World Wide Webのアーキテクチャと矛盾しており、リンクスクワッティングまたはURIスクワッティングとみなされます。
Mozilla ブラウザは、Web 標準に準拠した方法でファビコンのサポートを追加しました。これは rel="icon" を取り、ウェブデザイナーがサポートされているあらゆる画像形式のファビコンを追加できるようにします。例えば、 <link rel="icon" type="image/png" href="/path/image .png"> のように記述します。この機能は、すべての新しいコンテンツに使用されることを考慮して、ほとんどのブラウザがその後サポートを追加しています。
ステートメント2<link rel="icon" href="animated_favicon.gif" type="image/gif" />
注：ショートカットアイコンとは、URLの前に表示されるアイコンのことです。
Question:ステートメント2のアイコンは何のためにあるのですか？ステートメント1とステートメント2の違いは何ですか？
ガイダンス
これまで、Webデザイナーや開発者は、ファビコンを確実に表示させるためにさまざまな方法を用いてきました。あるブラウザの同じバージョンであっても、すべてのコンピュータでファビコンが表示されることを明示的に保証することは困難です。
以下のコードのもう一つの制限は、ファビコンを特定のHTMLまたはXHTML文書に関連付けることです。これを避けるには、favicon.icoファイルをルートディレクトリに配置する必要があります。ほとんどのブラウザは自動的にこれを検出して使用します。
次の2行のHTMLコードを含めることをお勧めします。
CODEを使用します。
<link rel="shortcut icon" 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") として扱われるからです。この結果、すべてのブラウザがこのコードを理解することになります。新しいブラウザで代替画像（アニメーションGIFなど）を提供したい場合にのみ、2行目を追加する必要があります。
HTMLでは、link要素はhead要素内（<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を使用）とビット深度（1ピクセルあたりのビット数）（多くは4、8、24bpp、すなわち16、256、1600万色を使用）が含まれています。
GIF。16×16、256色で使用します。
PNG：16×16、256色または24ビットを使用します。
注）favicon.icoをドキュメントルートに配置すると、リンクコンポーネントを扱わない一部のブラウザでは、サイト内にリンクがなくても検出されることがあります。
標準化について
ファビコン機能はマイクロソフトが最初に作ったもので、マイクロソフトのInternet Explorerウェブブラウザはすべてのウェブサイトにファビコンを要求します。マイクロソフトがサポートするリンクタグはWorld Wide Web Consortium（W3C）のHTML勧告に従っていないためです[1]。
rel属性はスペースで区切られたリンクタイプのリストを含む必要があり、2つの単語を含むリンクタイプは標準準拠のブラウザでは理解することができません。
".ico"ファイルタイプ（Microsoft Windowsのアイコンに使われるラスターフォーマット）は、MIMEタイプが登録されておらず、当時はほとんどのブラウザで理解されなかったようです。しかし、2003年にこのフォーマットはIANAに image/vnd.microsoft.icon というMIMEタイプで登録され、この問題の最初の部分は解決されました。
Webサイトで予約ロケーションを使用することは、World Wide Webのアーキテクチャと矛盾しており、リンクスクワッティングまたはURIスクワッティングとみなされます。
Mozilla ブラウザは、Web 標準に準拠した方法でファビコンのサポートを追加しました。これは rel="icon" を取り、ウェブデザイナーがサポートされているあらゆる画像形式のファビコンを追加できるようにします。例えば、 <link rel="icon" type="image/png" href="/path/image .png"> のように記述します。この機能は、すべての新しいコンテンツに使用されることを考慮して、ほとんどのブラウザがその後サポートを追加しています。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン