Ringkasan dasar tentang cara membuat favicon adaptif.
Dalam postingan ini, saya ingin berbagi pemikiran tentang cara mem-build favicon adaptif dengan SVG. Coba demonya.
Jika Anda lebih suka video, berikut versi YouTube postingan ini:
Ringkasan
Favicon kustom adalah
cara yang bagus untuk memoles project web. Info ini ditampilkan di tab browser desktop, dan juga di dalam pembaca "simpan untuk nanti", postingan blog lain yang tertaut ke situs Anda, dan banyak lagi. Secara tradisional, hal ini dilakukan dengan jenis file .ico, tetapi baru-baru ini
browser telah mengizinkan penggunaan
SVG, yaitu format vektor. Dengan
peningkatan
progresif,
Anda dapat menayangkan favicon .ico yang didukung dengan baik, dan mengupgrade ke .svg jika
tersedia.
SVG dapat meningkatkan dan menurunkan skala tanpa kehilangan kualitas, dan berpotensi berukuran sangat kecil. SVG juga dapat memiliki CSS tersemat, bahkan kueri media yang disematkan. Artinya, jika favicon SVG digunakan di aplikasi pembaca atau panel bookmark, ada kemungkinan pengguna bisa mendapatkan ikon tema yang relevan (terang atau gelap) karena gaya preferensi gelap yang disediakan di dalam SVG. SVG kemudian beradaptasi menggunakan gaya yang disematkan untuk preferensi pengguna terang dan gelap.
Markup
Markup SVG adalah
XML menggunakan
ekstensi jenis file .svg yang memungkinkannya untuk menampung 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 file SVG saya, saya telah mengukur viewBox yang relevan dengan poster 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 ini berarti membuka SVG di editor kode, tetapi kode tersebut umumnya tidak ramah manusia. Berikut adalah panduan bagus yang memandu Anda dalam mengekspor dan mengoptimalkan SVG dari alat desain.
Karya seni untuk GUI Challenge ini berasal dari desainer yang membuatnya di Adobe Illustrator. saya sangat mengoptimalkannya. Saya menjalankannya melalui SVGOMG, lalu mengedit file tersebut dengan tangan.
Berikut adalah contoh grup jalur karya seni skull dari milik 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. Video ini hasil edit tangan saya, sebagai persiapan untuk CSS.
Penambahan class dan ID tidak diperlukan agar SVG menjadi favicon adaptif.
Menautkan SVG favicon dari HTML
Pada tag <head> di HTML Anda, setelah favicon .ico, tambahkan hal 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, verifikasi bahwa ikon tersebut sedang
digunakan. Buka panel Jaringan DevTools. Filter berdasarkan gambar dan telusuri
favicon:
Gaya
Seperti HTML, Anda dapat menambahkan tag <style> ke markup untuk digunakan terhadap cakupan dokumen tersebut:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
Versi tema terang akan menjadi warna default SVG favicon saya. Gaya yang saya tulis sebagian besar adalah goresan dan warna 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>
Selanjutnya, bagian paling menyenangkan, memberi gaya pada versi tema gelap favicon Anda. Gaya untuk peristiwa tersebut 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>
Milik saya berakhir 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>
Saya memilih untuk menukar batas ungu terang dengan abu-abu gelap yang keren (#343a40),
mengubah warna tulang tengkorak dari putih menjadi abu-abu dingin muda (#adb5bd), tetapi
meninggalkan topi aksen merah muda.
Kesimpulan
Setelah Anda tahu cara saya melakukannya, bagaimana Anda‽ 🙂
Mari lakukan diversifikasi pendekatan dan pelajari semua cara untuk membangun di web. Buat demo, link tweet me, dan saya akan menambahkannya ke bagian remix komunitas di bawah.