Favicon Adalah: Ukuran, Contoh & Cara Buat Favicon Online

Favicon adalah ikon mungil yang tampil pada tab browser, bookmark, riwayat penelusuran, dan hasil pencarian sebagai penanda identitas visual sebuah website. Gambar kecil tersebut membantu pengunjung mengenali situs tanpa harus membaca judul halaman.

Pemilik bisnis sering menunda urusan ikon situs karena tampak remeh dibanding desain halaman atau katalog produk. Padahal, website tanpa favicon kustom langsung terkesan belum selesai digarap. Panduan dari Toko Web berikut membahas ukuran, contoh, sampai cara membuat dan memasangnya.

Ukuran Favicon Website

Favicon ditampilkan pada layar dengan kerapatan piksel berbeda-beda, sehingga satu ukuran saja tidak cukup. Ukuran yang keliru membuat gambar tampak pecah atau buram.

Untuk hasil pencarian, Google mensyaratkan gambar persegi minimal 8 x 8 piksel dan menyarankan ukuran lebih besar dari 48 x 48 piksel. Sebagian platform, misalnya Wix, tetap meminta kelipatan 48 piksel kecuali untuk format SVG.

Ukuran favicon yang perlu disiapkan dapat dilihat pada tabel berikut:

Cara termudah adalah merancang ikon pada kanvas persegi berukuran 512 x 512 piksel, lalu memperkecilnya lewat generator. Setelah itu, periksa tampilan pada ukuran 16 x 16 piksel untuk memastikan bentuknya masih terbaca.

Gambar sumber yang beresolusi rendah tidak boleh diperbesar demi mencapai ukuran master. Hasilnya akan buram, dan generator tidak mampu memperbaiki ketajaman yang sudah hilang sejak awal.

Cara Membuat Favicon Online

Pembuatan favicon tidak menuntut keahlian desain grafis profesional. Perangkat gratis di internet sudah cukup untuk menyelesaikannya dalam hitungan menit.

Membuat Desain Favicon Lewat Canva

Canva cocok untuk membuat desain dasar dari nol maupun memakai logo yang sudah ada. Langkahnya sebagai berikut:

1. Buka Canva, lalu pilih Custom Size dengan ukuran 512 x 512 piksel.
2. Unggah logo bisnis atau susun ikon sederhana dari bentuk dan huruf inisial.
3. Aktifkan latar belakang transparan jika memakai akun Pro, atau pilih warna merek sebagai latar.
4. Unduh desain dalam format PNG.

Mengonversi Logo dengan Favicon Generator

Setelah gambar persegi berformat PNG siap, generator dapat mengubahnya menjadi paket favicon lengkap. Dua situs gratis yang bisa dipakai adalah Favicon.io dan RealFaviconGenerator.net.

Langkahnya sebagai berikut:

1. Buka situs generator pilihan.
2. Unggah gambar logo berukuran minimal 512 x 512 piksel.
3. Atur tampilan ikon untuk iOS, Android, dan desktop bila opsinya tersedia.
4. Unduh paket berkas ZIP yang dihasilkan, lalu ekstrak di komputer.

Paket tersebut berisi berkas ICO, beberapa PNG, serta potongan kode HTML yang siap ditempel ke website.

Syarat Favicon agar Tampil di Google

Google menetapkan beberapa ketentuan agar favicon dapat tampil pada hasil pencarian, yaitu:

• Gambar berbentuk persegi dengan ukuran minimal 8 x 8 piksel, dan disarankan lebih besar dari 48 x 48 piksel
• Tag link dengan atribut rel bernilai icon dipasang pada bagian head halaman utama
• Berkas favicon dan halaman utama dapat dirayapi Google tanpa pemblokiran
• Alamat berkas favicon bersifat stabil dan tidak sering berubah
• Satu favicon untuk setiap hostname, sedangkan subdomain boleh memiliki favicon sendiri
• Gambar tidak memuat unsur tidak pantas, karena Google akan menggantinya dengan ikon bawaan

Google tidak menjamin favicon selalu tampil walaupun seluruh syarat terpenuhi. Perubahan juga memerlukan waktu beberapa hari sampai beberapa minggu hingga halaman utama dirayapi ulang.

Format File Favicon yang Didukung

