SVG, Favicons, dan semua perkara yang menyeronokkan yang boleh kita lakukan dengan mereka

Ikon laman web (favicons) adalah ikon kecil yang dipaparkan dalam tab penyemak imbas, yang memudahkan pengguna untuk mengenal pasti laman web dengan cepat di antara banyak penanda halaman dan tab. Mereka adalah reka bentuk pintar dalam sejarah Internet dan mempunyai beberapa ciri yang menakjubkan.

Ciri baru ialah menggunakan SVG sebagai ikon laman web. Pelayar yang paling moden menyokong ciri dan sokongan ini semakin meningkat.

Berikut adalah kod untuk menambah ikon laman web ke laman web. Letakkannya di laman web Bahagian:

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

Dan tambahkan kod berikut ke aplikasi web laman web yang nyata:

 {
  "Ikon": [
    {"src": "/icon-14.png", "type": "image/png", "saiz": "192x192"},
    {"src": "/icon-512.png", "type": "image/png", "saiz": "512x512"}
  ]
}

Penyemak imbas yang menyokong ikon laman web SVG akan mengatasi yang pertama<link> Pengisytiharan Elemen dan gunakan yang kedua<link> elemen. Penyemak imbas yang tidak menyokong ikon laman web SVG tetapi menyokong aplikasi Web akan menggunakan imej resolusi yang lebih tinggi. Semua pelayar lain akan kembali menggunakan fail favicon.ico . Ini memastikan semua pelayar yang menyokong ikon laman web mempunyai pengalaman yang baik.

Anda juga boleh melihat nilai atribut alternatif yang diisytiharkan oleh rel dalam baris kedua. Ini secara programatik menyampaikan ikon laman web menggunakan format fail .ico sebagai paparan alternatif.

Selepas ikon laman web adalah garis kod yang memuat imej SVG yang lain bernama safari-pinned-tab.svg . Ini adalah untuk menyokong ciri tag tetap Safari, yang wujud sebelum penyemak imbas lain menyokong ikon laman web SVG. Anda juga boleh menambah fail tambahan di sini untuk meningkatkan laman web untuk aplikasi dan perkhidmatan yang berbeza, yang akan diliputi lebih terperinci kemudian.

Berikut adalah maklumat lanjut mengenai tahap sokongan semasa ikon laman web SVG:

Penyemak imbas ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian.

Desktop

Mudah alih/tablet

Mengapa Memilih SVG?

Anda mungkin tertanya -tanya mengapa anda memerlukan SVG. Format fail .ico telah lama wujud dan dapat menyokong imej dengan saiz maksimum 256 × 256 piksel. Berikut adalah tiga jawapan:

Mudah dicipta

Membuat fail .ico adalah menyusahkan. Fail ini adalah format proprietari yang digunakan oleh Microsoft, yang bermaksud anda memerlukan alat khusus untuk menciptanya. SVG adalah standard terbuka, yang bermaksud anda boleh menggunakannya tanpa alat tambahan atau penguncian platform.

Pembangunan masa depan

Skrin retina? 5k? 6k? Apabila kami menggunakan fail SVG yang tidak berkaitan dengan resolusi sebagai ikon laman web, kami dapat menjamin bahawa ikon laman web kami akan kelihatan jelas dan tajam pada peranti masa depan, tidak kira berapa besar paparan mereka.

prestasi

SVGs biasanya fail yang sangat kecil, terutamanya berbanding dengan rakan -rakan imej raster mereka - terutamanya jika anda mengoptimumkannya terlebih dahulu. Dengan menggunakan ikon laman web 16 × 16 piksel sebagai penyelesaian sandaran yang tidak menyokong pelayar SVG, kami menyediakan gabungan sokongan yang tinggi dan saiz fail yang lebih kecil.

Ini seolah -olah agak melampau, tetapi apabila ia datang kepada prestasi rangkaian, setiap bait adalah penting!

Kemahiran

Satu lagi kelebihan SVG ialah kita boleh membenamkan CSS terus di dalamnya. Ini bermakna kita boleh menyesuaikannya secara dinamik menggunakan JavaScript, dengan syarat SVG diisytiharkan sebaris, dan bukannya menggunakan<img alt="SVG, Favicons, dan semua perkara yang menyeronokkan yang boleh kita lakukan dengan mereka" > Elemen tertanam.

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill:></path></svg>

Oleh kerana ikon laman web SVG digunakan<link> Unsur -unsur tertanam, jadi mereka tidak dapat diubahsuai menggunakan JavaScript. Walau bagaimanapun, kita boleh menggunakan emoji dan pertanyaan media.

Emoji

Lea Verou mempunyai idea jenius untuk berada di SVG<text></text> Emojis digunakan dalam elemen untuk membuat ikon laman web yang cepat dengan latar belakang telus yang juga jelas dalam saiz kecil.

Sebagai tindak balas, Chris Coyier membuat demo kecil yang kemas yang membolehkan anda mencuba konsep tersebut.

Sokongan Mod Gelap

Kedua-dua Thomas Steiner dan Mathias Bynens secara bebas mendapati idea bahawa menggunakan pertanyaan media prefers-color-scheme untuk memberikan sokongan mod gelap. Kerja ini berdasarkan penerokaan SVG dan pertanyaan media Jake Archibald.

<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg">
  <path fill: dark path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"></path>
</svg>

Untuk penyemak imbas yang disokong, kod ini bermakna ikon laman web SVG Star SVG kami akan mengubah warna mengisi dari hitam ke putih apabila mod gelap diaktifkan. Sangat pandai!

