Seret gambar ke sini atau klik untuk menelusuri
PNG, JPG, SVG — disarankan 512×512 px atau lebih besar
| Size | Filename | Use case |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab (most common) |
| 32×32 | favicon-32x32.png | Browser tab (HiDPI), taskbar shortcut |
| 48×48 | favicon.ico (embedded) | Windows taskbar pinned sites |
| 57×57 | favicon-57x57.png | iOS non-retina home screen (legacy) |
| 72×72 | favicon-72x72.png | iPad non-retina (legacy) |
| 96×96 | favicon-96x96.png | Android, Google TV |
| 114×114 | favicon-114x114.png | iPhone retina (legacy) |
| 144×144 | favicon-144x144.png | iPad retina, Windows 8 tile |
| 152×152 | favicon-152x152.png | iPad retina (iOS 7+) |
| 180×180 | apple-touch-icon.png | iPhone / iPad modern (iOS 8+) |
| 192×192 | android-chrome-192x192.png | Android Chrome, PWA manifest |
| 512×512 | android-chrome-512x512.png | PWA splash screen, maskable icon |
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />
Browser modern membutuhkan: 16×16 dan 32×32 (tab/pintasan browser), 48×48 (taskbar Windows), 57×57 dan 72×72 (iOS non-retina), 96×96 (Android Chrome), 114×114 dan 144×144 (iOS/Android retina), 152×152 dan 180×180 (layar beranda iOS), 192×192 dan 512×512 (PWA splash/maskable).
Gunakan PNG atau SVG persegi berukuran 512×512 px atau lebih besar untuk hasil terbaik. Hindari gambar dengan detail penting di dekat tepi. SVG ideal karena dapat diskalakan tanpa kehilangan kualitas.
Ya, jika Anda ingin situs Anda dapat diinstal sebagai Progressive Web App (PWA). Webmanifest berisi nama, jalur ikon, dan warna latar belakang untuk layar mulai aplikasi.
Tempatkan semua file yang dihasilkan di root situs Anda dan tambahkan tag ini ke head HTML Anda: '<'link rel='icon' href='/favicon.ico'>, '<'link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>, '<'link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>, dan '<'link rel='manifest' href='/site.webmanifest'>.