Cara Membuat dan Memasang Favicon di Blogger dengan Benar

Favicon adalah icon kecil yang mewakili identitas sebuah website pada tab browser, bookmark dan beberapa tampilan antarmuka perangkat. Walaupun ukurannya kecil, favicon membantu pengunjung mengenali sebuah website dengan lebih cepat ketika banyak tab sedang terbuka.

Pada Blogger, favicon sekarang dapat dipasang langsung melalui pengaturan blog tanpa harus mengedit HTML template. Untuk penggunaan normal, cara ini merupakan metode paling sederhana.

Namun pada template custom atau website yang membutuhkan konfigurasi icon lebih lengkap, favicon juga dapat ditentukan melalui elemen <link rel="icon"> di dalam bagian <head>.

Artikel ini membahas kedua metode tersebut sekaligus menjelaskan format gambar, ukuran yang disarankan, Apple Touch Icon, Web App Manifest dan solusi ketika favicon tidak langsung berubah.

Informasi Singkat

Untuk Blogger biasa, gunakan fitur Setelan → Favicon terlebih dahulu.

Jika menggunakan template custom dan ingin mengontrol beberapa ukuran icon secara manual, gunakan elemen rel="icon" di bagian <head>.

Tidak wajib membuat puluhan ukuran favicon untuk sebuah blog biasa. Siapkan satu master logo berkualitas tinggi kemudian hasilkan ukuran yang memang diperlukan.

DAFTAR ISI

Apa Itu Favicon?

Format dan Ukuran Favicon

Cara Membuat Favicon

Cara Memasang Favicon di Blogger

Memasang Favicon dengan HTML

Apple Touch Icon dan Web App Icon

Cara Memasang di Website

Troubleshooting Favicon

Apa Itu Favicon?

Istilah favicon berasal dari favorite icon. Pada awal perkembangannya icon kecil ini banyak digunakan pada bookmark atau daftar favorit browser.

Sekarang favicon dapat muncul di beberapa tempat, tergantung browser dan sistem operasi yang digunakan, seperti tab browser, bookmark, history dan shortcut website.

Favicon sebaiknya dibuat sederhana karena tampilannya sangat kecil. Logo yang terlalu detail biasanya sulit dikenali ketika diperkecil.

Browser Tab Membantu membedakan satu tab dengan tab lainnya.

Bookmark Membuat website lebih mudah dikenali pada daftar bookmark.

Shortcut Icon tertentu dapat digunakan ketika website disimpan ke home screen.

Brand Identity Membawa elemen visual brand ke antarmuka browser.

Format dan Ukuran Favicon

Favicon modern tidak terbatas pada file .ico. Browser modern juga dapat menggunakan format raster seperti PNG dan beberapa format lain yang didukung browser.

Untuk kompatibilitas sederhana, kombinasi ICO dan PNG masih praktis digunakan.

ICO

favicon.ico

Format favicon klasik dan masih sangat umum digunakan sebagai fallback.

PNG

favicon-32x32.png

Cocok untuk favicon raster dengan transparansi.

SVG

favicon.svg

Format vector yang tetap tajam pada berbagai ukuran pada browser yang mendukungnya.

Untuk website biasa, Anda dapat mulai dengan beberapa ukuran berikut:

16×16Favicon kecil / kompatibilitas

32×32Browser tab dan bookmark

180×180Apple Touch Icon

192×192Web App Icon

512×512Icon resolusi tinggi / manifest

Jangan Mendesain Logo pada Ukuran 16×16

Buat logo master pada resolusi tinggi seperti 512×512 atau lebih besar. Setelah desain selesai, baru hasilkan ukuran favicon yang diperlukan agar detail logo lebih mudah dikontrol.

Cara Membuat Favicon

Favicon dapat dibuat menggunakan editor gambar seperti Photoshop, GIMP, Affinity Photo, CorelDRAW atau aplikasi desain lainnya.

Anda juga dapat menggunakan favicon generator online apabila tidak ingin mengekspor semua ukuran secara manual.

Siapkan Logo

Gunakan logo atau simbol yang mewakili website.

Buat Canvas Persegi

Gunakan rasio 1:1, misalnya 512×512 pixel.

Sederhanakan Detail

Hindari tulisan kecil dan detail tipis yang akan hilang ketika icon diperkecil.

Berikan Safe Area

Jangan membuat logo terlalu menempel pada tepi canvas.

Export

Simpan sebagai PNG transparan kemudian buat versi icon yang diperlukan.

Jika menggunakan generator favicon online, biasanya cukup unggah satu file master kemudian layanan tersebut akan membuat beberapa ukuran secara otomatis.

Sebelum menggunakan generator pihak ketiga, periksa hasil file yang dibuat. Tidak semua paket icon yang dihasilkan masih diperlukan oleh website modern.

Cara Memasang Favicon di Blogger

Untuk Blogger, metode termudah adalah menggunakan pengaturan favicon bawaan.

Buka Dashboard Blogger

Buka Setelan

Pilih menu Setelan.

Cari Favicon

Temukan bagian Favicon kemudian buka pengaturannya.

Upload Icon

Pilih gambar favicon yang sudah dipersiapkan.

Simpan

Selesaikan proses upload kemudian buka ulang blog untuk memeriksa hasilnya.

Screenshot berasal dari tampilan Blogger ketika artikel dibuat dan antarmuka dapat berubah. Jika posisi menu berbeda, cari pengaturan bernama Favicon pada halaman Setelan.

