Sejarah Singkat Favicon
Favicon (kependekan dari "ikon favorit") diperkenalkan oleh Internet Explorer 5 pada tahun 1999 sebagai file ICO 16×16 yang ditampilkan di bilah alamat. W3C menstandarkannya pada tahun 2000 menggunakan elemen HTML .
Selama dua dekade berikutnya, persyaratannya meningkat secara dramatis:
- 2007: Apple memperkenalkan Ikon Apple Touch (57×57 PNG) untuk bookmark iOS
- 2010: Android Chrome menambahkan dukungan untuk aplikasi web ikon
- 2012: Windows 8 memperkenalkan ikon ubin untuk aplikasi Metro yang disematkan
- 2019: favicon SVG memperoleh dukungan browser, mengaktifkan favicon yang tidak bergantung pada resolusi dan mendukung mode gelap
- 2023: Persyaratan penginstalan PWA distandarisasi pada 192×192 dan 512×512
Semua Ukuran Favicon yang Diperlukan pada tahun 2026
| File | Ukuran | Tujuan |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 (multi-resolusi) | Tab browser, IE/lama fallback |
| favicon-16x16.png | 16×16 | Browser kecil tab |
| favicon-32x32.png | 32×32 | Tab peramban, peramban toolbar |
| apple-touch-icon.png | 180×180 | iOS/macOS Safari bookmark dan beranda layar |
| android-chrome-192x192.png | 192×192 | Beranda Android Chrome layar |
| android-chrome-512x512.png | 512×512 | Android PWA splash layar |
| mstile-150x150.png | 150×150 | Menu Mulai Windows 8/10 ubin |
| safari-pinned-tab.svg | SVG | Safari yang disematkan tab (hitam dan putih SVG) |
| favicon.svg | SVG | Browser modern, mode gelap adaptif |
Favicon SVG: Dukungan Mode Gelap Adaptif
Favikon SVG mendukung kueri media CSS, mengaktifkan ikon responsif mode terang/gelap:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path fill="black" d="M10,10 L90,10 L90,90 L10,90 Z"/>
</svg>SVG ini secara otomatis menampilkan ikon terang dalam mode terang dan ikon gelap dalam mode gelap — cocok untuk logo yang perlu beradaptasi dengan tema sistem.
Buat Kumpulan Favicon Lengkap di ToolDolfen
- Buka Generator Favicon (Favicon Generator).
- Unggah PNG persegi beresolusi tinggi (disarankan 512×512 atau 1024×1024 — sumber yang lebih besar = kualitas yang lebih baik sama sekali ukuran).
- Generator menghasilkan paket ZIP lengkap yang berisi:
- Semua ukuran PNG yang diperlukan - File ICO (multi-resolusi) - template JSON manifes web - Cuplikan kode HTML untuk penerapan
- Ekstrak ZIP dan letakkan file di direktori publik proyek Anda.
- Tambahkan cuplikan HTML yang disediakan ke
.
Panduan Pendamping yang Direkomendasikan
Jelajahi tutorial dan utilitas pelengkap dari kelompok topik ini untuk menyempurnakan alur kerja digital Anda: