Ukuran favicon apa saja yang Anda butuhkan di 2026? Set idealnya

Di 2026, set favicon yang ideal terdiri dari: sebuah favicon.ico yang berisi gambar 16, 32, dan 48 px, sebuah PNG 96x96 (untuk Google Search), sebuah favicon SVG opsional, sebuah apple-touch-icon.png 180x180, serta PNG 192x192 dan 512x512 (plus satu maskable 512) yang dideklarasikan dalam web app manifest. Ubin Windows dan ukuran Apple lama hanya diperlukan jika Anda harus mendukung perangkat yang sangat tua. Semua penjelasan di bawah menguraikan alasannya, lengkap dengan tabel ukuran, HTML siap pakai, dan kesalahan umum yang perlu dihindari.

Dulu urusan favicon cukup berantakan: setiap browser dan sistem operasi meminta ukurannya sendiri, sehingga lahirlah blok <head> sepanjang 20 baris yang terkenal itu. Sekarang sebagian besar sudah usang. Browser modern menskalakan satu ikon yang bagus, iOS hanya meminta satu ukuran, dan Android membaca manifest. Artikel ini memisahkan mana yang benar-benar dibutuhkan dari yang sekadar pelengkap.

Jawaban singkat: set file favicon yang ideal

• favicon.ico (16, 32, 48 px dalam satu file) di root situs. Browser, pembaca feed, dan banyak alat masih meminta /favicon.ico secara otomatis.
• favicon.svg (opsional tetapi disarankan) agar tampil tajam di ukuran apa pun dan mendukung mode gelap.
• PNG 16x16, 32x32, dan 96x96 sebagai cadangan eksplisit. Versi 96 px membantu Google Search, yang mensyaratkan kelipatan 48 px.
• apple-touch-icon.png berukuran 180x180, buram (opaque), tanpa transparansi.
• PNG 192x192 dan 512x512 di manifest.json, plus ikon maskable 512x512 untuk Android.
• Meta tag theme-color untuk pewarnaan antarmuka browser di ponsel.
• Ubin Windows (70, 150, 310 px) dengan browserconfig.xml hanya untuk Windows lama dan situs yang disematkan di IE11.

Tabel ukuran favicon: fungsi, nama file, dan prioritas

Gunakan tabel ini sebagai daftar periksa. "Wajib" berarti situs biasa akan tampak rusak atau belum selesai tanpanya; "Disarankan" berarti ada peningkatan kualitas yang jelas; "Opsional" berarti penggunaan khusus atau lama.

favicon.ico: 16, 32, dan 48 px dalam satu file

