Cara Memeriksa Favicon Situs Web: Menemukan, Memverifikasi & Memperbaiki Ikon

Favicon (kependekan dari "favourites icon", ikon favorit) adalah berkas gambar kecil yang mewakili sebuah situs web di tab peramban, bilah alamat, bookmark, daftar riwayat, dan halaman hasil mesin pencari. Biasanya berupa gambar persegi 16×16 atau 32×32 piksel, meski peramban modern meminta beberapa ukuran tergantung konteks — pintasan layar utama di iOS butuh gambar 180×180 piksel, sementara instalasi PWA di Android butuh versi 192×192 dan 512×512 piksel.

Mengapa favicon penting di luar branding

Favicon yang dikonfigurasi dengan benar memberi tiga manfaat praktis di luar identitas visual. Pertama, Google menampilkan favicon di samping hasil pencarian di SERP — favicon yang hilang atau rusak menampilkan ikon bola dunia generik yang terkesan tidak profesional. Kedua, peramban seluler memakai berkas favicon untuk membuat pintasan layar utama — situs tanpa ikon sentuh berukuran tepat mendapat tangkapan layar berkualitas rendah sebagai pintasannya. Ketiga, favicon tab membantu pengguna mengenali dan kembali ke tab Anda saat banyak tab terbuka.

Format warisan favicon.ico

Format `.ico` lahir bersama Internet Explorer pada 1999 dan menjadi bawaan universal karena peramban otomatis meminta `/favicon.ico` dari root setiap domain — tanpa perlu tag link. Berkas `.ico` modern adalah wadah yang menampung beberapa ukuran (biasanya 16×16 dan 32×32) dalam satu berkas. Meski sudah tua, `favicon.ico` tetap penting sebagai cadangan universal untuk peramban lawas, klien email, dan alat yang tidak membaca tag link HTML.

Ada tiga metode andal untuk menemukan URL favicon sebuah situs. Yang tercepat menangani sebagian besar kasus; sisanya adalah cadangan untuk situs dengan konfigurasi kustom.

Metode 1: jalur bawaan /favicon.ico

Tambahkan `/favicon.ico` ke domain mana pun dan buka di tab peramban. Contohnya: `https://example.com/favicon.ico`. Jika gambar ikon muncul di tab dan tampil di halaman, berkasnya ada dan termuat dengan benar. Jika Anda melihat halaman error atau halaman putih kosong, berkasnya tidak ada atau server salah konfigurasi. Metode ini bekerja untuk mayoritas situs yang memakai jalur konvensional.

Metode 2: lihat sumber halaman untuk mencari tag link

Klik kanan halaman mana pun dan pilih "Lihat Sumber Halaman" (atau tekan Ctrl+U di Windows, Cmd+U di Mac). Cari di HTML `rel="icon"` atau `rel="shortcut icon"`. Nilai atribut `href` pada tag `<link>` yang cocok adalah jalur favicon yang persis. Cara ini menemukan lokasi kustom — situs yang disajikan dari CDN sering memakai URL absolut seperti `https://cdn.example.com/assets/favicon.svg` alih-alih jalur root bawaan.

Metode 3: periksa manifest aplikasi web

Aplikasi web progresif mendeklarasikan ikonnya di berkas `manifest.json` yang ditautkan lewat `<link rel="manifest">` di head HTML. Buka URL manifest dan cari larik `icons` — setiap entri mencantumkan jalur gambar dan ukuran pikselnya. Beginilah Android dan Chrome menangani instalasi PWA, dan manifest sering menjadi satu-satunya tempat jalur PNG 192×192 dan 512×512 dideklarasikan.

Memeriksa apakah favicon terkonfigurasi dengan benar butuh lebih dari sekadar memastikan berkasnya ada. Favicon bisa ada tetapi tetap gagal tampil jika server mengembalikan tipe konten yang salah, berkasnya terlalu kecil untuk konteks yang diminta, atau peramban menyimpan versi cache yang usang.

Jumlah berkas favicon yang dibutuhkan situs yang terkonfigurasi baik telah turun signifikan berkat dukungan peramban modern. Memahami ukuran mana yang masih diperlukan — dan mana yang kini redundan — memungkinkan Anda membangun set favicon yang minimal dan benar.

Argumen untuk favicon SVG

Favicon SVG didukung semua peramban utama sejak 2021. Satu berkas `favicon.svg` merender sempurna pada ukuran apa pun — 16×16 di tab, 32×32 di bilah bookmark, atau resolusi menengah apa pun di layar berdensitas tinggi. SVG juga mendukung media query `prefers-color-scheme` di dalam berkasnya, memungkinkan favicon beralih otomatis antara versi terang dan gelap sesuai tema OS. Satu berkas SVG menggantikan semua favicon PNG kecuali ikon sentuh Apple dan ikon manifest PWA.

Sebagian besar kegagalan favicon jatuh ke sejumlah kecil kategori yang bisa diprediksi. Masing-masing punya perbaikan langsung begitu Anda tahu harus melihat ke mana.

Favicon tidak muncul di tab peramban

Penyebab paling umum adalah tag `<link rel="icon">` yang hilang dikombinasikan dengan berkas `/favicon.ico` yang tidak ada. Peramban mundur ke permintaan `/favicon.ico` secara otomatis, tetapi jika berkas itu mengembalikan 404, tidak ada ikon yang muncul. Perbaiki dengan menambahkan berkas di root domain dan tag `<link rel="icon" href="/favicon.ico">` di `<head>` HTML Anda. Untuk jalur kustom, tag link wajib ada — peramban tidak akan menebak lokasi kustom.

