Favicon: Pengertian, Fungsi, Ukuran, dan Cara Membuatnya

Beberapa dari Anda mungkin masih asing dengan istilah favicon. Padahal, istilah ini hampir selalu Anda temukan ketika menjelajahi internet.

Mayoritas situs web di internet pasti memiliki ikon tersebut. Ikon inilah yang membantu Anda mengenali sebuah website dengan cepat.

Penasaran dengan istilah tersebut? Tenang saja, Sitespirit akan memberikan informasi tentang apa itu favicon dan fungsinya, lengkap dengan cara membuatnya. Jadi, pastikan untuk menyimak artikel berikut dengan saksama!

Apa itu Favicon?

Favicon adalah singkatan dari favorite icon, artinya adalah ikon kecil yang merepresentasikan sebuah website atau brand.

Biasanya, ikon ini terlihat pada search bar, tab browser, SERP, dan tempat lain yang menunjukkan identitas sebuah website.

Ukurannya yang kecil membuatnya dapat mewakili sebuah brand atau website alih-alih menyebutkan nama yang cukup panjang.

Selain untuk mempercantik tampilan website, ikon ini juga dapat memudahkan pengguna untuk menemukan website Anda ketika ia memiliki banyak tabs atau situs yang dibuka.

Bentuk dari ikon ini dapat berupa logo brand atau bisnis, inisial, atau tanda pengenal lainnya.

Dengan adanya ikon tersebut, pengguna diharapkan dapat mengenali dan menandai situs Anda, sehingga akan lebih mudah untuk diingat.

Ikon ini pertama kali diperkenalkan pada tahun 1999 melalui Internet Explorer 5, peramban yang kini sudah resmi pensiun sejak 15 Juni 2022. Sejak kemunculan tersebut, ikon ini menjadi standar umum yang digunakan sebagai identitas website.

Biasanya, ikon ini dibuat dengan format .ico, .png, atau .svg berukuran 16×16, atau bergantung pada penempatannya.

Fungsi Favicon

Penggunaan sebuah ikon kecil pada sebuah website bukanlah hal tanpa alasan. Ikon ini memiliki banyak fungsi yang penting, khususnya untuk mengenali sebuah situs web.

Beberapa fungsinya yang cukup penting dari favicon adalah sebagai berikut.

1. Sebagai Identitas Website

Dengan menggunakan ikon ini, pengguna akan langsung mengenali website Anda meskipun tanpa melihat nama website atau domain-nya.

Semakin sering pengguna membuka sebuah website, maka semakin sering pula mereka mengingat ikon yang menunjukkan situs tersebut.

Artinya, favorite icon adalah hal yang dapat mewakili identitas sebuah website agar lebih mudah dikenali dan diingat bagi pengguna.

2. Meningkatkan Profesionalitas

Sebuah logo atau ikon pasti memiliki filosofinya sendiri. Favicon, yang biasanya berbentuk logo, juga memiliki nilai keunikan tersendiri ketika diletakkan pada website. Ikon tersebut akan membuat website Anda terlihat lebih menarik dan profesional.

Tak hanya itu, penggunaan ikon ini juga dapat menambahkan tingkat kredibilitas website, sehingga pengguna akan lebih percaya pada brand atau bisnis Anda.

Itu sebabnya, mayoritas perusahaan ternama pasti menggunakan ikon yang unik dan menarik untuk menambahkan kesan profesional pada website.

3. Branding and Visibility

Favicon adalah representasi visual dari sebuah brand, sehingga pengguna internet akan lebih mudah untuk menandai bisnis Anda hanya dengan melihat ikon yang Anda gunakan.

Favicon memang bukan faktor peringkat SEO, tetapi ikon yang khas membantu situs Anda lebih mudah dikenali di hasil pencarian. Semakin sering pengguna menemukan ikon website Anda, maka peluang mereka mengunjungi situs Anda juga semakin tinggi. Artinya, pengguna akan lebih mudah untuk menemukan dan mengingat bisnis Anda.