File ICO adalah wadah yang menampung beberapa bitmap. favicon.ico yang baik berisi gambar 16x16, 32x32, dan 48x48 sehingga browser atau OS dapat memilih yang paling sesuai. Letakkan di root domain Anda (https://example.com/favicon.ico). Meskipun HTML Anda mengarah ke tempat lain, banyak crawler, pembaca RSS, dan browser lama tetap meminta URL persis tersebut, jadi menyediakannya menghindarkan Anda dari gangguan 404 di log.

Jangan sekadar mengganti ekstensi PNG menjadi .ico. Sebagian besar browser menoleransinya, tetapi beberapa alat menolaknya dan Anda kehilangan manfaat multi-resolusi. Ekspor ICO yang sebenarnya.

Favicon PNG: 16, 32, dan 96 px

Tautan PNG dengan sizes eksplisit memungkinkan browser memilih bitmap terbaik tanpa mengurai ICO. Dalam praktiknya, 32x32 mencakup tab high-DPI, dan 16x16 hampir redundan saat ini. Ukuran 96x96 layak ditambahkan karena Google Search menampilkan favicon di samping hasil pencarian dan mensyaratkan ikon persegi dengan ukuran kelipatan 48 px (48x48, 96x96, 144x144, dan seterusnya). File 96 px memberi Google sumber yang lebih tajam daripada 48 px ketika diperkecil untuk hasil di ponsel.

Tips desain: pada 16 px, detail halus akan hilang. Gunakan bentuk yang tegas dan sederhana, kontras tinggi, dan sedikit atau tanpa teks. Anda dapat menyesuaikan dan melihat pratinjau ikon di editor MakeFav sebelum mengekspor.

Favicon SVG dan mode gelap

Favicon SVG adalah satu file kecil yang tetap tajam pada kepadatan layar apa pun. Browser berbasis Chromium dan Firefox mendukungnya. Dukungan Safari secara historis terbatas, jadi jangan pernah hanya mengandalkan SVG: pertahankan cadangan ICO dan PNG.

Keunggulan terbesarnya adalah tema. Karena SVG dapat memuat CSS, Anda bisa menyesuaikan ikon dengan skema warna pengguna melalui prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Perlu dicatat bahwa media query ini mencerminkan tema browser atau OS, yang dipakai oleh bilah tab. Ia tidak mengikuti tombol pengalih tema di situs Anda sendiri.

Satu keanehan yang diketahui: ketika ICO dan SVG sama-sama didaftarkan, Chrome bisa memilih ICO. Mendeklarasikan ICO dengan sizes="32x32" dan mencantumkan SVG sesudahnya membuat Chrome memilih SVG, seperti yang ditunjukkan pada kode di bawah.

Apple touch icon: 180x180 dan ukuran lama

Ketika pengguna menambahkan situs Anda ke layar utama iOS atau iPadOS, Safari menggunakan apple-touch-icon. Saat ini satu PNG 180x180 px sudah cukup: iOS memperkecilnya untuk perangkat lama dan iPad. Beri nama apple-touch-icon.png dan letakkan di root; iOS bahkan mencari file itu secara default jika tidak ada tag link.

Aturan untuk ikon Apple:

• Tanpa transparansi. iOS mengisi piksel transparan dengan warna hitam, sehingga logo transparan sering berubah menjadi gumpalan hitam. Tambahkan warna latar yang solid.
• Tanpa sudut membulat. iOS menerapkan masker membulatnya sendiri. Sediakan persegi penuh.
• Jauhkan konten penting dari tepi, karena sudut-sudutnya akan terpotong.

Kapan Anda memerlukan ukuran lama (57, 72, 76, 114, 120, 144, 152, 167)? Hanya jika Anda mendukung iOS 6 atau yang lebih lama, atau menginginkan kontrol piksel yang persis per perangkat untuk iPad Pro (167 px) dan iPad (152 px). Untuk hampir semua situs di 2026, file 180x180 saja sudah cukup. Setup kompatibilitas maksimum di bawah menyertakan beberapa di antaranya sebagai pelengkap.

Ikon Android dan PWA: 192, 512, dan maskable

Chrome di Android dan browser lain yang mendukung PWA membaca ikon dari web app manifest, bukan dari <link rel="icon">. Agar dapat diinstal, Anda memerlukan setidaknya PNG 192x192 dan 512x512. Ikon 192 px digunakan di layar utama dan peluncur aplikasi; ikon 512 px muncul di layar pembuka dan dialog instal.

Ikon maskable dan zona aman

Ikon adaptif Android dapat dipotong menjadi lingkaran, squircle, atau bentuk lain tergantung perangkat. Ikon maskable dirancang agar aman dipotong: konten penting harus berada di dalam zona aman, yaitu lingkaran di tengah dengan diameter 80% dari gambar (jari-jari sama dengan 40% dari sisi). Untuk file 512x512, artinya logo Anda harus tetap berada dalam lingkaran berdiameter sekitar 410 px, dan warna latar harus diperluas hingga keempat tepi agar tidak ada celah setelah proses masking.

Deklarasikan ikon maskable sebagai entri tersendiri dengan "purpose": "maskable". Hindari "any maskable" pada satu file: padding yang diperlukan untuk masking tampak terlalu kecil ketika ikon ditampilkan tanpa masker.

Contoh manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Sajikan file ini sebagai application/manifest+json (atau application/json) dan tautkan dari setiap halaman dengan <link rel="manifest" href="/manifest.json">. Beberapa proyek menamainya site.webmanifest; namanya tidak penting, yang penting adalah tautannya.

Ubin Windows dan browserconfig.xml

Windows 8.1 dan 10 memungkinkan pengguna menyematkan situs ke menu Start, dan IE11 serta Edge lama membaca gambar ubin dari browserconfig.xml. Ukuran yang umum adalah 70x70 (kecil), 150x150 (sedang), 310x150 (lebar), dan 310x310 (besar). Edge berbasis Chromium menggunakan manifest dan favicon biasa, jadi ini adalah fitur lama. Sertakan hanya jika audiens Anda masih mencakup pengguna Windows lama, misalnya di lingkungan korporat.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: mewarnai antarmuka browser

Meta tag theme-color memberi tahu browser seluler (dan beberapa browser desktop) warna apa yang dipakai untuk bilah alamat atau bilah judul. Ini bukan favicon, tetapi termasuk dalam set branding yang sama. Anda dapat menyediakan nilai terpisah untuk mode terang dan gelap:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Setup modern minimal vs. kompatibilitas maksimum

Setup modern minimal (disarankan untuk sebagian besar situs)

Lima file mencakup lebih dari 99% penggunaan nyata: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), dan dua ikon manifest (192 dan 512). Tambahkan PNG 96x96 jika visibilitas di Google Search penting, dan ikon maskable jika Anda merilis PWA.

