Cara Membuat Favicon Gratis Di Blog |
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.
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.
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/.
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.
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. sobat akan dapat file kompres dalam format .zip. Isinya berupa file favicon berformat .png dalam beragam resolusi.
Terus, bagaimana cara memasang faviconnya ya?
Untuk platform blogger.com, caranya begini.
Tujuannya untuk membersihkan cache & cookie yang pernah tersimpan saat mengakses blog/website sobat. 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 sobat.
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.
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 saya 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.
Kalau sudah dibuka, seperti ini tampilan tools-nya.
Membuat favicon gratis blod di Favicon Generator |
- 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.
- 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,tols ini bukanlah pembuat favicon dari nol, melainkan membuat favicon dari gambar yang sudah ada.
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
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. sobat 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 sobat lakukan adalah mengedit file kodingannya,terutama pada bagian
Kemudian, sobatku tambahkan script berikut di antara <head> dan </head> Jangan lupa sesuaikan gambar yang sobat pilih & lokasi gambar di server/hostingnya ya.
<head> dan </head>Setelah kita mendownload file kompres favicon tadi, upload salah satu filenya ke server/hosting website sobat (biasanya di folder public_html).
Kemudian, sobatku tambahkan script berikut di antara <head> dan </head> Jangan lupa sesuaikan gambar yang sobat 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 sobat, kemudian tekan kombinasi tombol Ctrl+Shift+R (Mozilla Firefox) untuk hard refresh.
Tujuannya untuk membersihkan cache & cookie yang pernah tersimpan saat mengakses blog/website sobat. 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 sobat.