Pertanyaan media lain

Sokongan Mod Gelap mengingatkan saya: Jika SVG dapat menyokong prefers-color-scheme , apa lagi yang boleh kita lakukan dengan mereka? Walaupun sokongan untuk peringkat 5 pertanyaan media mungkin belum wujud, berikut adalah beberapa idea yang perlu dipertimbangkan:

• Gunakan light-level ke warna ikon laman web desaturatate dalam persekitaran cahaya yang rendah.
• Gunakan inverted-colors untuk "flip" untuk membalikkan warna untuk mengekalkan jenama, atau pastikan ikon laman web realistik foto muncul seperti yang diharapkan.
• Gunakan prefers-reduced-motion untuk memadam animasi ikon laman web. Idealnya, kita harus mengelakkan ikon laman web bernyawa terlebih dahulu, kerana mereka boleh menjadi punca gangguan hiperaktif defisit perhatian dan kecacatan yang berkaitan.
• Gunakan forced-colors dan/atau Windows pertanyaan media kontras tinggi untuk memastikan ikon laman web mengekalkan kesan visual dalam persekitaran warna kontras yang tinggi! Ingatlah untuk menggunakan kata kunci warna untuk memastikan warna dinamik ikon laman web anda!

Tetap jelas

Satu lagi aspek penting dalam reka bentuk ikon laman web yang baik adalah untuk memastikan mereka kelihatan baik di kawasan tag penyemak imbas kecil. Rahsia ini adalah untuk menyelaraskan laluan imej vektor dengan grid piksel, panduan yang digunakan oleh komputer untuk menukar matematik SVG ke bitmaps yang kita lihat di skrin.

Berikut adalah contoh mudah menggunakan bentuk persegi:

Kesan anti-aliasing yang digunakan oleh komputer untuk melicinkan bentuk tidak diperlukan apabila titik vektor persegi diselaraskan dengan grid piksel papan art. Apabila titik vektor tidak diselaraskan, kita mendapat kesan "smear":

Program pengeditan vektor seperti Figma, Sketch, Inkscape, atau Illustrator boleh digunakan untuk menyesuaikan kedudukan titik vektor pada grid piksel. Program -program ini juga mengeksport SVG. Untuk menyesuaikan kedudukan titik vektor, gunakan alat pemilihan yang tepat untuk memilih setiap nod dan seretnya ke kedudukan yang dikehendaki.

Untuk kelihatan baik pada saiz yang kecil, beberapa ikon yang lebih kompleks mungkin perlu dipermudahkan. Jika anda mencari panduan starter yang baik dalam hal ini, Jeremy Frank menulis artikel dua bahagian yang sangat baik di Vidget.

Ambil satu langkah tambahan

Sebagai tambahan kepada ikon laman web, terdapat banyak cara yang berbeza (malangnya proprietari) untuk menggunakan ikon untuk meningkatkan pengalaman mereka. Ini termasuk ikon tag tetap Safari, pengembangan aplikasi sembang, jubin menu Windows Start tetap, pratonton media sosial, dan pelancar skrin utama.

Jika anda mencari tempat yang bagus untuk mula menggunakan peningkatan ini, saya sangat suka realfavicongenerator.net.

Satu perkara yang menarik mengenai sejarah ikon laman web: Internet Explorer adalah pelayar pertama untuk menyokong mereka, dan mereka ditambah pada saat -saat terakhir oleh pemaju bernama Bharat Shyam:

Cerita ini seperti ini, larut malam, Shyam sedang membangunkan ciri ikon laman web barunya. Dia memanggil pengurus projek junior Ray Sun untuk melihat.

Shyam berkomentar, "Ini bagus, kan? Semak?", Meminta kebenaran untuk menandatangani kod ke pangkalan kod Internet Explorer supaya ia dapat dikeluarkan dalam versi seterusnya. Sun tidak banyak memikirkannya. Ciri ini sejuk dan jelas akan memberikan kelebihan yang lebih baik. Jadi dia memberitahu Shyam untuk terus menambahnya. Itu sahaja, ikon laman web masuk ke Internet Explorer 5, yang akan menjadi salah satu versi pelayar terbesar di web yang pernah ada.

Keesokan harinya, Sun dimarahi oleh pengurus kerana membenarkan ciri itu lulus dengan cepat. Ternyata Shyam menunggu dengan sengaja sehingga hari itu, dan dia tahu bahawa pengurus projek yang tidak berpengalaman akan membiarkannya lulus. Tetapi pada masa itu, kod itu telah digabungkan. Dengan cara ini, anda akan terkejut dengan berapa banyak penyemak imbas yang agak utama yang menyelinap ke dalam versi seperti ini.

Petikan Dari Cara Kami Dapatkan Ikon Laman Web oleh Jay Hoffmann

Saya gembira melihat platform memberi perhatian kepada ikon laman web. Mereka telah lama menjadi salah satu butiran reka bentuk kecil kegemaran saya dan saya gembira mereka menjadi lebih responsif terhadap apa yang pengguna mahu. Jika anda mempunyai masa, mengapa tidak menambah ikon laman web SVG untuk projek anda seperti yang dilakukan oleh Bharat Shyam pada tahun 1999?

¹ Saya tidak dapat menentukan sama ada Safari akan melaksanakan sokongan ikon laman web SVG, tetapi saya mahu mereka berbuat demikian. Adakah ada yang mendengar apa -apa?

Atas ialah kandungan terperinci SVG, Favicons, dan semua perkara yang menyeronokkan yang boleh kita lakukan dengan mereka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!