Setelah favicon diubah, browser mungkin masih menampilkan icon lama karena cache. Hal ini cukup umum dan bukan berarti proses upload gagal.

Memasang Favicon dengan HTML

Jika menggunakan template custom atau website yang tidak memiliki pengaturan favicon otomatis, tambahkan elemen <link> di dalam bagian <head>.

Contoh paling sederhana:

Untuk favicon PNG:

Untuk SVG:

Tidak Perlu rel="shortcut icon"

Pada HTML modern cukup gunakan rel="icon". Bentuk lama rel="shortcut icon" masih sering ditemukan pada template lawas tetapi tidak diperlukan untuk implementasi baru.

Jika file icon di-hosting pada Blogger atau CDN lain, gunakan URL absolut:

Untuk template Blogger, kode dapat ditempatkan setelah tag:

<head>

PERINGATAN

Jangan menambahkan banyak deklarasi favicon yang mengarah ke file berbeda tanpa alasan. Browser dapat memilih icon berdasarkan format, ukuran dan urutan deklarasi, sehingga konfigurasi yang berlebihan justru menyulitkan troubleshooting.

Apple Touch Icon dan Web App Icon

Favicon browser dan icon aplikasi web merupakan konsep yang berkaitan tetapi tidak sepenuhnya sama.

Jika website ingin menyediakan icon ketika disimpan ke home screen perangkat Apple, gunakan apple-touch-icon.

Untuk website yang dikembangkan menjadi Progressive Web App, icon biasanya juga didefinisikan melalui Web App Manifest.

{ "name": "Nama Website", "short_name": "Website", "icons": [ { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

Untuk blog Blogger biasa, Web App Manifest bukan sesuatu yang wajib. Gunakan hanya jika template atau project memang membutuhkan fungsi aplikasi web.

Cara Memasang Favicon pada Website

Untuk website HTML biasa, prosesnya hampir sama.

Upload Icon

Upload file favicon ke server atau folder asset website.

Buka HTML

Edit file HTML atau template yang menghasilkan bagian <head>.

Tambahkan rel="icon"

Masukkan URL file favicon yang benar.

Deploy

Simpan perubahan kemudian upload atau deploy website.

Periksa

Buka halaman menggunakan browser dan cek apakah favicon sudah berubah.

Contoh konfigurasi yang cukup lengkap tetapi tetap sederhana:

Troubleshooting Favicon

Favicon masih menampilkan icon lama

Cache favicon dapat bertahan cukup lama. Coba hard refresh, mode incognito atau browser lain sebelum mengubah konfigurasi kembali.

Favicon tidak muncul setelah upload Blogger

Pastikan gambar berhasil tersimpan kemudian tunggu proses cache dan propagasi. Jangan terus mengunggah file berbeda setiap beberapa menit.

Icon tampil buram

Gunakan gambar master beresolusi tinggi dan jangan memperbesar icon raster yang awalnya sangat kecil.

Icon tidak muncul pada iPhone

Untuk icon home screen Apple, tambahkan apple-touch-icon. Favicon browser dan Apple Touch Icon merupakan penggunaan yang berbeda.

Template mempunyai favicon ganda

Cari semua kode rel="icon" pada bagian head dan hapus deklarasi custom lama yang sudah tidak digunakan.

Favicon Blogger kembali berubah

Periksa apakah template custom juga mempunyai deklarasi favicon manual yang dapat bersaing dengan favicon yang dibuat Blogger.

Satu hal yang sering dilupakan adalah favicon mempunyai cache tersendiri pada beberapa browser. Karena itu perubahan icon tidak selalu terlihat secepat perubahan CSS atau gambar biasa.

Untuk Blogger, mulai dari fasilitas Favicon bawaan terlebih dahulu. Edit HTML hanya jika Anda memang menggunakan template khusus atau membutuhkan konfigurasi icon tambahan.

Anda juga tidak perlu lagi mengikuti daftar puluhan ukuran icon dari tutorial web lama jika kebutuhan website hanya favicon browser. Gunakan konfigurasi secukupnya agar source template tetap bersih dan mudah dipelihara.

Checklist Favicon Sebelum menyelesaikan konfigurasi

Logo tetap mudah dikenali pada ukuran kecil. File favicon menggunakan URL HTTPS. Tidak ada deklarasi favicon custom yang tidak diperlukan. Favicon sudah diuji melalui lebih dari satu browser. Apple Touch Icon hanya ditambahkan jika memang dibutuhkan.

2 comments:

Dunia Kita du-ki.comJuly 15, 2023 at 6:05 PM
Terimakasih atas tutorialnya, ini sangat lengkap sesuai dngn yang saya butuhkan. Semoga favicon saya cepat muncul di tab google. Tetap berkarya dan sukses selalu. Salam codeflare

💬 Share Your Thoughts & Join the Hall of Fame!

Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀

💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.

👉 Comment now. Share your ideas. Get noticed on codeflare.net

Main Settings

Header Ads

Cara Membuat dan Memasang Favicon di Blogger dengan Benar

Apa Itu Favicon?

Format dan Ukuran Favicon

Cara Membuat Favicon

Cara Memasang Favicon di Blogger

Memasang Favicon dengan HTML

Apple Touch Icon dan Web App Icon

Cara Memasang Favicon pada Website

Troubleshooting Favicon

2 comments:

Post Top Ad

Author Details

Post Bottom Ad

Comments

Top Users

Top Pages

Formulir Kontak

Subscribe

Category