Favicon tampak kosong atau sebagai gambar rusak

Ikon favicon yang rusak di tab biasanya berarti berkasnya ada tetapi bukan format gambar yang valid. Penyebab paling umum adalah menyimpan berkas PNG dengan ekstensi `.ico` tanpa konversi yang benar. Gunakan detektor format gambar untuk memastikan format berkas yang sebenarnya — berkas bernama `favicon.ico` bisa jadi sebenarnya PNG, JPEG, atau dokumen HTML. Solusinya adalah menghasilkan `.ico` yang benar memakai pembuat favicon.

Google menampilkan favicon yang salah di hasil pencarian

Google meng-cache favicon dan memperbaruinya secara independen dari perayapan reguler — bisa butuh berhari-hari hingga berminggu-minggu agar favicon baru muncul di SERP. Untuk mempercepat proses: pastikan URL favicon dapat diakses publik (tidak diblokir robots.txt dan tidak butuh autentikasi), pastikan berkas memiliki header Content-Type yang benar, dan minta pengindeksan ulang di Google Search Console. Google mensyaratkan favicon minimal 48×48 piksel untuk tampilan SERP; gambar yang lebih kecil diabaikan.

Favicon lama bertahan setelah pembaruan

Cache favicon peramban membandel dan tidak menghormati header cache HTTP seperti sumber daya biasa. Muat ulang paksa (Ctrl+Shift+R atau Cmd+Shift+R) memaksa sebagian besar peramban mengambil ulang favicon. Di Chrome, Anda bisa membersihkannya lewat DevTools → Application → Storage → Clear Site Data. Sebagai strategi deployment, mengganti nama berkas favicon atau menambahkan query string anti-cache pada href tag link memaksa semua peramban langsung mengambil versi baru.

Membuat semua ukuran favicon yang diperlukan secara manual dari nol itu melelahkan dan rawan kesalahan. Pendekatan praktisnya adalah memulai dari satu gambar sumber beresolusi tinggi lalu menghasilkan semua ukuran yang diperlukan secara otomatis.

Persyaratan gambar sumber

• Minimal 512×512 piksel — ini ukuran terbesar yang dibutuhkan (layar pembuka PWA) dan menjadi sumber penurunan resolusi untuk semua ukuran lebih kecil
• Rasio aspek persegi — favicon selalu persegi; sumber yang tidak persegi akan terpotong atau terdistorsi
• Latar transparan — PNG transparan bekerja lebih baik daripada latar putih, yang tampak sebagai kotak putih di tab mode gelap
• Desain sederhana — detail halus dan garis tipis tampak buram pada 16×16 px; logo dengan sapuan tebal dan kompleksitas minim paling bagus di ukuran kecil
• Format PNG atau SVG — keduanya menjaga kualitas pada ukuran apa pun; hindari JPEG yang menimbulkan artefak kompresi pada tepi keras

Memakai Pembuat Favicon

Unggah gambar sumber Anda ke pembuat favicon dan ikon aplikasi. Alat ini menghasilkan set favicon standar lengkap — `favicon.ico` (16×16 dan 32×32), `favicon-32x32.png`, `apple-touch-icon.png` (180×180), `android-chrome-192x192.png`, dan `android-chrome-512x512.png` — beserta tag link HTML yang persis untuk ditempel di bagian `<head>` Anda. Seluruh generasi berjalan di peramban Anda; gambar Anda tidak pernah diunggah ke server mana pun.

Menganalisis set favicon yang sudah ada

Jika Anda sudah punya set favicon dan ingin tahu berkas mana yang redundan bagi peramban modern, penganalisis ukuran bundel favicon mencantumkan setiap berkas di set Anda, mengidentifikasi ukuran usang (seperti ikon iOS 57×57 dan 72×72 yang diabaikan iOS modern), dan merekomendasikan set modern minimal. Memangkas set favicon yang gemuk dari 15 berkas menjadi 5 secara berarti mengurangi bobot halaman pada setiap permintaan.

Lanskap favicon telah stabil secara signifikan. Berikut konsensus terkini tentang implementasi minimal yang benar untuk 2026.

Set favicon modern minimal

Anda butuh lima berkas dan lima tag link. Tambahkan `favicon.svg` sebagai ikon utama (semua peramban modern), `favicon.ico` sebagai cadangan (peramban lawas dan alat yang tidak mengurai HTML), `apple-touch-icon.png` 180×180 untuk iOS, serta `android-chrome-192x192.png` dan `android-chrome-512x512.png` yang dirujuk di `manifest.json` untuk instalasi PWA. Tag HTML untuk tiga berkas pertama diletakkan di `<head>` Anda; ikon PWA dideklarasikan hanya di manifest.

Favicon SVG mendukung mode gelap, berskala sempurna pada resolusi apa pun, dan menggantikan semua ukuran PNG yang dibutuhkan peramban modern. Favicon.ico ada murni sebagai cadangan untuk ekor panjang klien yang bukan peramban.

Favicon untuk mode gelap

Favicon SVG bisa menyematkan media query `prefers-color-scheme` untuk menampilkan warna berbeda pada tema OS terang dan gelap. Ini satu-satunya format favicon yang mendukung ikon sadar-tema tanpa JavaScript. Favicon SVG mode gelap menjaga branding Anda tetap terbaca pada tema peramban gelap, tempat ikon terang bisa terlihat menghilang di latar tab.