4. Efisiensi Waktu Akses

Jika Anda pernah membuka banyak tab dalam satu window, maka pasti pernah merasa kesulitan untuk mencari website tertentu karena tampilannya yang semakin kecil.

Biasanya, semakin banyak tab yang dibuka, maka ia hanya akan menampilkan sebuah ikon tanpa nama website-nya.

Salah satu fungsi favicon adalah untuk menghemat waktu Anda dalam mencari website pada situasi tersebut.

Bayangkan jika semua ikon terlihat sama, Anda tentu akan membuang waktu dengan membuka tab satu-satu untuk mencari website yang dimaksud.

Maka dari itu, penting untuk membuat ikon yang unik dan mudah diingat agar pengguna dapat lebih mudah menemukan website Anda.

Letak Favicon

Masih bingung ikon mana yang disebut dengan favorite icon? Anda dapat menemukannya pada beberapa tempat berikut ini.

1. Search Bar

Search bar atau kotak pencarian adalah sebuah fitur yang digunakan untuk mencari sebuah website yang ingin dikunjungi dengan cara mengetik keyword atau nama situsnya.

Biasanya, ikon ini muncul di samping saran situs yang ditampilkan saat Anda mengetik, sehingga Anda bisa langsung mengenali website yang dimaksud.

Contoh favicon pada tampilan search bar dapat Anda lihat pada gambar berikut.

Contoh favorite icon pada search bar

2. Search History

Selain itu, ikon ini juga dapat Anda temukan pada riwayat (history) browser, yaitu daftar halaman yang pernah Anda kunjungi, termasuk halaman yang dibuka dari search engine.

Setiap kali Anda membuka sebuah website, browser akan mencatatnya dalam riwayat tersebut.

Pada history, favicon adalah hal yang sangat penting untuk digunakan sebagai penanda. Jika dalam satu hari Anda membuka ratusan website, maka akan sulit untuk menemukan situs tertentu tanpa ikon khusus sebagai identitasnya.

Contoh favicon pada history browser

3. Tab Browser

Salah satu fungsi utama dari ikon ini adalah untuk mengidentifikasi sebuah website pada tab browser.

Browser tidak akan menyertakan nama website ketika tab yang dibuka terlalu banyak. Sebagai alternatifnya, browser hanya menampilkan ikon penanda website tersebut agar lebih mudah dikenali.

Contoh favicon pada tab browser

4. Bookmark

Bookmark adalah sebuah fitur pada browser yang digunakan untuk menandai sebuah halaman yang sering dikunjungi.

Peran ikon tersebut pada bookmark juga tak kalah penting. Dengan adanya ikon tersebut, Anda akan lebih mudah menemukan halaman yang dimaksud.

Contoh favorite icon pada bookmark

5. Search Engine Result Page (SERP)

SERP adalah halaman hasil pencarian ketika Anda mengetikkan sebuah kata kunci pada search engine. Ketika website Anda muncul di SERP, maka favicon adalah ikon yang menandainya.

Hal tersebut juga tak kalah penting, karena pengguna biasanya akan memilih website yang kredibel dan profesional ketika hendak mencari sebuah informasi.

Jika ikon Anda sudah dikenal oleh pengguna, maka besar kemungkinan mereka akan meng-klik website tersebut.

Contoh favicon pada SERP

Ukuran Favicon

Pada umumnya, ukuran ikon adalah 16×16 pixel. Namun, ukuran tersebut tidak paten sekecil itu. Ukuran tersebut dapat disesuaikan dengan kebutuhan dan letak munculnya ikon tersebut.

Sesuai tempatnya, referensi ukuran penggunaan favicon adalah sebagai berikut.

• Browser: 16×16 pixel
• Taskbar Shortcut: 32×32 pixel
• Touch Icon Apple: 180×180 pixel
• WordPress (Site Icon): minimal 512×512 pixel

