Ketika saya mengetikkan kata kunci "Cara Agar Favicon Atau Icon Blog Tampil Bagus Di SmartPhone", si mbah Google selalu menampilkan list blog yang membahas tentang cara mengganti icon blog, menurut saya sich cara ini mudah, ya tinggal buat icon/logo blog kemudian pada bagian tata letak di dashbord blog, bagian faviconnya di klik dan cari file favicon logo blognya, jadi !
Cara Agar Favicon Atau Icon Blog Tampil Bagus Di SmartPhone ini bertujuan agar blog sobat ketika di buka di laptop dan di smartphone, akan meninggalkan jejak browsing di browser yang di pakai oleh para pengunjung, seperti gambar dibawah ini
Kalau sobat buka di smartphone, maka tampilan nya bagus seperti gambar di bawah ini, icon blognya muncul dan tidak pecah.
Penasaran bagaimana cara membuat seperti itu? yuk kita intip tips dan trik blogging berikut.
Ikuti langkah-langkah berikut ya...
1. Siapkan file favicon blog sobat, bisa di buat menggunakan program pengolah gambar, seperti Photoshop. Biasanya favicon untuk blog berukuran persegi, misalnya 200 x 200 pixel, 300 x 300 pixel.
2.Setelah favicon nya ada, kemudian file favicon ini mesti sobat generate menggunakan aplikasi online yang bernama favicon generator, klik link ini favicon generator
3. Nanti file hasil generator sobat dapatkan dari aplikasi favicon generator berupa favicon dengan bermacam-macam ukuran dalam satu folder yang di kompress (zip, rar)
Silahkan di ekstrak dulu
Sehingga favicon yang sobat dapat seperti gambar di atas, dengan berbagai ukuran dengan nama file yang berbeda-beda. File inilah nanti yang kita ambil dan masukkan ke dalam blog kita.
4. Selanjutnya, buka dashbord blog sobat, pada menu halaman, buat halaman baru, untuk menyimpan file favicon yang digunakan untuk keperluan ini
Silahkan masukkan gambar favicon yang di dapat dari generate favicon tadi, file seperti dibawah ini
- android-icon 192x192.png
- apple-icon 180x180.png
- ms-icon 144x144.png
- favicon 32x32.png
Minimal ke empat file tersebut mesti sobat masukkan ke dalam halaman blog sobat untuk menyimpan file tersebut. Boleh tambah file yang lain, sesuai kebutuhan.
5. Selanjutnya buka tema blog sobat dan kemudian edit html nya
Silahkan copy paste semua kode dibawah ini, letakkan dibawah <head>
Silahkan ganti kode yang saya warnai sesuai dengan link gambar favicon yang telah sobat buat tadi. Cara nya kembali ke halaman yang telah dibuat untuk menyimpan file favicon, kemudian klik kanan pada favicon pilihan, kemudian pilih copy link address, untuk mendapatkan link gambar nya,- android-icon 192x192.png
- apple-icon 180x180.png
- ms-icon 144x144.png
- favicon 32x32.png
Minimal ke empat file tersebut mesti sobat masukkan ke dalam halaman blog sobat untuk menyimpan file tersebut. Boleh tambah file yang lain, sesuai kebutuhan.
5. Selanjutnya buka tema blog sobat dan kemudian edit html nya
Silahkan copy paste semua kode dibawah ini, letakkan dibawah <head>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/><link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIAmGIGeN2JDhUbyfbtio_wFppUMUjyU_Yo2G7aYtTxtq4OdJogUZoxXVKbewkguERgimfdhcjsex9TzHC2ecYj3oVirFz9-zL2rY0iJ7Wbrnvir8aehyV3Cb6QgS_RIjEnwBSKuDAxQ/s1600/favicon-32x32.png' rel='icon' sizes='32x32'/><link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh37xXaA8L6rEnPl8W6shvo3mHzidIgKXQiDwuPHXGaQLNmILY90maINdO8aCK4QiLXPWuJfFeZxCdlNihaC3j4Or-1xP6hZf1Uk0tmBQMycx5yqIiEved-ZkZCCN3TT9KT4LtFagnjU7E/s1600/android-icon-192x192.png' rel='icon' sizes='192x192'/><link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPSBWh9FV8OyhQZWZfCS13_VCknXuoGr-C7RZk6Y9777Ej2cFhoNUkX4Qi5HMmvOImytp-NyIh97cswPI70FcSBl2VS4VbuXAWJRcuBAjhz9ELMpzGIwnztGc8JZTOAgIyxbS2kJ_NOhM/s1600/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'/><meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqIk97VxTYEbv7tDxvEvXshkoBqt80-xOmDiavxsFQD1Od9uPd-DNqbuLWbh8LZUsyQjv0ykvj0Hh0zYk99j3FtrP4GDHRWznyxPf3FwEzEdKbd2p3wK51PbBsW5wcSzHHgVjFmbS4MAY/s1600/ms-icon-144x144.png' name='msapplication-TileImage'/>
kemudian paste kan di html tema blog sobat, sesuaikan dengan nama file yang akan diganti, misalnya mengganti file favicon android, ambil link gambar nya android-icon 192x192.png, pastekan di bagian android kode diatas. Lakukan langkah ini untuk ke empat link favicon nya.
Sehingga hasil editan nya seperti gambar dibawah ini
Setelah langkan ini sobat kerjakan, simpan temanya. Kalau cara benar, sobat akan mendapatkan hasil nya seperti gambar yang diatas tadi, Silahkan cek hasilnya, baik di Smartphone maupun di Laptop.
Terakhir pada bagian Tata Letak di Dashbord blogger sobat, pada bagian favicon, klik edit kemudian ganti gambar faviconnya yang sobat buat di favicon generator tadi, pilih gambar favicon dengan nama favicon-32x32.png, sesuai dengan kode yang telah dibuat tadi
Itulah Tips Blogging "Cara Agar Favicon Atau Icon Blog Tampil Bagus Di SmartPhone". Semoga bermanfaat ya...:-)
0 Komentar