Dalam langkah ke-8 pada artikel Langkah-Langkah Saya Membuat Blog di Blogger sempat saya jelaskan selintas terkait pengaturan favicon blog yang merupakan bagian dari tampilan situs mewakili identitas situs itu sendiri.
Favicon akan muncul disamping title blog di tab aplikasi mesin pencari. Selain itu ia juga muncul sebagai ikon yang muncul di history yang paling sering dibuka di mesin pencari (contoh di saya adalah Chrome).
Bagaimana Cara Saya Membuat Ikon Blog?
Tipe Ikon Blog
Sebelum lanjut ke bagaimana cara membuat ikon blog, terlebih dahulu kita mesti memilih icon blog kita apakah akan berupa foto atau teks? Untuk blog yang menonjolkan personal branding (pemilik blog) lebih baik menggunakan foto sendiri. Contoh blog yang icon websitenya menggunakan foto pemilik web adalah romeltea.com.
Blog pribadi tak harus menampilkan ikon berupa foto sendiri. Semuanya disesuaikan pada keinginan dan penilaian pemilik, tampilan seperti apa yang terbaik. Kemudian untuk blog yang ingin membangun dan memperkuat branding blog itu sendiri beserta kontennya, maka lebih baik menggunakan icon gambar/teks/simbol. Situs maxmanroe.com misalnya, ikon blognya adalah huruf 'M' dengan padanan warna yang kontras dan menjadi brand untuk blognya.
Relasi Ikon dan Logo
Setelah memilih teks gambar untuk ikon blog misalnya, maka ikon harus selaras dengan logo blog yang biasanya ada di header blog atau section 'about us'. Arti selaras bukan sama, meskipun di situs ini saya menggunakan logo dan icon dengan gambar yang sama (hanya berbeda ukuran saja).
Contoh keselarasan ikon dan logo blog yang selaras misalnya situs detik.com. Logo website adalah gambar teks "detikcom" dimana teks 'detik' berwarna biru dan teks 'com' gradasi warna dari ungu ke orange/jingga. Sedangkan ikon situsnya hanya huruf 'd' berwarna putih yang menggunakan gradasi warna biru hingga orange dalam sebuah lingkran sebagai background huruf 'd' tersebut.
 |
| logo detik.com |
 |
| ikon detik.com |
Contoh lain paling mudah adalah logo Google dan ikon G untuk Google. Oleh karena itu, pastikan sinkronisasi idealisme, konsep, pesan, visi dan misi pemilik web terwakili oleh logo dan ikon. Logo dan ikon yang berbeda jauh akan mendatangkan penilaian bahwa blog tidak diatur dengan profesional.
Blog-blog saya yang lainnya juga menggunakan logo dan ikon yang sama. Silakan dicek di sebagian blog seperti www.finance.my.id, www.leksikonsastra.my.id, www.literature.my.id.
Cara Membuat Ikon
Setelah dua poin di atas selesai mari kita runtut proses pembuatan ikon blog.
- Membuat gambar .png di Photoshop; kalau kamu hanya butuh icon/simbol bisa cari secara online kemudian unduh tipe .png agar transparan. Akan tetapi jika ingin membuat sendiri maka kamu bisa membuat di Photoshop ataupun CorelDraw. Saya biasa membuat gambar dengan ukuran besar 512 x 512 pixel.
- Upload di menu setting blog Favicon seperti ini:
- Convert dengan favicon.io; file yang diupload di menu setting blog kemudian dikonversi di situs favicon.io dengan memilih PNG -> ICO. Lalu Download.
- Klik download; setelah file didownload dan diekstrak pastikan sudah membaca juga cara memasangnya di menu installation. Copy dan simpan terlebih dahulu kode link untuk dasang dibawah tag
<head>seperti berikut ini:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest">Saya hanya menggunakan 3 link pertama saja, untuk file webmanifest saya belum menggunakannya karena belum tahu cara pemasangannya di Blogger.
- Upload gambar melalui post; buatlah satu post kemudian upload semua gambar hasil ekstrak dari favicon_io. Kemudian perhatikan dan catat link gambarnya dengan melihat tampilan html postingan seperti di bawah ini:
Satu contoh link gambar adalah:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE06QDnokxZgR0rIm0vF-7V_JHIcNSmCZzRiJQjw-rIRvkCNZP1XCXnOJHdcfd6v_Yy3ZF4XwWp1dWXUODw7RDGRIFc88iL-1bK5swSMhTCKdmBYaV0GV9yenGYOE5J5ODTxGnT4haLb4/s32/favicon-32x32.png- Copy paste link; contohnya seperti berikut ini:
<link rel="apple-touch-icon" sizes="180x180" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhREIpKHvafNWVMqvwrf8rV_R-jYmK3c6XRDnSTLGC6qZf8kl7BfjYK3SOZvGqeSuueVAZq-CLvg767T9lE9RwhjZBBjtgxj843sJNpaNuZEnwb4JTYGLQ3ZCdrmbZiccv4ga9qXr8pMS4/s180/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE06QDnokxZgR0rIm0vF-7V_JHIcNSmCZzRiJQjw-rIRvkCNZP1XCXnOJHdcfd6v_Yy3ZF4XwWp1dWXUODw7RDGRIFc88iL-1bK5swSMhTCKdmBYaV0GV9yenGYOE5J5ODTxGnT4haLb4/s32/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcJ77519ZgKgCGqvpuHUCn5U8hQxhl1cfFhltePdso_3LXcdCK_j-_gFWO2zG19WD2e4NP_mq28DgUios95witPvI7kG4h-6kg7uMBwoKoPuVMjT54zxSVBcfDPUUAghCb5DiYrXZXTxU/s16/favicon-16x16.png">- Copy dan pasangkan kode di point 5 ke template blog seperti berikut:
Kesimpulan:
Jadi, untuk memasang favicon saya melakukannya dua kali. Pertama melalui settingan blog dan kedua memasang dengan url tag. Cara yang kedua ini konon katanya untuk mempercepat mesin pencari mereload ikon blog kita (meski belum tahu kebenarannya) tapi tetap saya coba.
Semoga tulisan singkat ini bermanfaat dan silakan dibagikan di sosial media kamu agar orang lain sama-sama mendapatkan manfaat serupa.
Posting Komentar