Favicon adalah satu-satunya gambar yang ditampilkan situs Anda di tempat yang tidak Anda kendalikan: tab browser, bilah bookmark, dan daftar riwayat, masing-masing dengan warna latar belakangnya sendiri. Favicon SVG dapat merespons latar belakang tersebut alih-alih melawannya.

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
<link rel="icon" href="/favicon.ico" sizes="any">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    circle { fill: #111111; text { fill: #ffffff; } }
    @media (prefers-color-scheme: dark) {
      circle { fill: #ffffff; }
      text { fill: #111111; }
    }
  </style>
  <circle cx="32" cy="32" r="30"/>
  <text x="32" y="42" text-anchor="middle"
        font-family="Georgia" font-size="30">T</text>
</svg>

Mengapa ini berhasil dan apa yang harus dihormati

  • Blok gaya di dalam SVG adalah lembar gaya asli, jadi kueri media skema warna yang lebih disukai berfungsi persis seperti pada halaman.
  • Skala bentuk vektor: satu file menyajikan tab 16px, bookmark 32px, layar beranda ponsel 180px tanpa gambar per langkah.
  • Fallback PNG dan ICO dalam daftar tautan menangani browser dan konteks yang mengabaikan SVG; urutan di sana memiliki kata terakhir untuk dukungan warisan.
  • Jaga agar kontras ikon tetap dicentang terhadap kedua warna tab, terang dan gelap; pukulan merek netral biasanya lebih baik daripada pengisian penuh.

Daftar periksa yang jujur

  1. Gambarlah pada ukuran 64 x 64 dengan mesin terbang berada tepat di tengah; tes jam 16 sebelum merayakannya, tab adalah nafsu makan yang harus bertahan.
  2. Sematkan kueri media, jangan kirimkan CSS eksternal ke dalam file ikon; itu harus memuat secara mandiri.
  3. Pertahankan masker lama dan langkah-langkah fallback PNG dalam langkah pembuatan Anda sehingga setiap rilis memperbarui ketiga file secara bersamaan.
  4. Verifikasi di browser dengan contoh warna tab: tab terang dan gelap, ditambah abu-abu pada bilah bookmark.

Ringkasan yang sangat gacor: favicon berubah dari raster andalan untuk setiap versi browser menjadi satu SVG responsif dan catatan lama. Satu baris perawatan mode gelap yang dilewati sebagian besar situs.