Anda perlu menggunakan favicon SVG. Mereka didukung di semua browser modern (yah, hampir semua).
Selain itu, Anda tidak memerlukan semua referensi ke ikon dan dimensi yang Anda salin dari proyek ke proyek. Mari kita cari tahu apa yang dibutuhkan minimum absolut untuk ini.
Ikon
Fivicon utama dapat berupa SVG dengan berbagai ukuran. Jenisnya type="image/svg+xml"
tidak diperlukan.
<link rel="icon" href="favicon.svg">
Ikon topeng
Safari, . mask-icon
. SVG, . .
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">
(Touch Icon)
IOS , . 180 x 180
, sizes .
manifest.json
- -. Lighthouse.
Android Chrome. 512 x 512.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
theme-color
meta
- Chrome Android.
<meta name="theme-color" content="#ffffff">
, , . msapplication-TileImage
, Windows, apple-touch-icon
. TileColor .
, , , favicon.ico
32 x 32
-. , .
Kesimpulannya, berikut tip untuk mode gelap. Salah satu kelebihan dari icon SVG adalah anda dapat merubah warnanya menggunakan CSS. Saat menggunakan kueri media, prefers-color-scheme
warna ikon Anda berubah bergantung pada mode gelap atau terang pengguna. Metode ini tidak akan berfungsi mask-icon
karena warnanya ditentukan di atribut, tetapi Safari menambahkan latar belakang putih jika kontrasnya tidak mencukupi.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>
Hasil
Inilah hasil akhirnya. Salin ke <head>
situs web Anda dan jangan lupa letakkan favicon.ico
di root.
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">