Format file memengaruhi ketajaman gambar sekaligus tingkat dukungan browser. Google menerima ICO, PNG, GIF, JPEG, BMP, PPM, dan TIFF, tetapi tiga format yang paling sering dipakai adalah:

• ICO sebagai format tradisional yang dikenali semua browser, termasuk versi lama
• PNG sebagai format modern dengan latar transparan dan kualitas gambar tajam
• SVG sebagai format vektor yang tetap jelas pada ukuran layar berapa pun

Kombinasi ICO untuk kompatibilitas, PNG untuk perangkat Apple dan Android, serta SVG untuk browser modern memberi hasil paling aman.

Pada browser yang mendukung, SVG juga memungkinkan warna ikon menyesuaikan mode terang atau gelap lewat media query prefers-color-scheme. Dengan begitu, favicon tetap terbaca pada tab berlatar gelap.

Contoh Favicon yang Efektif

Favicon yang kuat umumnya sederhana dan langsung dikenali. Google memakai huruf G berwarna cerah, WordPress memakai huruf W di dalam lingkaran, sedangkan WhatsApp memakai ikon telepon pada balon percakapan hijau.

Toko Web memakai inisial TW berwarna putih di atas kotak biru solid. Kontras yang tegas dan bentuk yang sederhana membuat ikon tetap mudah dikenali pada ukuran tab.

Beberapa prinsip berikut membantu favicon bisnis tampil efektif:

• Gunakan simbol utama atau huruf inisial dari logo, bukan seluruh logo
• Hindari teks panjang karena tidak terbaca pada ukuran 16 x 16 piksel
• Pilih kontras warna yang tegas agar ikon jelas pada mode terang maupun gelap
• Sisakan ruang kosong tipis di sekeliling objek supaya tidak terpotong
• Samakan warna dengan palet merek agar selaras dengan logo

Sebagai ilustrasi, bisnis katering bernama Dapur Nusa cukup memakai huruf D berwarna oranye pada latar putih. Pilihan tersebut lebih tepat dibanding memasukkan nama lengkap ke dalam ikon.

Cara Memasang Favicon di Website

Berkas favicon yang sudah jadi belum bekerja sebelum terpasang pada website. Metodenya bergantung pada platform yang dipakai.

Pemasangan Favicon di WordPress

WordPress menyediakan kolom khusus sehingga pemasangan tidak perlu menyentuh kode. Langkahnya sebagai berikut:

1. Masuk ke dashboard WordPress.
2. Pilih menu Appearance, lalu klik Customize.
3. Buka bagian Site Identity.
4. Gulir ke Site Icon dan unggah gambar berukuran minimal 512 x 512 piksel.
5. Klik Publish agar perubahan tampil di website.

Tema berbasis blok tidak selalu memiliki menu Customize. Pada WordPress 6.5 ke atas, kolom Site Icon juga tersedia di menu Settings, lalu General, sehingga pengaturan tetap dapat dilakukan.

Pemasangan Favicon pada Website Berbasis HTML

Website di luar WordPress memerlukan pengaturan manual. Unggah berkas favicon ke direktori utama hosting, lalu tambahkan tag link pada bagian head di setiap halaman.

Contoh kode berikut dapat disesuaikan dengan nama berkas masing-masing:

<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">

Atribut rel menandai fungsi masing-masing berkas. Berkas favicon.ico di direktori utama juga membantu browser menemukan ikon secara otomatis meski tag link belum terpasang.

Pemasangan Favicon di Shopify

Shopify menyediakan pengaturan favicon pada editor tema. Langkahnya sebagai berikut:

1. Masuk ke admin Shopify.
2. Buka Online Store, lalu pilih Themes.
3. Klik Customize pada tema yang sedang aktif.
4. Buka Theme settings dan cari bagian Favicon, yang pada sebagian tema berada di bagian Logo.
5. Unggah gambar persegi berformat PNG atau ICO, lalu klik Save.

Pemasangan Favicon di Wix

Wix mensyaratkan paket Premium dan domain yang sudah terhubung untuk favicon kustom. Langkahnya sebagai berikut:

1. Publikasikan website terlebih dahulu.
2. Buka Settings pada dasbor situs, lalu pilih Website settings.
3. Pada bagian Favicon, klik Upload Image.
4. Pilih berkas ICO, PNG, JPG, atau SVG, lalu konfirmasi unggahan.

