Favicon adalah ikon kecil yang muncul di tab browser, bookmark, hingga hasil pencarian. Meski ukurannya kecil, favicon memiliki peran besar dalam membangun identitas brand dan meningkatkan profesionalitas website.

Bagi Anda yang menggunakan SitePro Builder, berikut panduan lengkap dan detail tentang cara membuat favicon hingga memasangnya dengan benar.

Apa Itu Favicon?

Favicon (favorite icon) adalah gambar kecil berukuran umumnya 16×16 atau 32×32 piksel yang berfungsi sebagai identitas visual sebuah website. Ikon ini membantu pengguna mengenali situs dengan cepat saat sedang membuka banyak halaman di browser.

Favicon biasanya muncul di tab browser, bookmark, address bar, shortcut di layar utama smartphone, hingga riwayat pencarian. Meskipun ukurannya kecil, favicon memiliki peran penting dalam memperkuat branding dan membuat tampilan website terlihat lebih profesional. Sebagai contoh, ketika Anda membuka Google atau Facebook di browser, Anda akan langsung melihat ikon khas masing-masing situs pada tab yang sedang aktif.

Mengapa Favicon Penting untuk Website?

Berikut beberapa alasan mengapa favicon tidak boleh diabaikan:

1. Meningkatkan Branding

Favicon membantu pengunjung mengenali website Anda dengan cepat.

2. Terlihat Lebih Profesional

Website tanpa favicon biasanya menampilkan ikon default browser, yang terlihat kurang meyakinkan.

3. Memudahkan Identifikasi Tab

Saat pengguna membuka banyak tab, favicon membantu mereka menemukan website Anda dengan mudah.

4. Mendukung Kredibilitas

Detail kecil seperti favicon menunjukkan bahwa website dikelola dengan serius.

Mengenal SitePro Builder

SitePro Builder adalah website builder berbasis cPanel yang memudahkan pengguna membuat website tanpa coding. Biasanya tersedia di layanan hosting yang menyediakan fitur builder instan.

Dengan antarmuka drag-and-drop, Anda bisa mengelola tampilan website termasuk menambahkan favicon secara langsung melalui dashboard.

Persiapan Sebelum Membuat Favicon

Sebelum masuk ke tahap pemasangan, siapkan terlebih dahulu file favicon Anda.

1. Ukuran yang Direkomendasikan

16×16 px (standar browser)
32×32 px
48×48 px
64×64 px
180×180 px (untuk perangkat mobile)

2. Format File yang Disarankan

.ICO (paling umum)
.PNG
.SVG (jika didukung)
.JPG (tidak direkomendasikan)

3. Tips Desain Favicon

Gunakan logo brand
Gunakan inisial nama website
Hindari teks panjang
Gunakan warna kontras
Pastikan tetap jelas meski berukuran kecil

Anda bisa membuat favicon menggunakan tools seperti:

Canva
Photoshop
Figma
Generator favicon online

Cara Membuat Favicon di SitePro Builder

Berikut langkah-langkah lengkapnya:

1. Login ke cPanel

Masuk ke akun hosting Anda melalui URL: namadomain.com/cpanel

Kemudian login menggunakan username dan password hosting Anda.

2. Buka SitePro Builder

Di dalam cPanel:

Cari menu SitePro Website Builder
Klik untuk masuk ke dashboard builder
Pilih website yang ingin diedit

3. Masuk ke Pengaturan Website

Setelah masuk ke editor:

Klik menu Settings atau Website Settings
Pilih bagian General Settings
Cari opsi Favicon

Biasanya tersedia tombol Upload atau Change Favicon.

4. Upload File Favicon

Klik tombol upload
Pilih file favicon yang sudah disiapkan
Pastikan ukuran dan format sesuai
Simpan perubahan

5. Publish Website

Setelah favicon berhasil diunggah:

Klik tombol Publish
Tunggu proses selesai

Favicon tidak akan muncul jika Anda belum mempublikasikan perubahan.

Jika Favicon Tidak Muncul, Apa Penyebabnya?

Berikut beberapa kemungkinan penyebabnya:

1. Cache Browser

Solusi:

Tekan Ctrl + F5
Hapus cache browser
Coba buka di mode Incognito

2. Ukuran Tidak Sesuai

Pastikan menggunakan ukuran standar seperti 16×16 atau 32×32.

3. Format Tidak Didukung

Gunakan format .ICO atau .PNG.

4. Belum Publish Website

Pastikan Anda sudah klik tombol Publish.

Alternatif Manual (Jika Opsi Favicon Tidak Tersedia)

Jika versi SitePro Anda tidak memiliki fitur upload favicon, Anda bisa melakukannya secara manual melalui File Manager di cPanel.

Langkah-langkah:

Masuk ke cPanel
Buka File Manager
Masuk ke folder public_html
Upload file favicon.ico
Tambahkan kode berikut di bagian <head> website: <link rel=“icon” type=“image/x-icon” href=“/favicon.ico”>

Namun metode ini hanya direkomendasikan bagi pengguna yang memahami struktur file website.

Tips Agar Favicon Lebih Optimal

Gunakan background transparan (PNG)
Pastikan logo tetap terbaca dalam ukuran kecil
Hindari detail berlebihan
Gunakan warna brand utama
Tes di berbagai browser (Chrome, Firefox, Edge)

Kesalahan Umum Saat Membuat Favicon

Menggunakan gambar resolusi besar tanpa resize
Menggunakan teks terlalu kecil
Tidak melakukan publish
Tidak membersihkan cache browser
Salah meletakkan file favicon di folder hosting

Kesimpulan

Favicon memang terlihat sebagai elemen kecil, namun memiliki dampak besar terhadap branding dan profesionalitas sebuah website. Dengan menggunakan SitePro Builder, Anda dapat menambahkan favicon dengan mudah melalui menu pengaturan tanpa perlu melakukan coding secara manual.

Yang terpenting, pastikan Anda sudah menyiapkan file dengan ukuran dan format yang sesuai, mengunggahnya melalui menu Settings, serta mempublikasikan perubahan setelah proses upload selesai. Jika favicon belum muncul, jangan lupa untuk membersihkan cache browser agar pembaruan dapat terlihat. Dengan favicon yang tepat, website Anda akan tampak lebih profesional, terpercaya, dan lebih mudah dikenali oleh pengunjung.