<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="/manifest.json">

Setup kompatibilitas maksimum

Pilih ini ketika Anda melayani audiens yang luas atau enterprise, atau ketika Anda ingin setiap klien yang mungkin terjangkau. Setup ini menambahkan ukuran PNG eksplisit, ukuran Apple lama, ubin Windows, dan warna tema.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Perhatikan path relatif terhadap root yang diawali /. Path ini berfungsi di kedalaman halaman mana pun, yang membawa kita ke kesalahan paling umum.

Kesalahan favicon yang umum dan cara memperbaikinya

1. Path yang salah

Tautan seperti href="favicon.ico" diselesaikan relatif terhadap URL saat ini, sehingga berfungsi di / tetapi gagal di /blog/post/. Gunakan URL relatif terhadap root (/favicon.ico) atau URL absolut. Periksa juga bahwa file-filenya benar-benar ada: buka setiap URL langsung di browser dan pastikan mengembalikan HTTP 200, bukan pengalihan ke halaman 404 atau halaman login.

2. Atribut sizes hilang atau salah

Tanpa sizes, browser harus mengunduh ikon untuk memeriksanya, dan bisa memilih yang salah. Selalu deklarasikan sizes pada tautan PNG dan pastikan sesuai dengan dimensi piksel sebenarnya. File berlabel 32x32 yang sebenarnya 64x64 menimbulkan hasil yang tidak konsisten.

3. Cache yang agresif

Browser menyimpan cache favicon dalam waktu lama, sering kali terpisah dari cache halaman. Setelah rebranding, ikon lama bisa bertahan berhari-hari. Ubah nama file atau tambahkan query string versi (/favicon.ico?v=2) dan perbarui tag link. Hard reload sering kali tidak menyegarkan ikon tab; membuka URL ikon secara langsung lalu memuat ulang biasanya berhasil.

4. Gambar tidak persegi

Favicon harus persegi. Logo persegi panjang akan teregang, terpotong, atau diberi letterbox secara tak terduga. Rancang tanda persegi khusus, seperti inisial atau simbol, alih-alih mengecilkan wordmark yang lebar.

5. Apple touch icon transparan berubah menjadi hitam

iOS mengisi transparansi dengan warna hitam. Beri ikon 180x180 latar yang buram dan jangan membulatkan sudutnya terlebih dahulu.

6. Ikon maskable tanpa zona aman

Jika logo menyentuh tepi ikon maskable, Android akan memotongnya. Jaga agar tetap berada di dalam lingkaran tengah 80% dan isi seluruh kanvas dengan warna latar.

7. Memblokir ikon dari crawler