Wix meminta ukuran kelipatan 48 piksel, misalnya 48 x 48 atau 96 x 96, kecuali untuk format SVG.

Pemasangan Favicon di Blogger

Blogger menyediakan opsi favicon pada dasbor blog, sedangkan template lama memasang ikon lewat tag link di bagian head. Gambar sebaiknya berbentuk persegi dengan format ICO, PNG, atau GIF.

Metode lewat template HTML memerlukan alamat langsung ke berkas gambar, karena Blogger tidak menyimpan favicon secara langsung pada metode tersebut.

Cara Mengecek Favicon Sudah Terpasang dengan Benar

Pemeriksaan sederhana dapat dilakukan tanpa alat tambahan. Langkahnya sebagai berikut:

1. Buka website pada jendela penyamaran agar cache tidak memengaruhi hasil.
2. Perhatikan tab browser dan pastikan ikon baru tampil di sebelah kiri judul halaman.
3. Buka alamat berkas favicon secara langsung, misalnya namadomain.com/favicon.ico, untuk memastikan berkas dapat diakses.
4. Lihat sumber halaman dan cari tag link dengan atribut rel icon pada bagian head.
5. Simpan website ke bookmark atau layar utama ponsel untuk melihat ikon pada tampilan lain.

Pemeriksaan pada hasil pencarian Google memerlukan waktu lebih lama karena halaman utama harus dirayapi ulang terlebih dahulu.

Cara Mengganti Favicon yang Sudah Terpasang

Penggantian favicon pada dasarnya mengulang langkah pemasangan dengan berkas yang baru. Urutannya sebagai berikut:

1. Siapkan favicon baru dengan ukuran dan format yang sesuai panduan.
2. Ganti ikon pada pengaturan platform, misalnya Site Icon di WordPress atau Favicon di Theme settings Shopify.
3. Pada website HTML, timpa berkas lama dan perbarui tag link bila nama berkas berubah.
4. Bersihkan cache browser atau buka website lewat jendela penyamaran agar ikon lama tidak tampil.
5. Minta pengindeksan ulang halaman utama lewat URL Inspection di Google Search Console agar ikon pada hasil pencarian segera diperbarui.

Alamat berkas favicon sebaiknya tidak diganti terlalu sering, karena Google menyarankan alamat yang stabil.

Penyebab Favicon Tidak Muncul dan Solusinya

Favicon yang sudah terpasang kadang belum tampil di browser maupun hasil pencarian. Beberapa pemeriksaan berikut membantu menemukan sumber masalahnya:

• Cache browser masih menyimpan ikon lama, sehingga perlu dibersihkan atau website dibuka lewat jendela penyamaran
• Jalur berkas pada tag link keliru atau berkas terhapus dari hosting
• Berkas favicon atau halaman utama diblokir dari proses crawling, misalnya lewat robots.txt, sehingga Google tidak dapat mengaksesnya
• Format atau ukuran gambar tidak sesuai panduan
• Google belum memperbarui ikon karena pengindeksan ulang memakan waktu beberapa hari hingga beberapa minggu

Pengunjung yang melihat ikon lama pada satu perangkat belum tentu menandakan kesalahan pemasangan. Coba buka website dari perangkat atau browser lain untuk memastikan ikon baru sudah aktif.

Alasan Bisnis Membutuhkan Favicon

Ikon bawaan platform membuat website tampak seperti proyek yang belum rampung. Favicon kustom menutup celah tersebut dan memberi manfaat nyata bagi bisnis.

1. Menambah Kepercayaan Pengunjung

Website yang masih menampilkan logo bawaan platform atau ikon globe generik memberi kesan kurang tergarap. Favicon kustom menandakan pemilik bisnis memperhatikan detail, sehingga calon pelanggan lebih yakin saat melihat produk atau mengisi formulir.

2. Memudahkan Pengunjung Menemukan Tab

Calon pelanggan umumnya membuka beberapa tab sekaligus saat membandingkan penyedia layanan. Favicon bekerja sebagai penunjuk visual, sehingga tab milik bisnis dapat dikenali dalam hitungan detik tanpa membaca judul satu per satu.

