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

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

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

推薦する

ウェブサイトのユーザビリティを向上させる10のヒント

企業の Web サイト、個人のブログ、ショッピング Web サイト、ゲーム Web サイトなど、どの...

MySQL スロークエリログの基本的な使い方チュートリアル

スロークエリログ関連のパラメータMySQL スロー クエリ関連のパラメータの説明: slow_que...

MySQL マルチバージョン同時実行制御 MVCC の実装

目次MVCCとはMVCC 実装MVCC はファントム リードを解決しますか? MVCCとはMVCC ...

レスポンシブデザインについての簡単な説明

1. レスポンシブ デザインとは何ですか?レスポンシブデザインとは、ウェブサイトの開発プロセス中に、...

MySQL マスタースレーブレプリケーションスレッドの状態遷移に関する詳細な理解

序文MySQL マスター スレーブ レプリケーションの基本原理は、スレーブ データベースがマスター ...

MySQL クエリ キャッシュのグラフィカルな説明

目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...

HTML フォームタグチュートリアル (2):

このチュートリアルでは、ウェブデザインにおけるFORMフォームタグのさまざまな属性の応用を紹介します...

Reactにおけるフックの一般的な使用法

目次1. フックとは何ですか? 2. フックはなぜ現れるのでしょうか? 3. よく使われるフックは何...

知っておくべき JS 配列削減の高度な使い方 25 選

序文Reduce は ES5 で追加された新しい従来の配列メソッドの 1 つです。forEach、f...

Vue+element ui はアンカーの配置を実現します

この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具...

Rabbitmq heartbea ハートビート検出メカニズムの原理の分析

序文RabbitMQ を使用する場合、一定期間クライアントと RabbitMQ サーバーの間でトラフ...

Linux での tcpdump コマンド例の詳細な説明

序文簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...

Dockerコンテナを使用してプロキシ転送とデータバックアップを実装する方法

序文アプリケーションを Docker コンテナとしてサーバーにデプロイする場合、通常はネットワークと...

Ubuntu 16.04 64ビット版を3つのステップで32ビットプログラムと互換性を持たせる

ステップ1: システムのアーキテクチャを確認する dpkg --print-architecture...

MySQL FAQ シリーズ: 一時テーブルを使用する場合

一時テーブルの概要一時テーブルとは: MySQL は中間結果セットを保存するために使用されます。一時...