Membuat favicon adaptif

Ringkasan dasar tentang cara membuat favicon adaptif.

Dalam postingan ini, saya ingin membagikan pemikiran tentang cara membuat favicon adaptif dengan SVG. Coba demo.

Tab browser ditampilkan yang beradaptasi dengan perubahan tema terang dan gelap sistem MacOS. Coba Demo

Jika Anda lebih suka video, berikut versi YouTube dari postingan ini:

Ringkasan

Favicon kustom adalah cara yang bagus untuk meningkatkan kualitas project web. Link ini ditampilkan di tab browser desktop, dan juga di dalam pembaca "simpan untuk nanti", postingan blog lain yang tertaut ke situs Anda, dan lainnya. Biasanya, hal ini dilakukan dengan jenis file .ico, tetapi baru-baru ini browser telah mengizinkan penggunaan SVG, format vektor. Dengan menggunakan progressive enhancement, Anda dapat menayangkan favicon .ico yang didukung dengan baik, dan mengupgrade ke .svg jika tersedia.

SVG dapat diskalakan ke atas dan ke bawah tanpa kehilangan kualitas, dan berpotensi berukuran sangat kecil, SVG juga dapat memiliki CSS tersemat, bahkan kueri media tersemat. Artinya, jika favicon SVG digunakan di aplikasi pembaca atau panel bookmark, ada kemungkinan pengguna bisa mendapatkan ikon yang relevan dengan tema (terang atau gelap) karena gaya preferensi gelap yang disediakan di dalam SVG. SVG kemudian beradaptasi menggunakan gaya visual tersemat untuk preferensi pengguna terang dan gelap.

Contoh favicon terang dan gelap yang besar dan mudah dibedakan.

Tab terang dan gelap di setiap browser yang memberikan ringkasan ikon adaptif dari atas ke bawah: Safari, Firefox, Chrome.
Tab terang dan gelap di setiap browser yang memberikan ringkasan ikon adaptif dari atas ke bawah: Safari, Firefox, Chrome.

Markup

Markup SVG adalah XML yang menggunakan ekstensi jenis file .svg yang memungkinkannya menyimpan jenis kode yang lebih dinamis.

Mulai dengan membuat favicon.svg

Buat file baru bernama favicon.svg dan tambahkan kode berikut:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

</svg>

Berikut adalah file SVG saya, saya telah menyesuaikan ukuran viewBox yang relevan dengan karya seni saya:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">

</svg>

Menambahkan bentuk dan jalur

Selanjutnya, tambahkan kode jalur SVG. Sering kali hal ini berarti membuka SVG di editor kode, tetapi kode tersebut umumnya tidak mudah dipahami. Berikut adalah panduan bagus yang memandu Anda mengekspor dan mengoptimalkan SVG dari alat desain.

Poster untuk Tantangan GUI ini berasal dari seorang desainer yang membuatnya di Adobe Illustrator. Saya telah mengoptimalkannya secara maksimal. Saya menjalankannya melalui SVGOMG, lalu mengeditnya secara manual.

Berikut adalah contoh grup jalur karya seni skull dari saya, setelah membersihkannya:

<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>

Perhatikan pemilih ID yang dapat dibaca manusia seperti #eyes-and-nose dan class seperti .favicon-stroke. Ini adalah hasil edit manual saya, sebagai persiapan untuk CSS. Menambahkan class dan ID tidak diperlukan agar SVG Anda menjadi favicon adaptif.

Di tag <head> HTML Anda, setelah favicon .ico, tambahkan kode berikut:

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

Karena ikon baru mungkin terlihat identik dengan versi .ico, pastikan ikon tersebut digunakan. Buka panel Network di DevTools. Filter menurut gambar dan telusuri favicon:

Screenshot panel Jaringan dari DevTools dengan filter yang menelusuri
favicon dan resource favicon.svg yang ditandai.

Gaya

Seperti HTML, Anda dapat menambahkan tag <style> ke markup untuk digunakan pada cakupan dokumen tersebut:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
  </style>
  …
</svg>

Versi tema terang akan menjadi pewarnaan default SVG favicon saya. Gaya yang saya tulis untuk itu sebagian besar adalah warna goresan dan isian:

<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>

Contoh pratinjau favicon tema terang.

Berikutnya, bagian yang paling menyenangkan, menata gaya favicon versi tema gelap. Gaya untuk itu akan masuk ke kueri media dalam tag gaya:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
    @media (prefers-color-scheme: dark) {
      /* dark theme styles */
    }
  </style>
  
</svg>

Screenshot DevTools yang menampilkan kueri media tema gelap yang menimpa
warna isian mata dan hidung SVG.

Saya mendapatkan hasil seperti ini:

<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>

Contoh pratinjau favicon tema gelap.

Saya memilih untuk menukar batas ungu cerah dengan abu-abu gelap yang bagus (#343a40), mengubah warna tulang tengkorak dari putih menjadi abu-abu dingin terang (#adb5bd), tetapi meninggalkan topi aksen merah muda.

Pratinjau favicon terang dan gelap berdampingan.

Kesimpulan

Setelah Anda tahu cara saya melakukannya, bagaimana Anda melakukannya‽ 🙂

Mari kita diversifikasi pendekatan dan pelajari semua cara untuk mem-build di web. Buat demo, tweet link-nya, dan saya akan menambahkannya ke bagian remix komunitas di bawah.

Remix komunitas