Webサイトのアイコン（Favicons）は、ブラウザタブに表示されている小さなアイコンであり、ユーザーが多くのブックマークやタブの中でWebサイトをすばやく識別できるようにします。彼らはインターネットの歴史の中で巧妙なデザインであり、いくつかの素晴らしい機能を持っています。

新機能は、SVGをWebサイトのアイコンとして使用することです。ほとんどの最新のブラウザはこの機能をサポートしており、サポートが増加しています。

WebサイトのアイコンをWebサイトに追加するコードは次のとおりです。ウェブサイトに配置します一部：

<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg xml">
<link href="/manifest.webmanifest" rel="manifest">

次のコードをWebサイトのWebアプリケーションマニフェストに追加します。

 {
  「アイコン」：[
    {"src"： "/icon-192.png"、 "type"： "image/png"、 "sizes"： "192x192"}、
    {"src"： "/icon-512.png"、 "type"： "image/png"、 "sizes"： "512x512"}
  ]
}

SVGウェブサイトのアイコンをサポートするブラウザは最初のアイコンをオーバーライドします<link>要素宣言と2番目の宣言を使用します<link>要素。 SVG Webサイトのアイコンをサポートしていないが、Webアプリケーションマニフェストをサポートするブラウザは、高解像度畫像を使用します。他のすべてのブラウザは、 favicon.icoファイルの使用に戻ります。これにより、ウェブサイトのアイコンをサポートするすべてのブラウザが良い體験をします。

また、2行目でrelによって宣言された代替屬性値に気付くこともあります。これは、 .icoファイル形式を代替ディスプレイとして使用して、Webサイトのアイコンをプログラムで伝達(dá)します。

ウェブサイトの後に、アイコンはsafari-pinned-tab.svgという名前の別のSVG畫像をロードするコードの行です。これは、他のブラウザがSVG Webサイトのアイコンをサポートする前に存在するSafariの固定タグ機能をサポートするためです。また、ここに追加のファイルを追加して、さまざまなアプリケーションやサービスのWebサイトを強化することもできます。これについては、後で詳しく説明します。

SVG Webサイトのアイコンの現(xiàn)在のサポートレベルの詳細(xì)については、以下を次に示します。

このブラウザは、Caniuseのデータをサポートしています。これには詳細(xì)が含まれています。番號は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレット

なぜSVGを選ぶのですか？

なぜSVGが必要なのか疑問に思うかもしれません。 .icoファイル形式は長い間存在しており、最大サイズの256×256ピクセルの畫像をサポートできます。ここに3つの答えがあります：

簡単に作成できます

.icoファイルの作成は面倒です。このファイルは、Microsoftが使用する獨自の形式です。つまり、それらを作成するには特殊なツールが必要です。 SVGはオープン標(biāo)準(zhǔn)です。つまり、追加のツールやプラットフォームロックなしで使用できます。

將來の開発

網(wǎng)膜畫面？ 5K？ 6k？ Webサイトのアイコンとして解像度に関連しないSVGファイルを使用する場合、ディスプレイがどれほど大きくても、Webサイトのアイコンが將來のデバイスでクリアでシャープに見えることを保証できます。

パフォーマンス

通常、SVGは非常に小さなファイルです。特に、ラスターイメージのカウンターパートと比較して、特に事前に最適化する場合。 SVGブラウザをサポートしないバックアップソリューションとして16×16ピクセルのWebサイトアイコンのみを使用することにより、高いサポートとより小さなファイルサイズの組み合わせを提供します。

これは少し極端に思えますが、ネットワークのパフォーマンスに関しては、すべてのバイトが重要です！

スキル

SVGのもう1つの利點は、CSSをその內(nèi)部に直接埋め込むことができることです。これは、SVGが使用するのではなくインラインと宣言されている場合、JavaScriptを使用してそれらを動的に調(diào)整できることを意味します<img alt="svg、favicons、および私たちがそれらでできるすべての楽しいこと" >埋め込まれた要素。

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill:></path></svg>

SVG Webサイトアイコンが使用されるため<link>要素は埋め込まれているため、JavaScriptを使用して変更することはできません。ただし、絵文字とメディアクエリを使用できます。

絵文字

Lea VerouはSVGにいるという天才的な考えを持っています<text></text>絵文字は、要素內(nèi)で使用されて、小さなサイズでも明確な透明な背景を持つクイックWebサイトアイコンを作成します。

これに応じて、Chris Coyierは、コンセプトを試すことができるきちんとした小さなデモを作成しました。

ダークモードのサポート

Thomas SteinerとMathias Bynensの両方は、Dark Modeのサポートを提供するためにprefers-color-schemeという考えを獨立して発見しました。この作業(yè)は、Jake ArchibaldのSVGとメディアクエリの探求に基づいています。

<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg">
  <path fill: dark path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"></path>
</svg>

サポートされているブラウザの場合、このコードは、ダークモードがアクティブになると、Star SVG Webサイトのアイコンが塗りつぶし色を黒から白に変更することを意味します。とても賢い！

