Format favicon dijelaskan: ICO, PNG, SVG dan keperluan pelayar

Mengapa favicon masih agak rumit

Favicon kelihatan seperti satu imej kecil, tetapi ia berada di persimpangan antara muka pelayar, penanda halaman, tab, pintasan disemat, hasil carian, skrin utama mudah alih dan pemasangan aplikasi web progresif. Setiap konteks mempunyai jangkaan yang sedikit berbeza.

Itulah sebabnya nasihat tentang favicon sering terasa bercelaru. Sesetengah pasukan hanya menyediakan satu favicon.ico kerana itu dahulu sudah memadai. Yang lain pula menjana sedozen fail tanpa mengetahui fail mana yang sebenarnya digunakan. Jalan tengah yang munasabah lebih kecil: fahami perkara yang dilakukan dengan baik oleh ICO, PNG dan SVG, kemudian sediakan set ringkas yang meliputi pelayar semasa dan konteks peranti yang biasa.

Favicon bukan tempat untuk mempamerkan saluran pemprosesan imej. Ia tempat untuk menjadi biasa, jelas dan serasi.

ICO: format lama yang enggan mati

ICO ialah bekas ikon Windows klasik. Ia boleh memuatkan beberapa imej bitmap pada saiz berbeza, lazimnya 16×16, 32×32 dan 48×48 piksel. Ini penting kerana favicon mungkin dipaparkan sangat kecil dalam tab pelayar, lebih besar dalam senarai penanda halaman, dan berbeza lagi pada pintasan Windows.

Perincian pentingnya ialah ICO ialah bekas, bukan sekadar satu imej. favicon.ico yang baik biasanya mengandungi berbilang saiz raster supaya pelayar atau sistem pengendalian boleh memilih padanan terdekat dan bukannya menskalakan satu bitmap kecil sahaja.

ICO masih berguna atas tiga sebab:

• Pelayar mungkin meminta /favicon.ico secara automatik, walaupun anda tidak memautkannya dalam HTML anda.
• Sesetengah pelayar lama dan integrasi menjangkakannya.
• Ia ialah sandaran selamat apabila pengisytiharan ikon yang lebih baharu diabaikan.

Itu tidak bermakna ICO patut menjadi satu-satunya ikon anda. Ia sukar disunting, tidak begitu mesra kepada aliran kerja moden, dan lemah sebagai sumber rujukan utama untuk tanda jenama. Anggap ia sebagai sandaran keserasian.

Dalam amalan, letakkan /favicon.ico sebenar di akar laman. Jangan sajikan 404 di situ melainkan anda suka log yang bising dan percubaan semula pelayar yang tidak perlu.

PNG: pekerja lasak yang boleh dipercayai

PNG masih merupakan format raster yang paling boleh dijangka untuk favicon dan ikon sentuh. Ia menyokong ketelusan, disokong secara meluas, dan berkelakuan konsisten merentas pelayar serta platform.

Untuk favicon, PNG berguna apabila anda mahu ikon bersaiz piksel yang jelas seperti 32×32 atau 48×48. Untuk ikon skrin utama mudah alih, PNG secara efektif wajib dalam sesetengah persekitaran. Ikon sentuh Apple, sebagai contoh, berasaskan PNG dalam penggunaan produksi biasa.

Beberapa peraturan praktikal membantu:

• Eksport daripada sumber vektor, bukan daripada bitmap yang sudah kecil.
• Pastikan ikon boleh dibaca pada 16×16 sebelum mengambil berat tentang saiz yang lebih besar.
• Tambahkan ruang tepi yang mencukupi supaya tanda tidak terasa terpotong dalam konteks bucu bulat atau bertopeng.
• Elakkan teks halus, garisan nipis dan ilustrasi terperinci.

Pemampatan PNG biasanya tidak berbaloi untuk terlalu dirisaukan bagi favicon kerana failnya kecil. Namun begitu, jangan hantar ikon sentuh 500 KB hanya kerana ia datang terus daripada eksport reka bentuk. Jika anda sudah menilai pilihan imej yang lebih luas, pemikiran berdisiplin yang sama daripada keputusan format imej di web moden terpakai di sini juga: pilih format untuk tugasnya, bukan kerana ia sedang bergaya.

SVG: pilihan moden yang fleksibel

Favicon SVG menarik kerana ia tidak bergantung pada resolusi. Satu fail kecil boleh dipaparkan dengan bersih pada banyak saiz, dan ia boleh disunting terus dalam kod atau dieksport daripada perisian reka bentuk.

Versi moden Chromium, Firefox dan Safari menyokong favicon SVG. Ini menjadikan SVG format favicon utama yang baik untuk banyak laman, terutamanya apabila ikon tersebut ialah logo ringkas, glif atau tanda geometri.

Tetapi favicon SVG datang dengan beberapa peringatan.

Pertama, SVG tersebut perlu berdikari. Jangan bergantung pada fon luaran, imej jauh atau skrip. Pelayar mengenakan sekatan pada SVG yang digunakan sebagai imej, dan walaupun sesuatu berfungsi dalam satu pelayar, ia mungkin gagal dalam pelayar lain.

Kedua, kekalkan ia ringkas secara visual. SVG tidak menyelesaikan masalah 16 piksel secara ajaib. Ilustrasi vektor yang terperinci tetap menjadi kabur apabila diperah masuk ke dalam tab.

