Ukuran favicon: ikon apa saja yang dibutuhkan situs

Ukuran favicon saat ini cukup lima file: favicon.ico 32×32, ikon SVG, Apple touch icon 180×180, dan dua PNG di web app manifest berukuran 192×192 dan 512×512, salah satunya maskable. Selebihnya, seperti ikon Apple 57×57, ubin Windows, atau ukuran PNG tambahan, sudah legacy dan boleh dibuang.

Tabel ukuran

Tab browser: favicon.ico dan SVG

Tab menampilkan ikon dalam 16 piksel CSS, yaitu 32 piksel perangkat di layar berdensitas tinggi. Karena itu gambar 32×32 di dalam favicon.ico paling penting. Anda boleh menambahkan 16 dan 48 ke file yang sama; browser memilih yang paling mendekati.

Ikon SVG mencakup semua ukuran sekaligus. Ikon ini juga dapat membawa media query prefers-color-scheme, sehingga logo gelap berubah terang di tab gelap. Deklarasikan ICO lebih dulu dengan sizes="32x32", lalu SVG sesudahnya: browser yang mendukung SVG memakainya, sisanya kembali ke ICO.

Google Search

Pedoman favicon Google meminta ikon persegi minimal 8×8 piksel dan menyarankan yang lebih besar dari 48×48. Format yang didukung adalah BMP, GIF, ICO, PNG, JPEG, PPM, dan TIFF. SVG tidak ada dalam daftar itu, sehingga situs yang hanya punya SVG tidak memberi Google apa pun untuk dipakai. Google membaca rel="icon" maupun rel="apple-touch-icon", jadi Apple touch icon 180×180 yang dideklarasikan sudah memenuhi saran ukuran. Jika Anda ingin file khusus, PNG 96×96 sudah cukup.

iPhone dan iPad

iOS memakai Apple touch icon saat seseorang menambahkan situs Anda ke layar utama. 180×180 adalah ukuran untuk iPhone saat ini (60 poin dengan skala 3×); iPad memperkecilnya tanpa masalah, jadi satu file sudah cukup. Area transparan menjadi hitam di layar utama, jadi beri ikon latar yang solid. Tanpa ikon ini, iOS memakai tangkapan layar halaman atau sebuah huruf di ubin polos.

Android dan web app yang dapat diinstal

Android dan Chrome membaca ikon dari web app manifest. Ikon 192×192 dipakai di layar utama; yang 512×512 muncul di dialog instal dan di layar splash.

Ikon maskable adalah gambar 512×512 tersendiri yang gambarnya memenuhi seluruh persegi. Android memotongnya menjadi bentuk yang dipakai ponsel: lingkaran, squircle, atau persegi bersudut bulat. Letakkan logo di dalam lingkaran di tengah dengan diameter 80% dari gambar, maka logo tetap utuh di semua mask. Tanpa ikon maskable, Android memperkecil ikon biasa Anda dan menaruhnya di atas lingkaran putih.

HTML-nya

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

Dan bagian ikon di site.webmanifest:

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

Sajikan manifest sebagai application/manifest+json dan setiap ikon dengan tipe gambar yang sebenarnya. Server yang menjawab /favicon.ico dengan halaman HTML berstatus 200 akan merusak ikon, meskipun tab network tampak normal. Single-page app sering melakukan ini.

Ukuran yang boleh dibuang

• Apple touch icon 57, 60, 72, 76, 114, 120, 144, dan 152 px. iOS menskalakan ikon 180 px.
• mstile-*.png, browserconfig.xml, dan tag msapplication-*. Semuanya melayani ubin Start Windows 8 dan 10.
• mask-icon Safari. Safari 12 ke atas memakai favicon biasa untuk tab sematan.
• Tautan PNG 16×16 dan 32×32 terpisah jika favicon.ico sudah memuat keduanya.

Periksa set Anda

Favicon Checker mengambil setiap file di atas dari situs Anda, mengukur ukuran dan format sebenarnya, dan menampilkan tampilan ikon di tab, Google, iOS, dan Android.