Standar favicon 2026
Aturan ikon web sudah berganti. Ini ringkasan jelas untuk menyiapkan dukungan lintas-peramban, iOS, Android, dan PWA.
Apa yang termasuk dalam paket
Cakupan penuh dengan kumpulan ikon modern tahun 2026 untuk peramban baru, perangkat iOS/Android, serta PWA.
Favicon SVG
Format utama: skala tak terbatas dan dukungan tema terang/gelap lewat CSS di dalam berkas.
ICO cadangan
Berkas legasi 32×32 atau 48×48 bagi peramban lawas dan beberapa UI desktop.
Apple Touch Icon
PNG 180×180 untuk layar beranda di iPhone, iPad, dan Safari.
Web Manifest
JSON yang menentukan perilaku PWA dan ikon maskable di Android.
Ikon adaptif otomatis
Pada favicon SVG Anda bisa memasukkan media query agar merek tetap terbaca pada UI peramban terang maupun gelap.
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }PWA & ikon maskable
PWAs modern membutuhkan ikon maskable: sistem operasi memotong bentuk (lingkaran, squircle, dll.) sementara logo harus tetap aman di zona aman.
Perfect Metadata menambahkan ruang aman saat memaketkan ikon Anda sehingga tidak terlihat terpotong di Android atau ChromeOS.
Contoh implementasi
Tempel cuplikan ini di <head> HTML untuk mencakup apa yang umum diharapkan tahun 2026.
<!-- Implementasi di <head> -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">
<meta name="theme-color" content="#ffffff">Siap tayang?
Bangun semua aset dalam satu alur — gratis dan disesuaikan untuk standar sekarang.