Ketiga, berhati-hati dengan penggayaan dinamik. Sesetengah pasukan menggunakan prefers-color-scheme di dalam favicon SVG supaya ikon menyesuaikan diri dengan tema pelayar gelap dan cerah. Ini boleh berfungsi, tetapi tingkah laku pelayar dan caching boleh tidak sekata. Jika pengecaman jenama penting, satu ikon yang kukuh selalunya mengatasi ikon adaptif yang bijak.

SVG ialah sumber yang baik dan format penghantaran moden yang baik. Ia bukan alasan untuk melangkau fail sandaran.

Perkara yang sebenarnya dicari oleh pelayar

Pelayar menemui favicon melalui dua cara utama: pautan HTML yang jelas dan permintaan akar tersirat.

Tingkah laku tersirat ialah cara lama: jika pelayar mahukan ikon dan belum menemui satu pun, ia mungkin meminta /favicon.ico. Inilah sebabnya fail ICO akar kekal berguna walaupun pada laman moden.

Tingkah laku jelas menggunakan elemen <link> dalam head dokumen. Persediaan moden yang ringkas kelihatan seperti ini:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Manifes kemudian boleh menunjuk kepada ikon PNG yang lebih besar untuk aplikasi web yang boleh dipasang:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Ini bukan satu-satunya persediaan yang sah, tetapi ia garis dasar yang baik. Ia memberikan SVG kepada pelayar moden, menyediakan sandaran ICO konvensional, meliputi simpanan skrin utama iOS, dan menyokong konteks pemasangan aplikasi.

Set favicon yang patut disediakan oleh kebanyakan laman

Untuk laman pemasaran biasa, laman dokumentasi, aplikasi SaaS atau penerbitan, set ini sudah memadai:

• /favicon.ico yang mengandungi 16×16 dan 32×32, dengan 48×48 sebagai pilihan.
• /icon.svg sebagai favicon boleh skala moden.
• /apple-touch-icon.png pada 180×180.
• /icon-192.png dan /icon-512.png jika anda mempunyai manifes aplikasi web.

Anda boleh menambah lebih banyak saiz jika platform mempunyai keperluan khusus, tetapi jangan jana sepuluh fail sekadar kerana kebiasaan. Setiap fail tambahan ialah satu lagi perkara untuk dicache, dilupakan, tersalah nama atau dibiarkan lapuk selepas penjenamaan semula.

Jika laman anda tidak boleh dipasang dan tidak mempunyai manifes, anda mungkin tidak memerlukan ikon 192 dan 512 piksel. Jika laman anda berkelakuan seperti aplikasi, anda mungkin memerlukannya.

Mod kegagalan biasa

Pepijat favicon yang paling biasa bukan bersifat artistik. Ia masalah penghantaran.

Salah satunya ialah caching yang agresif. Pelayar memegang favicon dengan degil. Semasa ujian, ikon yang diubah mungkin tidak muncul sehingga anda melakukan segar semula keras, mengosongkan data laman, menggunakan nama fail baharu, atau menguji dalam profil baharu. Untuk penjenamaan semula produksi, menukar /icon.svg?v=2 mungkin membantu dalam HTML, tetapi akar /favicon.ico lebih sukar kerana pelayar memintanya secara langsung. Menggantikan fail dan menunggu cache tamat selalunya sebahagian daripada kerja.

Masalah biasa lain ialah jenis MIME yang salah. SVG patut disajikan sebagai image/svg+xml, PNG sebagai image/png, dan ICO lazimnya sebagai image/x-icon atau image/vnd.microsoft.icon. Banyak pelayar bersikap memaafkan, tetapi bukan semua konteks begitu. Jika sesuatu gagal hanya dalam satu pelayar, periksa respons rangkaian sebelum melukis semula ikon. Tabiat yang sama digunakan ketika menyahpepijat redirect dan pengepala HTTP dalam produksi terpakai di sini: lihat respons sebenar, bukan apa yang CMS dakwa sedang disajikan.

Isu ketiga ialah kepadatan reka bentuk. Logo yang berfungsi dengan cantik pada pengepala laman web sering gagal sebagai favicon. Ikon tab ialah ujian yang keras. Buang perkataan, ringkaskan bentuk, tingkatkan kontras, dan uji pada saiz sebenar. Jika ikon ialah kandungan bermakna di dalam halaman, maka kebimbangan kebolehcapaian seperti teks alt penting; untuk favicon itu sendiri, ia hiasan antara muka pelayar, bukan kandungan halaman. Untuk perbezaannya, lihat panduan pragmatik kami kepada teks alt imej.

<!-- tool-cta:start -->

💡 Cuba ini: Jana varian ICO, PNG dan SVG yang dijangka oleh pelayar moden dalam satu langkah dengan Ultimate Favicon Generator.

<!-- tool-cta:end -->

Senarai semak pelaksanaan ringkas

Gunakan senarai semak ini sebelum penghantaran:

1. Mulakan daripada master vektor yang bersih.
2. Uji tanda pada 16×16 dan 32×32.
3. Eksport favicon SVG yang berdikari.
4. Jana sandaran ICO berbilang saiz.
5. Eksport ikon sentuh Apple 180×180.
6. Tambahkan PNG 192×192 dan 512×512 jika menggunakan manifes.
7. Letakkan /favicon.ico di akar laman.
8. Sahkan kod status, jenis MIME dan pengepala caching.
9. Uji dalam sekurang-kurangnya satu pelayar Chromium, Firefox dan Safari jika khalayak anda termasuk peranti Apple.

Favicon kecil, tetapi ia juga sangat kelihatan. Yang rosak membuatkan laman terasa belum siap. Yang dibuat dengan baik hilang ke dalam antara muka, dan itulah sebenarnya tujuannya.