Buat Favicon

Mengapa satu ikon menjadi sembilan file

Setiap file dalam set ada karena sesuatu yang spesifik membacanya, dan tidak membaca yang lain. favicon.ico yang berisi 16, 32, dan 48 masih menjadi file yang dicari browser di root situs secara default, dan yang pertama kali diperiksa oleh banyak software lama. favicon-16x16.png dan favicon-32x32.png adalah yang lebih disukai browser saat ini untuk tab, karena PNG di ukuran persis lebih baik daripada hasil penskalaan. apple-touch-icon.png berukuran 180 piksel adalah yang dipasang iOS di layar utama — tanpa dukungan transparansi, jadi gambarnya disatukan dengan latar belakang solid agar tidak muncul dengan sudut hitam. android-chrome-192x192.png dan 512x512.png adalah yang dipakai progressive web app terinstal untuk ikon launcher dan splash screen-nya, dideklarasikan di site.webmanifest.

Menyajikan satu PNG besar untuk semuanya hasilnya buruk di mana-mana, dan itulah jalan pintas yang paling umum. Browser mengunduh setengah megabyte untuk menggambar enam belas piksel, iOS mengabaikan aturan transparansi dan meletakkan logo Anda di atas kotak hitam, dan ikon launcher terpotong oleh masker apa pun yang diterapkan platform. Set ini merepotkan justru karena setiap pemakainya punya tuntutan sendiri.

Potongan HTML sama pentingnya dengan gambarnya. Browser tidak menemukan sebagian besar file ini sendiri — hanya favicon.ico di root yang ditemukan berdasarkan konvensi — jadi tag link-lah yang menghubungkannya, dan manifest membutuhkan tag sendiri. Potongan ini memakai path relatif-root, yang berfungsi tanpa diubah selama file berada di web root; jika Anda menaruhnya di subfolder, path di potongan maupun di manifest perlu disesuaikan.

Rancang untuk 16 piksel terlebih dahulu. Di ukuran itu Anda hanya punya ruang untuk satu bentuk dan mungkin dua warna — tanpa teks, tanpa gradien, tanpa detail halus, dan jelas tanpa wordmark lengkap. Sumber persegi, tegas, dan kontras tinggi berukuran minimal 512 piksel, atau SVG, menghasilkan set paling bersih; pratinjau menampilkan hasil 16px apa adanya, bukan yang dipercantik, karena justru ukuran itulah yang nanti akan mengecewakan Anda. Sumber yang tidak persegi diberi ruang kosong transparan hingga persegi, tidak dipotong atau ditarik.

Jika Anda butuh hal lain

Set yang dibuat di sini adalah inti modern yang praktis. Jika Anda butuh semua ekornya yang panjang — gambar tile Windows, mask icon untuk pinned tab Safari, browserconfig Microsoft, ukuran Apple yang lebih lama — RealFaviconGenerator mencakup semuanya dan memeriksa situs live Anda setelahnya, hal yang sungguh berguna dan tidak bisa dilakukan alat ini.

Untuk build pipeline, membuat ikon secara manual adalah bentuk pekerjaan yang sama sekali keliru. favicons, pwa-asset-generator, dan plugin framework yang dibangun di atas sharp menghasilkan set lengkap dari satu file sumber setiap kali Anda deploy, sehingga ikon tidak bisa ketinggalan zaman saat logo berubah — yang, dalam praktiknya, selalu terjadi.