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

ショートカットアイコンとアイコンコードの違いの紹介
ステートメント 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 の自動デプロイメントの問題について (落とし穴を避ける)

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

推薦する

KVM ベースの SRIOV パススルー構成とパフォーマンス テストの詳細な説明

SRIOVの導入、VFパススルー構成、パケット転送速度性能テスト目次1. SRIOVの紹介2. 環境...

jQueryは動的タグイベントを実装します

この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...

VUE ユニアプリコア知識の簡単な紹介

目次仕様a. ページファイルはVueの単一ファイルコンポーネント仕様に準拠しています。 b. コンポ...

MySQL ソート機能の詳細

目次1. 問題のシナリオ2. 原因分析3. 解決策4. 知識を広げる4.1 クエリの最適化を制限する...

ヘッダーのチェックボックスをテキスト実装コードに変更するための選択テーブルを持つ要素

方法1: テーブル属性を使用する: header-cell-class-name テーブルインターフ...

MySQL 5.7.18 winx64 のインストールと設定方法のグラフィックチュートリアル

圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...

Dockerfile に基づいて Tomcat イメージを構築する方法

Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...

MySQL インデックス カバレッジの例の分析

この記事では、MySQL インデックス カバレッジについて例を挙げて説明します。ご参考までに、詳細は...

CSS 要素で計算されたスタイルを取得します (カスケード/最終スタイル後)

CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...

MySQLデータベーステーブルの容量を確認する方法の例

この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...

Ubuntu 18.04で国内ソースを変更する方法の例

Ubuntu はソースが中国からなのでダウンロード速度が比較的遅いです。CentOS と異なり、yu...

Vue3.0 でページング コンポーネントを手動でカプセル化する方法

この記事では、vue3.0の手動カプセル化ページングコンポーネントの具体的なコードを参考までに紹介し...

Centos7環境でYUMを構築する方法

1. yumソースの設定ファイルを入力します 2.lsで設定ファイルを表示する 3. ディレクトリを...

Tomcatの自動シャットダウンに関するバグ修正

序文最近、4 年間実行されている Java EE Web プロジェクトでは、システムが開けないという...

CSS3を使って歌詞進行テキストカラー塗りつぶし変更の動的効果を実装するアイデアの詳細な説明

音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へ...