Favicon

Apa itu Favicon?

Bagi blogger, istilah favicon atau favorite icon mungkin sering terdengar namun belum mengetahui arti dan fungsinya. Padahal elemen ini sangat penting untuk sebuah website. 

Dirangkum dari Hubspot dan Wix, favicon adalah ikon berukuran kecil yang muncul di tab halaman di browser bersama dengan judul halaman untuk mewakili halaman website yang sedang dibuka/akses.

Selain untuk meningkatkan brand identity, favicon juga penting bagi SEO karena elemen ini juga akan muncul di hasil penelusuran browser di samping URL website, yang akhirnya mempermudah search engine mengidentifikasi website.  

Berikut lokasi terbaik untuk menampilkan favicon:

• Tab di browser

• Riwayat pencarian browser, termasuk dropdown di browser history

• Search bar, termasuk rekomendasi search bar

• Menu dropdown pada bookmarks

Manfaat Favicon

Meski memiliki ukuran yang terbilang kecil, favicon sangat penting bagi brand identity. Ketika pengguna mengakses banyak situs sekaligus, browser akan memunculkan tab di bagian atas layar komputer. 

Karena untuk brand identity, setiap situs memiliki favicon yang berbeda-beda agar mudah dikenali. Jadi tanpa harus mengeklik tab tersebut, pengguna bisa mengetahui situs apa saja yang sedang dibuka. 

Selain itu, berikut kegunaan dari favicon:

• Membuat audiens mengingat ciri khas website, sehingga situs lebih mudah ditemukan sekaligus mendorong interaksi dalam jangka panjang
• Meningkatkan kredibilitas dan profesionalitas situs
• Berkaitan dengan kredibilitas, pada akhirnya favicon membantu meraih kepercayaan audiens

Berapa Ukuran Favicon?

Umumnya ukuran favicon adalah 16x16 pixel. Tapi ukuran favicon bisa lebih besar tergantung pada lokasi favicon dimunculkan. 

Jadi lebih baik untuk membuat favicon dengan berbagai ukuran, antara lain:

• 16x16 pixel: Ukuran favicon di browser.
• 32x32 pixel: Ukuran favicon di pintasan taskbar (taskbar shortcut).
• 96x96 pixel: Ukuran favicon di pintasan desktop.
• 180x180 pixel: Ukuran favicon di ikon sentuh Apple.
• 300x300 pixel: Ukuran favicon yang dibutuhkan oleh Squarespace.
• 512x512 pixel: Ukuran favicon yang dibutuhkan oleh WordPress.

Selain ukuran, jenis file yang digunakan untuk membuat favicon website juga penting. 

Jenis file yang direkomendasikan untuk membuat favicon agar hasilnya tidak pecah yaitu SVG, PNJ, JPG, dan Windows ICO.

5 Favicon Generator Gratis

Membuat favicon dengan cepat bisa dilakukan dengan bantuan website favicon generator. 

Saat ini ada banyak favicon generator gratis yang dilengkapi dengan fitur seperti mengedit warna, atau membuatnya dari teks. 

Berikut 5 favicon generator gratis yang bisa dicoba:

Ionos.com 

Ionos.com merupakan salah satu favicon generator gratis dengan fitur yang lengkap. Pengguna bisa membuat favicon sendiri dari teks, dengan menggambar, atau mengupload gambar yang telah disiapkan sebelumnya. 

Pengguna juga bisa mengedit favicon sesuka hati dan melihat preview favicon di website berdasarkan preferensi dan pengaturan browser yang dipilih. 

Setelah favicon dibuat, pengguna bisa melihat hasilnya dalam format PNG dan tersedia dalam berbagai ukuran, mulai dari 16x16 pixel hingga 256x256 pixel.

Zyro by Hostinger

Zyro by Hostinger memiliki tampilan sederhana yang akan sangat memudahkan pengguna dalam membuat favicon. 

Pengguna bisa membuat favicon dari tulisan sekaligus ikon yang telah disediakan, mengatur warna background, posisi ikon dan tulisan, atau mengupload gambar dari komputer untuk membuat favicon. 

Namun, Zyro tidak menyediakan alat untuk membuat ikon sendiri sehingga kemungkinan hasilnya akan sangat umum.

Favicon.io

Mirip seperti Ionos, Favicon.io memungkinkan penggunanya untuk membuat favicon dari teks, gambar, bahkan emoji. 

Untuk membuat favicon dari teks, pengguna juga bisa mengedit tulisan, jenis dan font, serta warna font dan background.

Pengguna juga bisa melihat preview favicon sebelum mengunduh dan menerapkannya di website. 

Favicon generator by Website Planet

Favicon generator dari Website Planet hanya menyediakan dua fitur, yaitu membuat favicon dari gambar komputer atau dari ikon yang telah disediakan. 

Hasilnya akan muncul dalam format PNG dengan ukuran 16x16 pixel. Selain itu, pengguna juga perlu menyalin kode tertentu untuk mengaplikasikan favicon di website. 

Genfavicon

Rekomendasi favicon generator gratis terakhir adalah Genfavicon. Di sini hanya ada satu fitur yang tersedia, yaitu membuat favicon dari gambar yang telah disediakan pengguna. 

Setelah gambar di-upload, pengguna bisa memotong, mengatur ikon, dan mengatur ukuran favicon dari 16 pixel hingga 128 pixel. Jika sudah sesuai, pengguna bisa menyimpan dan menerapkannya di website.

Contoh Favicon

Saat ini hampir seluruh situs menggunakan favicon, contohnya Instagram. 

Ketika mengetikkan Instagram di search bar, favicon Instagram juga akan muncul di sebelah URL Instagram. Begitu juga di tab browser dan history browser. 

Katakanlah pengguna sedang membuka salah satu website di tab browser, bersamaan dengan laman Instagram dan situs lainnya. 

Hanya melihat favicon Instagram di tab, pengguna bisa tahu bahwa ia juga sedang mengakses Instagram. 

FAQ (Frequently Asked Question)

Bagaimana langkah membuat Favicon?

Biasanya favicon dibuat berdasarkan pada logo perusahaan untuk meningkatkan brand identity dan brand awareness. Tapi bisa juga dibuat berbeda, misalnya inisial dari perusahaan tersebut seperti Facebook dengan huruf F dan Canva dengan huruf C.

Membuat logo bisa dilakukan sendiri, atau dengan bantuan graphic designer. Pastikan logo favicon sederhana dan tidak terlalu banyak elemen agar bisa terlihat jelas. 

Setelah logo selesai dibuat, simpan logo dalam format PNG atau JPG lalu upload ke situs favicon generator untuk mengubahnya menjadi favicon.