Postingan AneIqbal kali ini kita akan bahas bagaimana cara membuat favicon blog secara online dan ukuran favicon yang ada tuh berapa aja. Simak sampai habis ya karena rugi kalo nggak. Berikut pembahasan selengkapnya.
Pengertian Favicon
Sebelum kita bahas bagaimana membuat favicon online, kita perlu tahu dulu apa itu favicon. Mungkin saja ada teman-teman yang belum tahu apa itu favicon.
Favicon adalah gambar kecil berbentuk persegi yang umumnya memiliki format .ico yang digunakan sebagai ikon dari sebuah blog atau website. Favicon ini letaknya ada di sebelah kiri tab web browser.
Seperti ini tampilan favicon sebuah blog.
Favicon ini berguna untuk menambah identitas blog dan menandakan kalau itu adalah ikon dari blog tersebut. Kan lebih keren tuh kalau saat buka blog, di tab web browsernya ada ikon blognya. Jadi lebih khas.
Cara Membuat Favicon Blog
Cara membuatnya juga nggak sulit kok. Bisa pakai software desain grafis, bisa juga pakai tools online seperti yang bakal AneIqbal tunjukkan ini. Jadi, terus simak ya cara membuat favicon online sampai penghujung postingan.
Nama toolsnya yakni Favicon Generator. Tools ini akan men-generate gambar ikon dari gambar yang diupload. Jadi, harus kita siapkan dulu gambarnya yang ingin dijadikan sebagai favicon.
Supaya hasilnya bagus, bentuk gambarnya harus persegi. Jika sudah, buka favicon generatornya di https://www.favicon-generator.org/. Bisa juga ketik di google search “favicon generator”. Tools-nya akan muncul di paling atas.
Kalau sudah dibuka, seperti ini tampilan tools-nya.
Pilih gambar yang mau dijadikan favicon. Lalu pilih Generate only 16×16 favicon.ico. Jika sudah, klik tombol Create Favicon. Tools-nya akan men-generate favicon dari gambar yang diupload tadi.
Favicon yang sudah tergenerate dapat kita download dengan mengklik Download the generated favicon. Lihat gambar yang dilingkari merah berikut ini.
Dan hasilnya favicon-nya seperti ini.
Selesai deh. Jadi begitu cara membuat favicon blog dengan tools online Favicon Generator. Gratis dan nggak perlu install aplikasi apapun. Favicon sudah langsung bisa dibuat. Gampang banget kan?
Sayangnya, gambar yang mau dijadikan favicon harus dipersiapkan lebih dulu. Tools ini bukanlah pembuat favicon dari nol, melainkan membuat favicon dari gambar yang sudah ada.
Selain Favicon Generator, AneIqbal juga merekomendasikan tools https://favicomatic.com/. Caranya kurang lebih sama. Upload gambar yang ingin dijadikan favicon, pilih opsi .ico saja atau semua ukuran. Kemudian download hasil generate-nya.
Kebanyakan memang upload file dulu baru dijadikan favicon. Tapi ada juga kok yang membuat faviconnya online (nggak upload gambar) seperti https://favicon.io/ dan https://www.favicon.cc/.
Ukuran Favicon sesuai Standar
Ukuran favicon sebenarnya bermacam-macam. Walaupun begitu, panjang dan lebarnya selalu sama yang akhirnya membentuk sebuah persegi.
Untuk format .ico, sayangnya memang terlihat blur bila dipreview. Resolusinya hanya sebesar 16 x 16px. Sejauh ini, belum ketemu resolusi yang lebih besar dari itu untuk format .ico.
Ada format lain yang resolusinya beragam, yakni .png. Mulai dari 16 x 16px sampai ratusan pixel. Berikut beberapa contoh ukuran favicon yang lainnya.
- 16×16
- 32×32
- 36×36
- 48×48
- 57×57
- 60×60
- 70×70
- 72×72
- 76×76
- 96×96
- 114×114
- 120×120
- 144×144
- 150×150
- 152×152
- 180×180
- 192×192
- 310×310
Tentu saja, semakin besar resolusinya, semakin bagus tampilan faviconnya. Tools Favicon Generator yang sudah kita bahas tadi juga bisa menghasilkan banyak resolusi lho. Nggak cuma file .ico aja.
Caranya, pada halaman upload gambar untuk dijadikan favicon dilangkah sebelumnya, opsi yang kita pilih adalah Generate only 16×16 favicon.ico. Nah, kali ini, opsi yang dipilih adalah yang dibawahnya, yaitu Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps.
Kemudian generate, lalu download hasilnya. Anda akan dapat file kompres dalam format .zip. Isinya berupa file favicon berformat .png dalam beragam resolusi.
Terus, bagaimana cara memasang faviconnya ya?
Cara Memasang Favicon
Cara memasang favicon untuk blog atau website kita itu mudah kok. Apalagi yang platform ngeblognya pakai blogger.com. Cukup klak-klik aja langsung beres.
Untuk platform blogger.com, caranya begini. Klik menu Settings, lalu tetap pada bagian Basic. Klik pada link Favicon. Tab baru akan terbuka, kemudian pilih file faviconnya, dan klik tombol Save. Selesai.
Untuk website, yang harus Anda lakukan adalah mengedit file kodingannya. Terutama pada bagian <head> dan </head> .
Setelah kita mendownload file kompres favicon tadi, upload salah satu filenya ke server/hosting website Anda (biasanya di folder public_html).
Kemudian, Anda tambahkan script berikut di antara <head> dan </head> Jangan lupa sesuaikan gambar yang Anda pilih & lokasi gambar di server/hostingnya ya.
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Terakhir, save file kodingan tersebut. Sekarang coba blog/website Anda, kemudian tekan kombinasi tombol Ctrl+Shift+R (Mozilla Firefox) untuk hard refresh.
Tujuannya untuk membersihkan cache & cookie yang pernah tersimpan saat mengakses blog/website Anda. Kalau sudah, harusnya faviconnya berubah.
Demikian postingan kita kali ini tentang pengertian favicon, cara membuat favicon blog secara online, beragam ukuran favicon, dan cara memasang favicon. Semoga bisa bermanfaat untuk Anda.
