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. Ini ditampilkan di tab {i>browser <i}desktop, dan
juga di dalam "simpan untuk nanti" pembaca, postingan blog lain yang tertaut ke situs Anda, dan
banyak lagi. Biasanya hal ini telah dilakukan dengan jenis file .ico, tetapi baru-baru ini
browser memungkinkan penggunaan
SVG, adalah format vektor. Menggunakan
progresif
peningkatan kualitas
Anda dapat menayangkan favicon .ico yang didukung dengan baik, dan mengupgrade ke .svg jika
yang tersedia.
SVG dapat meningkatkan dan menurunkan skala tanpa penurunan kualitas, dan berpotensi berukuran sangat kecil, mereka juga dapat memiliki CSS yang disematkan, bahkan kueri media yang disematkan. 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 menggunakan
ekstensi jenis file .svg yang memungkinkannya
menyimpan jenis file yang lebih dinamis
pada kode sumber.
Mulai dengan membuat favicon.svg
Buat file baru bernama favicon.svg dan tambahkan hal 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 ini panduan bagus yang memandu Anda dengan mengekspor dan mengoptimalkan SVG dari peralatan desain.
Poster untuk Tantangan GUI ini dibuat dari desainer yang berhasil menggunakan Adobe Ilustrator. Saya sangat telah mengoptimalkannya. Saya menjalankannya melalui SVGOMG dan mengedit dengan tangan.
Berikut adalah contoh grup jalur karya seni skull dari milik saya, setelah dibersihkan
hal tersebut:
<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 editan saya, dalam persiapan untuk CSS.
Menambahkan class dan ID tidak diperlukan agar SVG 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 markup 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 terang dengan warna abu-abu tua yang bagus dan keren (#343a40),
mengubah warna tulang tengkorak dari putih menjadi abu-abu terang (#adb5bd), tapi
meninggalkan topi aksen merah muda.
Kesimpulan
Sekarang setelah Anda tahu bagaimana saya melakukannya, bagaimana Anda akan 🙂
Mari kita diversifikasi pendekatan kami dan mempelajari semua cara untuk membangun di web. Buat demo, link tweet saya, dan saya akan menambahkannya ke bagian remix komunitas di bawah ini.