Ukuran Favicon agar Tampil di Google

Agar bisa tampil di hasil pencarian Google, favicon harus berbentuk persegi (rasio 1:1) dengan ukuran minimal 8×8 piksel. Namun, Google menyarankan ukuran lebih besar dari 48×48 piksel agar ikon tetap tajam di berbagai tampilan.

Dalam praktiknya, Anda bisa menyiapkan satu set ikon berikut:

• favicon.ico berukuran 32×32 piksel untuk tab browser
• Versi SVG atau PNG beresolusi tinggi agar tetap tajam di layar beresolusi tinggi
• Apple touch icon 180×180 piksel untuk pintasan di perangkat iOS
• PNG 192×192 dan 512×512 piksel untuk web app manifest di perangkat Android

Cara Membuat Favicon

Jika Anda tak tahu bagaimana cara membuat ikon ini, tak perlu khawatir, karena banyak tools online yang dapat digunakan secara gratis.

Anda dapat menggunakan bantuan beberapa favicon generator seperti Favicon.cc, RealFaviconGenerator, dan beberapa platform lainnya.

Sebagai contoh, kami akan memberikan cara membuat ikon ini dengan Favicon.cc. Simak langkah-langkahnya berikut ini.

• Masuk pada situs web Favicon.cc
• Pilih ‘Create New Favicon’ untuk membuat ikon baru. Anda dapat menyesuaikan warna dan transparansi pada bagian ‘Color Picker’
• Jika Anda sudah memiliki ikon yang akan dipakai sebagai favorite icon, maka Anda hanya tinggal mengunggahnya pada pilihan ‘Import Image’
• Download favicon untuk mendapatkan file dengan format .ico

Setelah memiliki ikon dengan format .ico, Anda harus memasangnya pada website atau blog. Cara mengganti ikon favorit di blog WordPress yang paling mudah adalah dengan menggunakan plugin Real Favicon Generator.

Dengan plugin tersebut, Anda hanya tinggal memilih gambar dari Media Library lalu meng-klik Generate Favicon. Kemudian, Anda akan diarahkan ke website RealFaviconGenerator untuk mengatur tampilan ikon di berbagai platform. Setelah selesai, Anda kembali ke dashboard WordPress dan plugin akan memasang kode HTML favicon secara otomatis. Cukup mudah bukan?

Cara Memasang Favicon dengan Kode HTML

Jika tidak memakai plugin, Anda dapat memasang favicon secara manual dengan menambahkan kode berikut di dalam tag <head> setiap halaman:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Pengguna WordPress juga bisa memakai fitur bawaan Site Icon (ikon situs) untuk mengunggah ikon tanpa plugin tambahan.

Setelah dipasang, pastikan file ikon tidak diblokir oleh robots.txt. Perubahan favicon di hasil pencarian Google tidak langsung terlihat karena Google perlu merayapi ulang halaman beranda Anda. Untuk mempercepatnya, Anda dapat meminta pengindeksan ulang halaman beranda melalui fitur URL Inspection di Google Search Console.

Kesimpulan

Nah, itulah beberapa informasi mengenai ikon tersebut. Pada intinya, favicon adalah hal yang cukup penting dan tak boleh diabaikan.

Sebab, ikon ini membantu website Anda lebih mudah dikenali di tab browser, bookmark, dan hasil pencarian, sehingga pengunjung lebih mudah kembali ke situs Anda.

Selain itu, ikon ini juga menjadi salah satu tolok ukur pengguna untuk menilai kredibilitas dan profesionalitas website Anda. Jadi, sebaiknya Anda membuat ikon yang menarik dan khas.

Berbicara tentang website yang profesional, sebenarnya Anda tak perlu bersusah payah untuk membuatnya sendiri.

Karena Sitespirit hadir untuk mempermudah Anda dalam pembuatan website, desain, dan pemeliharaannya.

Jika Anda tertarik, silakan menghubungi kontak kami!