Ukuran favicon: file yang benar-benar Anda butuhkan dan cara membuatnya

Generator favicon lama memberikan dua puluhan file. Sebagian besar untuk gambar tile Windows dan ukuran Apple lama yang tidak lagi dibaca oleh perangkat masa kini. Kumpulan file yang masih penting itu sedikit, dan pertanyaan yang lebih sulit bukanlah ukuran mana yang perlu diekspor, melainkan apakah logo Anda masih terbaca di ukuran terkecil.

Dua definisi

Favicon adalah ikon kecil yang ditampilkan browser di tab, bookmark, dan layar utama. Di antara aset merek, favicon termasuk unik: digambar pada 512 piksel, tetapi hampir selalu dilihat pada 16.

PNG-in-ICO adalah file .ico yang gambarnya disimpan sebagai data PNG, bukan sebagai bitmap. Format ini sah sejak Windows Vista, dan membuat ukuran file tetap kecil.

Daftar file, dan siapa yang membaca masing-masing

Inilah kumpulan file yang dihasilkan alat ini, beserta nama setiap file di dalam unduhan:

File	Ukuran dalam piksel	Yang menggunakannya
favicon.ico	16, 32, dan 48, dalam satu file	Diminta secara default di root situs, juga oleh berbagai crawler dan pembaca feed
icon-16.png	16	Tab browser, ukuran yang sebenarnya dilihat hampir semua orang
icon-32.png	32	Tab di layar berkepadatan tinggi, dan taskbar Windows
icon-48.png	48	Pintasan situs di Windows
apple-touch-icon.png	180	Bookmark di layar utama iOS
icon-192.png	192	Layar utama Android, melalui web manifest
icon-512.png	512	Layar pembuka dan ajakan instal, melalui web manifest
site.webmanifest	Tidak ada	Mencantumkan ikon 192 dan 512 beserta nama situs Anda
head.html	Tidak ada	Empat baris untuk bagian head halaman Anda

File ICO tetap layak disertakan meskipun browser modern akan memakai PNG yang dideklarasikan di tag link. File favicon.ico di root masih diminta secara default, jadi jika Anda tidak menyertakannya, server akan terus-menerus mencatat galat 404.

Biarkan ukuran kecil tetap dalam format PNG. Dalam pengukuran kami, mengonversi ikon 16 piksel ke WebP justru membuatnya lebih besar, bukan lebih kecil: 332 byte sebagai PNG, 718 byte sebagai WebP, naik 116.3%, karena biaya container WebP yang tetap tidak bisa tertutupi oleh 256 piksel. Rinciannya ada di berapa banyak penghematan PNG ke WebP, hasil pengukuran.

Potongan kode untuk head

Ini adalah empat baris yang ditulis alat ini, persis seperti aslinya:

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

Setiap path diawali garis miring, jadi file-filenya diletakkan di root situs Anda, di samping halaman beranda. PNG 16, 32, dan 48 piksel tidak dicantumkan: gambarnya sudah terkandung di dalam ICO, dan file-file itu tetap ada di unduhan secara terpisah kalau sewaktu-waktu Anda membutuhkannya.

Manifest yang ditulis alat ini, dengan nama situs default, adalah sebagai berikut:

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

Membuat kumpulan file dengan alat ini

1. Buka Favicon generator dan seret logo Anda ke kotak, atau klik kotaknya untuk memilih file. Alat ini menerima PNG, JPEG, atau SVG, berukuran 512 piksel atau lebih, idealnya persegi. Sumber yang tidak persegi akan dimuat utuh di dalam persegi, bukan dipotong.
2. Baca hasil pemeriksaan sebelum hal lain. Ada tiga angka: Detail kept at 16px (detail yang tersisa), On a light tab (di tab terang), dan On a dark tab (di tab gelap). Di bawahnya, ikon 16 piksel ditampilkan dalam ukuran sebenarnya di atas warna tab terang dan gelap.
3. Baca peringatan berwarna merah di bawah angka-angka itu, jika ada. Jika tidak ada, panel menyatakan bahwa ikon tetap terbaca di 16 piksel dan kontras di kedua strip tab.
4. Telusuri daftar ukuran. Setiap baris menampilkan ikon, ukurannya, kegunaannya, dan ukuran file-nya.
5. Ketik nama situs Anda di Site name, for the manifest (nama situs untuk manifest).
6. Tekan Download everything as .zip untuk mengunduh kesembilan file, dan Copy the markup untuk menyalin potongan kode head.

