アダプティブ ファビコンの作成方法について、基本的な概要を示します。
この投稿では、アダプティブ ファビコンを作成する方法について、 SVGデモをお試しください。
<ph type="x-smartling-placeholder">動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。
概要
カスタム ファビコン:
素晴らしい方法です。パソコンのブラウザタブに表示されます。
[後で使用するために保存]で読者、サイトにリンクしている他のブログ投稿、
できます。従来は .ico ファイル形式で使用されていましたが、最近では
ブラウザでは
SVG: ベクター形式。使用
プログレッシブ
向上
適切にサポートされている .ico のファビコンを配信できるほか、次の場合は .svg にアップグレードできます。
できます。
SVG を使用すると、サイズに関係なく サイズが小さくなる可能性もありますが 埋め込み CSS、埋め込みメディアクエリなどですSVG ファビコンを リーダーアプリやブックマークバーに 広告を表示する場合 関連する（明るいまたは暗い）アイコンを使用します。これは、 SVGSVG は、埋め込みのスタイル設定を使って明るいユーザーと暗いユーザーに合わせて調整 設定。
<ph type="x-smartling-placeholder">マークアップ
SVG マークアップは
XML
より動的な形式のファイルを保持できる .svg ファイル形式の拡張子
できます。
まずは「favicon.svg」にしてください
favicon.svg という新しいファイルを作成し、以下を追加します。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
これが私の SVG ファイルです。アートワークに合わせて viewBox のサイズを設定しました。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
シェイプとパスを追加する
次に、SVG パスコードを追加します。多くの場合 SVG をコードエディタで開きますが、 一般的に人間が理解しやすいコードではありませんこちらのガイドに沿って、 エクスポートして最適化する 設計ツール。
この GUI チャレンジのアートワークは、 （Adobe で制作したデザイナーによる） Illustrator。非常に 最適化しました。SVGOMG で実行した 手作業で編集して取り除きました
私の作品の skull アートワーク パスグループの例（クリーニング後）
説明します。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<g id="skull">
<path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
<path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
<path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
</g>
</svg>
人間が読み取れる ID に注目してください。
などのセレクタ
#eyes-and-nose と
クラスの高評価
.favicon-stroke。これらは CSS の準備のために私の手で編集したものです。
SVG をアダプティブ ファビコンにするために、クラスと ID を追加する必要はありません。
HTML からファビコン SVG をリンクする
HTML の <head> タグの .ico ファビコンの後に、次のコードを追加します。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
新しいアイコンは .ico と同じに見えるため、アイコンが正しかったことを確認してください。
分析できますDevTools の [Network] パネルを開きます。画像でフィルタして次を検索:
ファビコン:
![フィルタが検索された DevTools の [Network] ペインのスクリーンショット
ファビコンとハイライト表示された favicon.svg リソース。](https://web.dev/static/articles/building/an-adaptive-favicon/image/screenshot-the-network-p-938068735fbde.png?authuser=00&hl=ja)
スタイル
HTML と同様に、マークアップに <style> タグを追加して、そのマークアップに使用できます。
ドキュメント スコープ:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
ライトモード バージョンがファビコン SVG のデフォルトの色になります。「 私が書いたスタイルは、ほとんどがストロークと塗りつぶしの色でした。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
.favicon-stroke {
stroke-width: 8px;
stroke: #8929ff;
}
#skull-outline { fill: white }
#eyes-and-nose, #hat-outline { fill: #8929ff }
#hat-fill, #hat-bill { fill: #e662e6 }
</style>
…
</svg>
次は、最も面白い部分です。ファビコンのダークモード バージョンのスタイルを設定します。「 そのスタイルを style タグ内のメディアクエリに追加します:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
私の場合、結果は次のようになります。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
.favicon-stroke { stroke: #343a40 }
#skull-outline { fill: #adb5bd }
#hat-outline { fill: #343a40 }
#eyes-and-nose { fill: #343a40 }
}
</style>
…
</svg>
明るい紫の枠線をきれいなクールなダークグレー（#343a40）に差し替えました。
頭蓋骨の色を白から薄いクールな灰色（#adb5bd）に変えましたが、
ピンクのアクセント ハットです。
まとめ
どのようにやり方をしたかわかったので、どのように感じますか？ ‽ 🙂?
アプローチを多様化して、ウェブで構築するすべての方法を学びましょう。 デモを作成し、ツイートしてリンクを送ってください 下の [コミュニティリミックス]セクションに アクセスしてください