Fungsi tiap format
Favicon bukan satu file. Browser, sistem operasi, dan alat bookmark masing-masing mencari file yang berbeda, dan standar HTML membolehkan satu halaman mendeklarasikan beberapa ikon lalu menyerahkan pilihannya ke browser.
| File | Format | Dipakai untuk |
|---|---|---|
favicon.ico |
ICO, beberapa bitmap dalam satu file | Cadangan: tanpa tautan ikon apa pun, browser bisa meminta /favicon.ico di root situs. Paket ini mengisinya dengan gambar 16, 32, dan 48 px. |
favicon.svg |
SVG | Satu file yang bisa diskalakan untuk browser yang mendukung favicon SVG. File ini bisa membawa warna terang dan gelapnya sendiri. |
favicon-16x16.png, favicon-32x32.png |
PNG | Salinan raster dari ikon tab, untuk website builder atau alat yang meminta favicon PNG. |
apple-touch-icon.png |
PNG, 180 × 180 px | Layar utama iPhone dan iPad, saat seseorang menambahkan situsnya ke sana. |
site.webmanifest |
JSON | Nama, warna, dan ikon aplikasi untuk web app yang bisa diinstal (lihat panduan ikon maskable). |
ICO adalah format tertua dan masih yang paling luas dibaca. Standar HTML menyebut permintaan /favicon.ico sebagai sesuatu yang boleh dilakukan browser saat halaman tidak mendeklarasikan ikon, jadi anggap saja sebagai jaring pengaman dan tetap tautkan secara eksplisit. MDN mencatat bahwa file ICO bisa menyimpan beberapa ukuran, itulah sebabnya satu file bisa mencakup 16, 32, dan 48 px.
SVG adalah satu-satunya format yang tetap tajam di setiap ukuran dan setiap kepadatan piksel. Blok <style> di dalam SVG bisa mengganti warna dengan prefers-color-scheme, jadi logo gelap tetap terlihat di tab bar yang gelap. Server harus mengirimnya sebagai image/svg+xml: Can I use mencatat bahwa browser berbasis Chromium dan Firefox mewajibkan tipe itu.
Favicon PNG adalah bitmap biasa, biasanya ditautkan dengan atribut sizes. Standar menyebut sizes hanya sebagai petunjuk: browser boleh memakainya untuk memilih file yang ukurannya paling dekat, tapi tidak ada yang memaksanya. Ini bisa menguntungkan sekaligus merugikan, seperti dijelaskan di bagian berikutnya.
Browser mana memakai yang mana
Dukungan favicon SVG menurut data Can I use per 28 September 2026: Chrome dan Edge mulai versi 80, Firefox mulai 41, Opera mulai 67, dan Safari mulai 26.0, baik di macOS maupun iOS. Safari 18 dan sebelumnya tidak memakai favicon SVG, jadi mengandalkan file PNG dan ICO. Tim WebKit mengumumkan perubahan di Safari ini lewat tulisan rilis Safari 26.0 pada September 2025. Siapa pun yang masih memakai Safari lama tetap melihat ikon raster, itulah sebabnya favicon SVG tidak pernah menggantikannya.
Saat sebuah halaman mendeklarasikan beberapa ikon, standar HTML menyebutkan bahwa browser memilih yang paling cocok untuknya, dan kalau beberapa sama cocoknya, ikon yang dideklarasikan terakhir yang menang. Kalau sebuah file ternyata tidak bisa dipakai, misalnya formatnya tidak bisa dibaca, browser beralih ke file berikutnya. "Paling cocok" diserahkan ke browser: browser yang memilih berdasarkan ukuran yang dideklarasikan bisa lebih memilih PNG bertanda sizes="32x32" daripada SVG yang tidak mendeklarasikan ukuran, apa pun urutannya. Karena itu, snippet di bawah sama sekali tidak menautkan PNG berukuran: ICO sudah mencakup ukuran raster, dan SVG ditaruh sesudahnya.
Ada satu detail yang berasal dari praktik, bukan dari vendor browser. Artikel favicon dari Evil Martians menyarankan sizes="32x32" pada tautan ICO "to fix the Chrome bug where it chooses an ICO file over an SVG" (untuk mengatasi bug Chrome yang memilih file ICO alih-alih SVG); changelog-nya menyebutkan bahwa nilai itu menggantikan sizes="any" karena alasan tersebut pada Juli 2023. Artikel itu tidak menautkan laporan bug Chromium, dan kami juga tidak menemukannya, jadi anggap saja sebagai pengalaman lapangan. Generator mengikuti saran itu. Tidak ada ruginya, karena ICO memang berisi gambar 32 px.
Apple touch icon. Safari Web Content Guide dari Apple yang sudah diarsipkan mendokumentasikan <link rel="apple-touch-icon"> dan mencantumkan ukuran 180 × 180 px untuk iPhone Retina. MDN menambahkan bahwa iOS tidak memakai tautan rel="icon" biasa untuk ikon layar utama. Dokumentasi Apple tidak menjelaskan apa yang terjadi pada piksel transparan; sebuah balasan di forum developer Apple (dari developer lain, bukan dari Apple) menyebutkan bahwa piksel itu tampil hitam. Karena itu, generator selalu membuat file ini tidak transparan, dengan warna latar pilihanmu.
Warna tema adalah bagian yang paling tidak bisa diandalkan. Can I use mencatat bahwa <meta name="theme-color"> tidak didukung di Firefox, dan menyebutkan bahwa Chrome desktop hanya memakai warna itu untuk web app yang terinstal. Can I use dan MDN sama-sama menyebutkan bahwa mulai Safari 26, warna ini hanya berlaku untuk web app yang terinstal. Kedua sumber berbeda pendapat soal detail untuk Chrome di Android dan Safari di iOS 26. Sertakan tag-nya, tapi jangan merancang desain dengan bergantung padanya.
Tautan mask-icon lama dari Apple untuk tab yang disematkan di Safari masih muncul di dokumentasinya yang diarsipkan. Kami tidak menemukan catatan resmi yang menghentikannya, dan juga tidak ada yang mewajibkannya. Paket ini tidak menyertakannya.
Set minimal yang layak dipasang
Untuk situs dengan artwork vektor, tautkan favicon.ico, favicon.svg, dan apple-touch-icon.png, ditambah manifest dengan ikon 192 dan 512 px kalau situsnya ingin bisa diinstal. Ini set yang akhirnya dipilih artikel Evil Martians. Favicon PNG boleh tetap ada di server untuk alat yang memintanya, tanpa tag tautan. Untuk situs yang logonya hanya ada dalam bentuk bitmap, lewati SVG: PNG yang dibungkus dalam file SVG tetaplah bitmap dan tidak memberi keuntungan apa pun. Kalau kamu ingin favicon SVG, lakukan tracing dulu ke path vektor asli.
Snippet HTML
Berikut tag yang ditulis generator ke favicon.html untuk paket contoh di bawah, dengan file-file di root situs:
<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">
<meta name="theme-color" content="#0a2d8f">
Kalau file-mu ada di sebuah folder seperti /assets/icons/, isi folder itu sebagai Prefix path di pembuat favicon dan setiap href ikut berubah; salin juga favicon.ico ke root situs, tempat browser mencarinya di halaman yang tidak menautkan ikon. Sumber PNG, JPG, atau WebP menghasilkan tag yang sama tanpa baris SVG.
Contoh nyata untuk diunduh
Kami menjalankan logo situs ini sendiri (SVG milik kami, bukan unggahan orang lain) lewat pembuat favicon dengan nama "png2svg.art", warna tema #0a2d8f, latar #e8efff, dan padding 8 %. Tidak ada yang diedit sesudahnya: ini persis file yang dibuat alat tersebut.
Favicon 32 px, dalam ukuran aslinya: 
Apple touch icon 180 px, tidak transparan, di atas warna latar:
Unduh seluruh paket contoh (ZIP): favicon.svg, favicon.ico, kedua favicon PNG, Apple touch icon, empat ikon aplikasi, site.webmanifest, favicon.html, dan README.
Mengecek favicon-mu
Buka halaman di jendela pribadi (incognito) setelah mengunggah: browser menyimpan favicon di cache dalam waktu lama, dan ikon lama di jendela biasa tidak membuktikan apa-apa. Di panel network pada developer tools, pastikan favicon.svg dikirim sebagai image/svg+xml dan setiap file menjawab dengan status 200. Lihat tab-nya dalam mode terang dan gelap, lalu tambahkan halaman ke layar utama ponsel untuk mengecek touch icon-nya.