Saiz favicon yang pelayar dan peranti sebenarnya mahukan

Favicon dahulu bermakna satu imej kecil 16×16. Kini tab pelayar, pintasan skrin utama telefon, bar penanda halaman, dan ikon sentuh Apple masing-masing mengharapkan saiznya sendiri, dan menyediakan hanya satu meninggalkan sesetengah konteks itu sama ada kabur atau memaparkan ikon sandaran generik bukannya milik anda.

Mengapa satu saiz tidak mencukupi

Ikon 16×16 yang dibesarkan untuk mengisi slot ikon skrin utama 180×180 kelihatan sama berblok seperti mana-mana imej kecil yang direntang kepada saiz besar — tiada cara untuk menambah perincian yang tiada dalam sumber. Setiap konteks di mana favicon muncul mempunyai resolusi yang dijangkakan sendiri, dan amalan moden adalah menyediakan satu set saiz bukannya bergantung pada pelayar untuk membesarkan satu fail kecil dengan teruk.

Saiz yang berbaloi diliputi

• 16×16 dan 32×32 — saiz favicon klasik, digunakan dalam tab pelayar dan senarai penanda halaman pada kebanyakan pelayar desktop.
• 180×180 — saiz yang dijangkakan Apple untuk ikon skrin utama apabila halaman ditambah ke skrin utama iPhone atau iPad.
• 192×192 dan 512×512 — digunakan oleh Android dan oleh manifest aplikasi web untuk ikon skrin utama dan skrin splash pada aplikasi web yang boleh dipasang.

Mengekalkan reka bentuk boleh dibaca pada 16px

Penjana Favicon mengambil satu imej sumber dan menghasilkan keseluruhan set saiz standard sekali gus, sepenuhnya dalam pelayar anda — tetapi tiada penjana boleh membetulkan reka bentuk yang tidak berfungsi pada saiz kecil sejak awal. Perincian halus, garis nipis, dan teks kecil hilang sepenuhnya pada 16×16; bentuk atau huruf yang mudah, tebal yang kekal boleh dikenali apabila dikecilkan adalah apa yang benar-benar dibaca dengan jelas dalam tab pelayar, tidak kira berapa banyak saiz dijana daripadanya.