Jika robots.txt melarang path favicon Anda, Google tidak dapat mengambilnya dan akan menampilkan ikon globe generik di hasil pencarian. Ingat juga bahwa Google memerlukan favicon berada pada host yang sama dengan halaman dan hanya memperbaruinya sesekali, sehingga perubahan bisa memakan waktu berhari-hari atau berminggu-minggu untuk muncul.

8. Lupa menautkan manifest atau mengisi purpose

Manifest yang tidak ditautkan, atau yang tidak memiliki ikon 192 dan 512 px, mencegah munculnya prompt instal di Chrome. Validasi di alat pengembang browser Anda pada tab Application.

Buat seluruh set dalam satu klik

Membuat selusin file secara manual di editor gambar, lalu mengonversinya ke ICO dan menulis manifest, itu melelahkan dan rawan kesalahan. MakeFav menghasilkan semua file di atas dari satu gambar, teks, atau emoji: favicon.ico multi-ukuran, PNG, SVG, Apple touch icon, PNG 192/512, ikon maskable, ubin Windows, manifest.json dan browserconfig.xml, plus cuplikan HTML siap tempel, semuanya dalam satu unduhan ZIP. Anda dapat menyempurnakan latar, padding, dan bentuk di editor, memverifikasi situs yang sudah ada dengan pemeriksa favicon, dan mengotomatiskan pembuatan melalui sumber daya developer.

Daftar periksa deployment

1. Unggah semua file ke root situs Anda.
2. Tempel cuplikan HTML ke dalam <head> setiap halaman (atau layout bersama Anda).
3. Pastikan path relatif terhadap root dan mengembalikan HTTP 200.
4. Periksa mode terang dan gelap, instalasi di layar utama iOS, dan instalasi di Android.
5. Jalankan pemeriksa untuk menemukan ukuran yang hilang atau tidak sesuai.
6. Bersihkan cache dengan string versi jika Anda mengganti ikon lama.

Pertanyaan yang sering diajukan

Apakah saya masih memerlukan favicon.ico di 2026?

Ya. Meskipun browser modern menerima PNG dan SVG, banyak crawler, pembaca feed, klien email, dan browser lama masih meminta /favicon.ico secara langsung. ICO multi-ukuran dengan gambar 16, 32, dan 48 px adalah file kecil yang mencegah ikon hilang dan error 404.

Berapa ukuran favicon untuk Google Search?

Google mensyaratkan favicon persegi dengan ukuran kelipatan 48 px, minimal 48x48. PNG 96x96 adalah pilihan aman, dan SVG juga didukung. Google juga memerlukan file tersebut dapat di-crawl, jadi jangan blokir di robots.txt. Pembaruan bisa memakan waktu berhari-hari atau berminggu-minggu untuk muncul.

Apakah 180x180 cukup untuk Apple touch icon?

Untuk hampir semua situs, ya. iOS dan iPadOS memperkecil PNG 180x180 untuk setiap perangkat saat ini. Ukuran yang lebih lama (57 hingga 152 px) hanya penting untuk versi iOS yang sangat tua. Ingat untuk memakai latar yang buram agar ikon tidak berubah menjadi hitam.

Apa itu ikon maskable dan apakah saya memerlukannya?

Ikon maskable adalah PNG 512x512 yang dirancang untuk bentuk ikon adaptif Android. Konten pentingnya berada di dalam lingkaran berdiameter 80% di tengah, dan latarnya mengisi seluruh persegi. Anda hanya memerlukannya jika menawarkan PWA yang dapat diinstal, tetapi ikon ini membuat tampilannya terasa native alih-alih berada dalam lingkaran putih.

Mengapa favicon lama saya masih muncul setelah saya menggantinya?

Browser menyimpan cache favicon secara terpisah dan dalam waktu lama. Ganti nama file atau tambahkan query string versi seperti ?v=2, perbarui tag link, lalu buka URL ikon secara langsung dan muat ulang. Mesin pencari mungkin memerlukan waktu lebih lama untuk menyegarkan salinan mereka sendiri.