Ukuran favicon yang sebenarnya diinginkan browser dan perangkat

Favicon dulu berarti satu gambar kecil 16×16. Sekarang tab browser, pintasan layar utama ponsel, bilah bookmark, dan ikon sentuh Apple masing-masing mengharapkan ukurannya sendiri, dan hanya menyediakan satu meninggalkan beberapa konteks tersebut terlihat buram atau menampilkan ikon cadangan generik alih-alih milik Anda.

Mengapa satu ukuran tidak cukup

Ikon 16×16 yang diperbesar untuk mengisi slot ikon layar utama 180×180 terlihat sama kotak-kotaknya seperti gambar kecil apa pun yang diregangkan besar — tidak ada cara untuk menambahkan detail yang tidak ada di sumbernya. Setiap konteks tempat favicon muncul memiliki resolusi yang diharapkan sendiri, dan praktik modern adalah menyediakan serangkaian ukuran alih-alih mengandalkan browser untuk memperbesar satu file kecil dengan buruk.

Ukuran yang layak dicakup

• 16×16 dan 32×32 — ukuran favicon klasik, digunakan di tab browser dan daftar bookmark di sebagian besar browser desktop.
• 180×180 — ukuran yang diharapkan Apple untuk ikon layar utama saat halaman ditambahkan ke layar utama iPhone atau iPad.
• 192×192 dan 512×512 — digunakan oleh Android dan oleh manifes aplikasi web untuk ikon layar utama dan layar splash pada aplikasi web yang dapat diinstal.

Menjaga desain tetap terbaca pada 16px

Generator Favicon mengambil satu gambar sumber dan menghasilkan seluruh set ukuran standar sekaligus, sepenuhnya di browser Anda — tetapi tidak ada generator yang bisa memperbaiki desain yang sejak awal tidak berfungsi pada ukuran kecil. Detail halus, garis tipis, dan teks kecil menghilang sepenuhnya pada 16×16; bentuk atau huruf yang sederhana, tebal, yang tetap dapat dikenali saat diperkecil adalah yang benar-benar terbaca jelas di tab browser, terlepas dari berapa banyak ukuran yang dihasilkan darinya.