Cara Membuat Favicon di SitePro Builder dengan Mudah dan Cepat

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:

1. Masuk ke cPanel

2. Buka File Manager

3. Masuk ke folder public_html

4. Upload file favicon.ico

5. 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

1. Menggunakan gambar resolusi besar tanpa resize

2. Menggunakan teks terlalu kecil

3. Tidak melakukan publish

4. Tidak membersihkan cache browser

5. 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.