他のメディアの問い合わせ

ダークモードのサポートは私に思い出させます：SVGがprefers-color-schemeを好む場合、他に何ができますか？レベル5のメディアクエリのサポートはまだ存在しないかもしれませんが、ここに考慮すべきいくつかのアイデアがあります。

• light-levelを使用して、低光環(huán)境でウェブサイトのアイコンの色を飽和させます。
• inverted-colors使用して「フリップ」して色を反転させてブランドを保持するか、寫真のように現(xiàn)実的なWebサイトのアイコンが予想どおりに表示されることを確認(rèn)します。
• prefers-reduced-motionを使用して、Webサイトのアイコンアニメーションを削除します。理想的には、注意欠陥多動性障害やその他の関連障害の原因となる可能性があるため、最初にアニメーション化されたWebサイトのアイコンを避ける必要があります。
• forced-colorsやWindows High Contrastモードのメディアクエリを使用して、Webサイトのアイコンが高コントラストカラー環(huán)境で視覚効果を維持するようにします！色キーワードを使用して、ウェブサイトのアイコンの色のダイナミックを保持することを忘れないでください！

明確にしてください

優(yōu)れたウェブサイトのアイコンデザインのもう1つの重要な側(cè)面は、小さなブラウザタグエリアで見栄えを良くすることです。これの秘密は、ベクトル畫像のパスをピクセルグリッドに合わせることです。これは、SVG數(shù)學(xué)を畫面に表示するビットマップに変換するためにコンピューターが使用するガイドです。

これは、正方形の形を使用した単純化された例です。

正方形のベクトルポイントがアートボードのピクセルグリッドと整列している場合、コンピューターが形狀を滑らかにするために使用する防止効果は必要ありません。ベクトルポイントが揃っていない場合、「スミア」効果が得られます。

Figma、Sketch、Inkscape、またはIllustratorなどのベクトル編集プログラムを使用して、ピクセルグリッド上のベクトルポイントの位置を調(diào)整できます。これらのプログラムもSVGをエクスポートします。ベクトルポイントの位置を調(diào)整するには、正確な選択ツールを使用して各ノードを選択し、目的の位置にドラッグします。

このような小さなサイズを上手に見るには、より複雑なアイコンを簡素化する必要がある場合があります。この點で良いスターターガイドを探しているなら、ジェレミー?フランクはVidgetに関する非常に良い2部構(gòu)成の記事を書きました。

1つの追加ステップを踏みます

ウェブサイトのアイコンに加えて、アイコンを使用して體験を向上させるための多くの異なる（殘念な獨自の）方法があります。これらには、前述のSafariの固定タグアイコン1、チャットアプリの拡張、固定Windowsスタートメニュータイル、ソーシャルメディアプレビュー、ホーム畫面ランチャーが含まれます。

これらの機能強化の使用を開始するのに最適な場所を探しているなら、私はrealfavicongenerator.netが本當(dāng)に好きです。

Webサイトの歴史に関する興味深い點：Internet Explorerは、それらをサポートする最初のブラウザであり、Bharat Shyamという名前の開発者によって土壇場でこっそり追加されました。

ストーリーはこのようなものです。夜遅く、シャムは彼の新しいウェブサイトのアイコン機能を開発しています。彼はジュニアプロジェクトマネージャーのレイサンに電話して見てみました。

Shyamは、「これは良いですよね？」とコメントし、次のバージョンでリリースできるように、インターネットエクスプローラーコードベースにコードに署名する許可を要求しました。太陽はそれについてあまり考えませんでした。この機能はクールで、明らかにIEがより良い利點を與えます。そこで彼はシャムにそれを追加し続けるように言った。それだけで、WebサイトのアイコンはInternet Explorer 5に入ります。これは、これまでで最大のブラウザバージョンの1つになります。

翌日、サンは、機能を非常に迅速に通過できるようにするためにマネージャーにoldりました。シャムはその日遅くまで故意に待っていたことがわかり、彼は経験の淺いプロジェクトマネージャーが彼を通過させることを知っていました。しかし、それまでに、コードはマージされていました。ちなみに、このようなバージョンに忍び込む比較的主要なブラウザ機能の數(shù)に驚くでしょう。

Jay HoffmannによるWebサイトのアイコンを取得する方法からの抜粋

プラットフォームがウェブサイトのアイコンに注意を払っているのを見てうれしいです。彼らは長い間私のお気に入りの小さなデザインの詳細(xì)の1つであり、ユーザーが望むものにもっと敏感になったことを嬉しく思います。時間がある場合は、1999年にBharat Shyamが行ったように、SVG Webサイトのアイコンをプロジェクトに追加してみませんか？

1SafariがSVG Webサイトのアイコンサポートを?qū)g裝するかどうかを判斷することはできませんが、そうしてほしいです。誰かが何かを聞いたことがありますか？

以上がsvg、favicons、および私たちがそれらでできるすべての楽しいことの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。