svg、favicons、および私たちがそれらでできるすべての楽しいこと

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サイトのアイコンをプログラムで伝達します。

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

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

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

デスクトップ

モバイル/タブレット

なぜSVGを選ぶのですか？

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

簡単に作成できます

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

将来の開発

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

パフォーマンス

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

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

スキル

SVGのもう1つの利点は、CSSをその内部に直接埋め込むことができることです。これは、SVGが使用するのではなくインラインと宣言されている場合、JavaScriptを使用してそれらを動的に調整できることを意味します<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>絵文字は、要素内で使用されて、小さなサイズでも明確な透明な背景を持つクイックWebサイトアイコンを作成します。

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

ダークモードのサポート

Thomas SteinerとMathias Bynensの両方は、Dark Modeのサポートを提供するためにprefers-color-schemeという考えを独立して発見しました。この作業は、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を使用して、低光環境でウェブサイトのアイコンの色を飽和させます。
• inverted-colors使用して「フリップ」して色を反転させてブランドを保持するか、写真のように現実的なWebサイトのアイコンが予想どおりに表示されることを確認します。
• prefers-reduced-motionを使用して、Webサイトのアイコンアニメーションを削除します。理想的には、注意欠陥多動性障害やその他の関連障害の原因となる可能性があるため、最初にアニメーション化されたWebサイトのアイコンを避ける必要があります。
• forced-colorsやWindows High Contrastモードのメディアクエリを使用して、Webサイトのアイコンが高コントラストカラー環境で視覚効果を維持するようにします！色キーワードを使用して、ウェブサイトのアイコンの色のダイナミックを保持することを忘れないでください！

明確にしてください

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

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

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

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

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

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

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

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

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

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

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

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

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

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

¹SafariがSVG Webサイトのアイコンサポートを実装するかどうかを判断することはできませんが、そうしてほしいです。誰かが何かを聞いたことがありますか？

以上がsvg、favicons、および私たちがそれらでできるすべての楽しいことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。