Favicon

Berapa ukuran piksel favicon yang tepat?

Favicon tidak cukup satu ukuran; umumnya disiapkan beberapa ukuran yang pas untuk tiap tempat tampilnya. Sebab tab browser, hasil pencarian Google, dan layar utama ponsel masing-masing memakai ukuran berbeda.

Google Search Central menyarankan favicon dibuat persegi (1:1) dan disiapkan lebih besar dari 48×48 piksel agar terlihat baik di berbagai layar. Jika memakai file pengaturan aplikasi web (manifest), web.dev menyarankan memasukkan ikon minimal 192×192 dan 512×512.

Tabel di bawah adalah daftar persiapan yang banyak dipakai. File yang benar-benar dibutuhkan sedikit berbeda tergantung cara pembuatan situs web, jadi cukup tentukan bersama pembuat situs.

Favicon sebaiknya dipakai lama setelah ditentukan. Pelanggan mengingat usaha Anda dari bentuk ikon di tab dan bookmark, jadi jika sering diganti justru makin sulit ditemukan.

Format favicon mana yang lebih baik: ICO, PNG, atau SVG?

Kini banyak yang memakai PNG sebagai dasar, lalu menambahkan ICO dan SVG bila perlu. Google menyebutkan bahwa berbagai format didukung, seperti ICO · PNG · GIF · JPEG.

ICO adalah format lama yang bisa memuat beberapa ukuran dalam satu file, dan dibaca hampir semua browser. SVG tidak pecah meski diperbesar, tetapi belum dipakai di semua tempat, jadi lebih aman jika PNG juga disediakan.

iPhone memakai ikon tersendiri bernama ‘apple-touch-icon’ untuk layar utama, bukan favicon biasa. Ikon ini harus dibuat dengan latar penuh, bukan transparan, agar terlihat rapi di layar utama.

Favicon SVG juga bisa dibuat agar warnanya berubah mengikuti mode gelap. Namun dukungan tiap browser berbeda, jadi jika tidak benar-benar perlu, satu desain yang terlihat di layar terang maupun gelap lebih sederhana.

Bagaimana cara membuat favicon dan memasangnya di situs web?

Asal ada file logo, favicon bisa dibuat dalam beberapa langkah. Dikerjakan sendiri atau diserahkan ke pembuat situs, jika tahu urutannya Anda mudah mengecek hasilnya.

Sebagian alat pembuat situs web atau framework sekarang otomatis membuat kode penghubung jika file ikon dimasukkan ke folder yang ditentukan. Apakah kode harus dimasukkan sendiri, cukup tanyakan ke pembuat situs.

Pastikan file asli berukuran besar disimpan. Jika nanti butuh ukuran baru, memperbesar file kecil akan membuatnya buram.

Jika foto pratinjau saat dibagikan atau foto profil media sosial juga disamakan dengan desain favicon, pelanggan mudah mengenali usaha yang sama di mana pun mereka melihatnya.

1. 01Pilih bagian logo yang tetap dikenali meski diperkecil (huruf pertama, simbol).
2. 02Letakkan bagian itu besar-besar di kanvas persegi, dan sisakan sedikit ruang di tepinya.
3. 03Buat dulu file asli besar seperti 512×512, lalu turunkan ukuran kecil yang dibutuhkan dari situ.
4. 04Cek apakah bentuknya tetap terlihat saat diperkecil ke 16×16 · 32×32, dan jika pecah, pertebal garisnya.
5. 05Masukkan kode penghubung ‘icon’ · ‘apple-touch-icon’ di bagian kepala halaman pertama situs web.
6. 06Cek masing-masing di tab browser, saat ditambahkan ke layar utama ponsel, dan di tab terang · gelap.

Kenapa favicon tidak muncul di hasil pencarian Google?

Kebanyakan karena salah satu syarat dari Google terlewat. Google menyebutkan kode penghubung favicon harus ada di halaman pertama situs web, dan robot pencarian Google harus bisa membaca halaman pertama maupun file favicon.

Favicon hanya diakui satu per alamat situs (host), dan halaman pertama di subjalur (misalnya alamat/shop) tidak diakui terpisah. Tidak sering mengganti alamat file favicon juga penting.

Meski semua syarat terpenuhi, tidak langsung berubah. Google menyebut perlu beberapa hari hingga beberapa minggu untuk membacanya lagi, dan meminta pengindeksan halaman pertama lewat alat Inspeksi URL di Search Console bisa sedikit mempercepat. Ketahui juga bahwa memenuhi syarat tidak menjamin favicon ditampilkan.

Jika hasil pencarian menampilkan ikon bawaan alih-alih ikon Anda, sering kali Google belum menemukan favicon atau menilainya tidak memenuhi syarat. Cek ulang syarat di atas satu per satu.

Bagaimana mendesain favicon per jenis usaha?

Favicon adalah penanda yang membantu menemukan usaha Anda di antara puluhan tab, jadi bentuk khas usaha Anda lebih berguna daripada gambar jenis usaha. Gambar umum seperti cangkir kopi atau gunting mudah tidak terbedakan dari usaha lain.

Memakai satu warna utama dari logo membuatnya paling tajam saat diperkecil. Gradasi atau garis tipis hampir tidak terlihat pada ukuran 16 piksel.

Setelah dibuat, buka di antara banyak tab dan bandingkan. Kriteria paling pasti adalah apakah ikon Anda langsung tertangkap mata di samping ikon situs-situs yang sering dipakai.

• Kafe: masukkan huruf pertama nama usaha ke dalam lingkaran berwarna merek.
• Salon: ambil hanya bagian simbol dari logo dan gambar ulang dengan garis tebal.
• Studio kerajinan: logo tulisan tangan tidak terbaca saat diperkecil, jadi pakai satu inisial saja.
• Penjualan online: banyak pelanggan membuka beberapa tab toko online, jadi buat kontras warna yang kuat agar menonjol.

Apa kesalahan umum pada favicon?

Kesalahan paling umum adalah memasukkan logo yang memanjang ke samping apa adanya ke dalam persegi sehingga terlihat sangat kecil. Sering juga hanya logo hitam di latar transparan sehingga tidak terlihat di tab gelap.

Ada juga kasus ikon bawaan alat pembuat situs masih tertinggal. Cukup sekali melihat tab sebelum rilis sudah ketahuan, jadi pastikan dicek.

Jika file favicon sudah diganti tetapi di komputer Anda masih sama, kebanyakan karena browser menyimpan ikon lama. Buka dengan browser lain atau jendela penyamaran untuk mengecek apakah sudah berubah.

Apa yang perlu dicek ke pembuat situs soal favicon?

Jika empat hal di bawah ini dicek ke pembuat situs sebelum rilis, favicon terlihat tajam di tab · pencarian · layar utama ponsel.

• Apakah ikon untuk tab browser · pencarian Google · layar utama ponsel dibuat semuanya?
• Apakah sudah diberi latar atau garis tepi agar terlihat di layar gelap?
• Apakah file favicon tidak diblokir dari robot pencarian Google?
• Apakah file aslinya (ukuran besar) bisa saya terima?