Cacaniar - Mau tampilan web anda elegan dan mudah dikenal orang. Kebanyakan blog-blog besar yang menduduki peringkat pertama mesin pencari, semuanya telah memakai favicon. Bagaimana dengan blog anda?. Kalau kemarin kita sudah membahas mengenai cara pasang favicon lewat dasboard blog di blogger. Hari ini admin akan menjelaskan, bagaimana cara memasang favicon lewat HTM template blogger.
 |
| Cara Pasang Favicon Di Editor HTML Blogger Pakai Generator |
Favicon sebagaimana pembahasan admin diartikel sebelumnya, sudah dijelaskan lengkap mengenai fungsi dan manfaat favicon untuk blog atau website. Nah untuk html sendiri tentunya memiliki beberapa perbedaan, namun sebelum anda memasang favicon lewat html, anda harus sudah mengganti / memasang favicon lewat dashboar. karena html merupakan kelanjutannya, jika anda masih bingung simak saja caranya pada link di atas tentang cara pasang favicon lewat dasboard blog di blogger.
Nah jika sudah bagaimana cara membuatnya, ikuti terus panduan berikut ini :
1. Langkah Persiapan Pembuatan Favicon
- Siapkan gambar favicon anda dalam format (JPG, PNG, GIF)
- Ukuran favicon harus memiliki panjang dan lebar yang sama (bujur sangkar)
2. Membuat HTML Favicon Pada Situs Generator
Pada langkah berikut ini kita akan menuju situs / website generator favicon untuk membuat favicon. Memang terdapat banyak sekali pilihan website generator pembuat favicon namun kali ini admin membuatnya di situ Favicomatic. Silahkan ikuti panduannya sebagai berikut :
- Masuk ke situs Favicomatic jika telah masuk silahkan siapkan gambar favicon anda.
- Kemudian pilih Every damn size, sir!
- Pilih advanced setting
- Masukkan URL situs anda
- Nama Situs
- RSS Feed URL situs
- Kemudian pilih Upload Your Image
Setelah pilih upload maka akan muncul kode HTML Favicon, dan juga bisa terdownload secara otomatis di komputer anda. File yang terdownload nantinya dengan ekstensi zip atau winras, silahkan klik kanan dan pilih ekstrak file. Setelah file di ekstrak maka isi dari file seperti gambar di bawah ini :
Langkah selanjutnya copy HTML nya yang ada pada file nooteped, kemudan paste kodenya dan letakkan di bawah kode <head>. File HTMLnya seperti berikut.
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://cacaniar.blogspot.com/apple-touch-icon-60x60.png" /><link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://cacaniar.blogspot.com/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://cacaniar.blogspot.com/apple-touch-icon-152x152.png" /><link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://cacaniar.blogspot.com/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://cacaniar.blogspot.com/apple-touch-icon-76x76.png" />
<link rel="icon" type="image/png" href="https://cacaniar.blogspot.com/favicon-32x32.png" sizes="32x32" /><link rel="icon" type="image/png" href="https://cacaniar.blogspot.com/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="https://cacaniar.blogspot.com/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="https://cacaniar.blogspot.com/favicon-16x16.png" sizes="16x16" />
<meta name="msapplication-square70x70logo" content="https://cacaniar.blogspot.com/mstile-70x70.png" /><link rel="icon" type="image/png" href="https://cacaniar.blogspot.com/favicon-128.png" sizes="128x128" />
<meta name="application-name" content="https://cacaniar.blogspot.com/ - Cara Tips Tutorial"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="https://cacaniar.blogspot.com/mstile-144x144.png" />
<meta name="msapplication-square310x310logo" content="https://cacaniar.blogspot.com/mstile-310x310.png" /><meta name="msapplication-square150x150logo" content="https://cacaniar.blogspot.com/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="https://cacaniar.blogspot.com/mstile-310x150.png" />code-box
Sampai disini maka proses pembuatan favicon anda telah berhasil, selamat mencoba, jika ada permasalahan silahkan sampaikan di kolom komentar. Sampai jumpa.
Posting Komentar untuk "Cara Pasang Favicon Di Editor HTML Blogger Pakai Generator"