3. Membantu Merek Lebih Mudah Diingat

Warna dan bentuk favicon yang senada dengan logo menjaga konsistensi tampilan dari hasil pencarian sampai ke dalam halaman. Konsistensi tersebut menjadi bagian dari upaya membangun identitas visual perusahaan di seluruh titik kontak digital, termasuk ikon sekecil favicon.

Pengaruh Favicon terhadap SEO

Favicon bukan faktor peringkat langsung. Dokumentasi Google tentang favicon di hasil pencarian tidak menyebut adanya pengaruh terhadap posisi halaman.

Meski begitu, ikon tampil di samping nama situs pada hasil pencarian, sehingga ikut membentuk kesan pertama calon pengunjung sebelum halaman dibuka. Ikon yang jelas dan sesuai merek membantu situs lebih mudah dikenali di antara hasil lain.

Tempat Favicon Muncul pada Browser dan Mesin Pencari

Nama favicon berasal dari gabungan kata favorite icon, karena ikon tersebut awalnya dipakai untuk menandai situs favorit di browser. Kini fungsinya meluas ke berbagai area yang rutin dilihat pengunjung.

Favicon dapat ditemukan di area berikut:

• Tab browser, tepat di sebelah kiri judul halaman
• Daftar bookmark atau situs favorit
• Riwayat penelusuran pada browser
• Pintasan layar utama setelah website disimpan di ponsel
• Hasil pencarian Google, di samping nama situs

Pada hasil pencarian, ikon membantu calon pelanggan membedakan website resmi dari situs lain yang menawarkan layanan sejenis. Setiap area tersebut menjadi titik temu kecil antara merek dan calon pelanggan.

Perbedaan Favicon dan Logo

Favicon dan logo sama-sama membawa identitas merek, tetapi keduanya bekerja pada konteks yang berbeda. Logo tampil besar pada header website, kemasan, dan materi promosi, sedangkan favicon hanya muncul sebagai ikon kecil di browser.

Perbedaan keduanya dapat dilihat pada tabel berikut:

Favicon tidak harus sama persis dengan logo. Cukup ambil simbol utama atau huruf inisial dari logo, lalu pertahankan warna merek agar kesinambungan visualnya terjaga.

Favicon Profesional untuk Website Bisnis di TokoWeb

Dari pengalaman TokoWeb mengerjakan website bisnis, pengaturan favicon sering terlewat menjelang peluncuran. Pemilik usaha yang ingin urusan tersebut beres tanpa mengurus detail teknis dapat menyerahkannya kepada tim TokoWeb.

Tim menyesuaikan ikon dengan logo, menyiapkan seluruh ukuran yang dibutuhkan, lalu memasangnya bersamaan dengan pengerjaan website bisnis. Calon klien dapat menghubungi Toko Web untuk menanyakan cakupan layanan sesuai kebutuhan usaha.

Pertanyaan Umum seputar Favicon

• Apakah favicon wajib ada di website?
  Favicon tidak wajib secara teknis, sehingga website tetap berfungsi tanpa ikon tersebut. Namun, browser akan menampilkan ikon bawaan atau kosong, dan website terkesan kurang profesional di mata calon pelanggan.
• Apakah favicon memengaruhi peringkat SEO?
  Favicon bukan faktor peringkat langsung menurut dokumentasi Google. Pengaruhnya terletak pada tampilan hasil pencarian dan kesan merek, bukan pada posisi halaman.
• Apakah favicon boleh berformat GIF atau JPG?
  Boleh, karena Google mendukung GIF dan JPEG untuk favicon. Meski begitu, PNG, ICO, dan SVG lebih disarankan karena kualitas gambar dan dukungan browsernya lebih baik.
• Berapa lama favicon baru tampil di Google?
  Google membutuhkan beberapa hari sampai beberapa minggu untuk merayapi ulang halaman utama. Permintaan pengindeksan lewat URL Inspection dapat membantu, tetapi Google tidak menjamin ikon selalu tampil.
• Apakah satu website boleh memakai beberapa favicon?
  Google hanya mendukung satu favicon untuk setiap hostname, sedangkan subdomain boleh memiliki favicon sendiri. Beberapa ukuran dari ikon yang sama tetap dapat disiapkan untuk kebutuhan perangkat yang berbeda.