Apa yang terjadi pada logo di 16 piksel

Hitungannya tidak kenal ampun. Ikon 16 piksel berarti 16 × 16 = 256 piksel secara total. Sumber 512 piksel berarti 512 × 512 = 262 144. Setiap piksel di tab mewakili 262 144 ÷ 256 = 1 024 piksel karya Anda. Wordmark tiga huruf hanya mendapat sekitar 85 piksel per huruf setelah jarak antarhuruf diperhitungkan, dan itu tidak cukup untuk menggambar sebuah huruf.

Angka detail mengukur seberapa banyak yang tersisa. Alat ini menggambar logo Anda pada 128 piksel dan pada 16, menghitung berapa tingkat kecerahan berbeda yang muncul di masing-masing (piksel transparan diabaikan), lalu melaporkan hitungan versi 16 piksel sebagai persentase dari versi 128 piksel. Di bawah 45%, alat ini memperingatkan bahwa ikon akan terbaca sebagai bentuk berwarna, bukan sebagai logo Anda. Jangan menilainya dari pratinjau saja: di 16 piksel, mata Anda mengisi sendiri bagian yang ia tahu ada di sana.

Jika angkanya anjlok, ubah logonya, bukan pengaturan ekspornya. Satu huruf, potongan bagian logo, atau siluet yang disederhanakan bisa bertahan ketika logo lengkap tidak bisa. Tidak ada pengaturan ekspor yang mampu memulihkan detail dari 256 piksel.

Ada satu peringatan lagi yang perlu diperhatikan. Jika sumber Anda lebih kecil dari 512 piksel, file 512 piksel akan diperbesar dari sumber itu dan tampak buram. Sediakan minimal 512 piksel, atau SVG.

Jebakan tab gelap

Logo yang terbaca sempurna di browser terang bisa menghilang dalam mode gelap. Alat ini mengambil warna rata-rata dari piksel logo yang terlihat, mengukurnya terhadap strip tab terang (#F2F2F2) dan strip tab gelap (#202124), lalu memberi peringatan jika salah satunya berada di bawah 1.6:1.

Logo hitam menunjukkan masalah ini sepenuhnya. Hitam memiliki luminans relatif 0; strip terang 0.8879 dan strip gelap 0.0152. Terhadap strip terang, hasilnya (0.8879 + 0.05) ÷ (0 + 0.05) = 18.76:1, sejelas-jelasnya. Terhadap strip gelap, hasilnya (0.0152 + 0.05) ÷ 0.05 = 1.30:1, di bawah batas peringatan, dan ikonnya nyaris lenyap.

Melihat kedua angka berdampingan itulah yang membuat masalahnya terlihat sebelum dirilis. Memberi logo kotak latar belakang solid sendiri adalah salah satu cara agar logo tidak bergantung pada warna tab; ubah sumbernya lalu seret kembali ke alat untuk melihat angkanya bergeser.

Cara lain untuk melakukannya

Tidak ada generator favicon bawaan di macOS maupun Windows. Di Mac, menu Tools → Adjust Size di Preview bisa mengubah ukuran gambar, jadi Anda bisa membuat setiap ukuran PNG satu per satu dari salinan sumber Anda. Namun, ICO, manifest, dan markup head tetap harus dibuat dengan alat lain, dan Anda tidak mendapat pemeriksaan di 16 piksel.

Memastikan tidak ada yang diunggah

Setiap ukuran digambar di canvas dalam browser Anda, dan file zip juga dirakit di sana. Kode pembuat zip baru diambil saat pertama kali Anda menekan tombol unduh, dan di panel Network pada developer tools hal itu terlihat sebagai skrip yang masuk; tidak ada yang keluar bersama gambar Anda. Anda juga bisa memuat halaman, memutus koneksi, lalu menyeret logo Anda ke alat: hasil pemeriksaan dan pratinjau tetap muncul.

Selanjutnya

Seret logo Anda ke Favicon generator dan baca angka detail sebelum melihat pratinjau. Jika sumber Anda berupa SVG yang langsung diekspor dari aplikasi desain, jalankan dulu melalui SVG optimiser.