Apakah Website dan Blog Anda Sudah Menggunakan Favicon SVG?
Sabtu, 15 Agustus 2020
Kenapa begitu?
Karena SVG sekarang sudah didukung di semua peramban modern.
Selain itu, Anda mungkin tidak memerlukan semua tautan ikon dan ukuran yang Anda salin dari proyek ke proyek. Mari kita cari tahu apa yang wajib dan mutlak, kata demi kata.
Ikon
Favicon utama dapat berupa SVG dalam berbagai ukuran. Jenis type ="image/svg+xml" saat ini sudah tidak diperlukan.
<link rel="icon" href="favicon.svg">
Ikon Mask
Untuk Safari, ini sedikit berbeda. Anda perlu menambahkan ikon mask. Ini juga merupakan SVG, tetapi harus dibuat dari satu warna dan ditempatkan pada latar belakang transparan dan Browser akan menambahkan warna atribut.
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">
Ikon Touch
Ikon untuk perangkat iOS serta favorit dari browser, halaman tab baru, dan banyak lagi. Anda hanya membutuhkan ukuran 180x180, dan atribut ukuran tidak berguna.
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Manifest
Manifest.json memberikan informasi tentang aplikasi web atau situs Anda. Garis-garis ini wajib untuk lulus ujian Lighthouse. Ikon yang ditautkan digunakan oleh Android dan Chrome. Ukuran terbesar 512x512, ini adalah satu-satunya yang dibutuhkan.
{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}
Meta warna tema masih diperlukan untuk warna browser Chrome Android.
<meta name="theme-color" content="#ffffff">
Selesai!
Itulah semua ikon yang Anda butuhkan untuk browser modern saat ini, yang lainnya tidak diperlukan. Aplikasi-ms-TileImage dapat ditambahkan jika Anda menginginkan ikon yang berbeda di ubin Windows, jika tidak ikon sentuh-apel digunakan. TileColor tidak digunakan lagi.
Dan sayangnya, tidak semua orang menggunakan peramban modern TETAPI dapat dengan mudah diselesaikan dengan meletakkan favicon.ico 32x32 di root situs web Anda. Ini berfungsi di mana pun dan kapan pun.
Mode gelap
Untuk menyelesaikannya, berikut tips untuk mode gelap. Salah satu manfaat favicon SVG adalah Anda dapat mengubah warnanya dengan CSS. Menggunakan kueri media skema-warna-preferensi, warna favicon Anda berubah dengan mode gelap atau terang. Metode ini tidak akan berfungsi dengan mask-icon karena warnanya ada di atribut, tetapi Safari menambahkan latar belakang putih jika kontrasnya kurang.
<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>
Ini hasil akhirnya. Salin ini di <head> situs web/blog Anda, dan jangan lupa untuk menempatkan 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">
