Ringkasan dasar tentang cara membuat favicon adaptif.
Dalam postingan ini, saya ingin berbagi pemikiran tentang cara membuat favicon adaptif dengan SVG. Coba demo.
Jika Anda lebih suka menonton video, berikut versi YouTube untuk postingan ini:
Ringkasan
Fvicon kustom
cara yang bagus untuk memoles
proyek web. Iklan 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 kolom bookmark, ada kemungkinan pengguna bisa memperoleh tema ikon yang relevan (terang atau gelap) karena gaya preferensi gelap yang disediakan di dalam SVG. SVG kemudian beradaptasi menggunakan gaya visual yang disematkan untuk pengguna terang dan gelap preferensi Anda.
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 file SVG, yang telah berukuran viewBox sesuai 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 ini berarti membuka SVG dalam editor kode, tetapi kode itu umumnya tidak ramah manusia. Berikut adalah panduan hebat 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 sangat telah mengoptimalkannya. 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 ID yang dapat dibaca manusia
pemilih suka
#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.
Tautkan SVG favicon dari HTML
Di tag <head> 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
data Buka panel Jaringan DevTools. Filter berdasarkan gambar dan telusuri
ikon favorit:
Gaya
Seperti HTML, Anda dapat menambahkan tag <style> ke markup untuk digunakan pada tag tersebut
cakupan dokumen:
<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. Tujuan {i>style<i} yang saya tulis untuk itu sebagian besar adalah warna {i>stroke<i} 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>
Selanjutnya, bagian yang paling menyenangkan, menata gaya versi tema gelap favicon Anda. Tujuan {i>style<i} untuk itu akan masuk ke kueri media dalam tag {i>style<i}:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
Link 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 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.
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.