Cara Pasang Favicon Di Editor HTML Blogger Pakai Generator

Cara Atur Favicon Di Editor HTML Blogger Pakai Generator

Cara Pasang Favicon Di Editor HTML Blogger Pakai Generator - 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.

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

Favicon HTML Blogger

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 : 

Favicon HTML Blogger

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="57x57" href="https://www.sahupalashare.com/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.sahupalashare.com/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.sahupalashare.com/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://www.sahupalashare.com/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.sahupalashare.com/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://www.sahupalashare.com/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://www.sahupalashare.com/apple-touch-icon-120x120.png" /> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://www.sahupalashare.com/apple-touch-icon-76x76.png" />
<link rel="icon" type="image/png" href="https://www.sahupalashare.com/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://www.sahupalashare.com/favicon-196x196.png" sizes="196x196" /> <link rel="icon" type="image/png" href="https://www.sahupalashare.com/favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/png" href="https://www.sahupalashare.com/favicon-16x16.png" sizes="16x16" />
<meta name="msapplication-square70x70logo" content="https://www.sahupalashare.com/mstile-70x70.png" />
<link rel="icon" type="image/png" href="https://www.sahupalashare.com/favicon-128.png" sizes="128x128" /> <meta name="application-name" content="Sahupalashare.com - Cara Tips Tutorial"/> <meta name="msapplication-TileColor" content="#FFFFFF" /> <meta name="msapplication-TileImage" content="https://www.sahupalashare.com/mstile-144x144.png" />
<meta name="msapplication-square310x310logo" content="https://www.sahupalashare.com/mstile-310x310.png" />
<meta name="msapplication-square150x150logo" content="https://www.sahupalashare.com/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="https://www.sahupalashare.com/mstile-310x150.png" />

Sampai disini maka proses pembuatan favicon anda telah berhasil, selamat mencoba, jika ada permasalahan silahkan sampaikan di kolom komentar. Sampai jumpa.

Artikel Terkait

Saya hanya seorang penulis blog pemula yang baru belajar ngeblog.


EmoticonEmoticon