Terapkan Mode Gelap ke Favicon – Ekstim Seo Service

Baru-baru ini mendesain ulang logo untuk situs web, saya mengalami masalah favicon tidak ditampilkan dengan baik dengan browser yang menggunakan mode gelap. Kalau di konten website, kita bisa mengontrol semuanya mulai dari ukuran hingga kontras warna logo. Namun tidak dengan favicon, konfigurasi interface browser bergantung pada pengguna. Sekarang Anda harus mendesain favicon agar kontrasnya bagus dalam mode Gelap dan mode Terang.

Biasanya favicon/logo website tidak dapat diubah dengan mudah (karena masalah brand identity) sehingga opsi mendesain ulang favicon tidak memungkinkan. Setelah mencari beberapa saat, saya menemukan beberapa solusi untuk masalah tersebut, dan sekarang saya membaginya dengan semua orang.

Apa itu favicon?

Favicon – (Ikon Favorit) adalah ikon situs web. Ikon kecil ini berada di pojok atas tab peramban, ditampilkan sebelum nama situs web. Favicon biasanya akan didesain bertepatan dengan logo website sebagai bagian dari identitas brand. Format favicon biasanya berupa gambar kecil: .ico, .png, .svg,…

Sebagian besar browser sekarang secara otomatis menggunakan favicon default di jalur /favicon.ico jika Anda tidak mendeklarasikan favicon untuk situs di <head>.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Terapkan favicon Mode Gelap

Untuk menerapkan favicon Mode Gelap, masalah yang paling sulit adalah bagaimana mengidentifikasi pengguna yang menggunakan Mode Gelap di browser mereka. Untungnya, masalah ini diselesaikan dengan kueri media CSS suci: prefers-color-scheme

Pada artikel ini, saya akan menyajikan 2 metode menerapkan favicon Mode Gelap melalui kueri media CSS.

Dalam hal kompatibilitas, sekarang ada lebih dari 82% Browser sudah mendukung kueri media CSS ini, dan popularitasnya akan meningkat di masa mendatang.

Saat ini ada lebih dari 82% Browser sudah mendukung kueri CSS lebih suka-warna-skema

Terapkan Mode Gelap ke favicon SVG

Seperti yang telah disebutkan pada pengantar Favicon, format SVG juga dapat digunakan sebagai favicon untuk sebuah halaman web. Jika situs web Anda menggunakan SVG sebagai favicon, coba metode ini, jika tidak, terapkan metode berikutnya.

Solusi untuk favicon SVG disini kita akan menyematkan kode CSS di dalam file .SVG melalui kartu <style>.

Untuk menggunakan SVG sebagai favicon, masukkan kode berikut ke dalam konten tag <head>. Di sana favicon.svg adalah file favicon Anda.

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Pada isi file SVG, kita menyisipkan kode CSS pada tag