Cara Memasang Favicon (Icon Blog) Pada Situs Blogger

Favicon adalah ikon utama yang muncul pada address bar suatu laman web dan merupakan logo dari laman web tersebut; juga dikenal sebagai shortcut icon, website icon, URL icon, atau bookmark icon (Wikipedia)

Favicon sendiri merupakan kependekan dari “favorite icon”. Definisi lengkapnya adalah ikon unik pada sebuah website yang berfungsi sebagai identitas dari website tersebut. Favicon sendiri tampil di bagian tab browser dan sekilas ukurannya juga terlihat mungil. untuk membuat Favicon sendiri cukup mudah bisa dengan menggunakan cara Online atau Offline, saya sendiri menggunakan Adobe Photoshop untuk membuat Favicon Blog ini. Berikut dimensi Favicon yang saya buat :
  • Ukuran : 75 x 75 Pixel
  • Ekstensi :  PNG
  • Size : < 100Kb


Fungsi Favicon

Diantara fungsi dari Favicon adalah sebagai berikut :

  • Sebagai tanda unik dari sebuah website atau blog 
  • Sebagai lambang visual dari sebuah halaman web 
  • Branding sebuah web
  • Tanda Pengenal Web

 

Cara Memasang Favicon di Blogger

Untuk memasang favicon cukup mudah tidak perlu ribet-ribet amat loh 

  • Masuk ke Dashboar Blogger
  • Pilih Setelan
  • Klik Favicon 
  • Upload gambar Favicon anda

 

Namun ternyata ukuran Favicon tiap-tiap flatform berbeda loh. ukuran Favicon akan disesuaikan dengan jenis platform yang digunakan, entah itu Google maupun iPad dan iPhone. Berikut adalah rekomendasi ukuran Favicon di  beberapa platform yang bisa dijadikan rujukan pada saat proses pembuatan:

  • Platform Google dianjurkan memakai ukuran 96×96.
  • Platform Opera Coast memakai ukuran 228×228.
  • Platform iPad Retina untuk iOS 7 ke atas memakai ukuran 152×152.
  • Platform iPad Retina untuk iOS 6 ke atas memakai ukuran 144×144.
  • Platform iPad Mini iOS 7 ke atas memakai ukuran 76×76.
  • Platform iPad Mini iOS 6 ke atas memakai ukuran 72×72.
  • Platform iPhone Retina untuk iOS 7 ke atas memakai ukuran 120×120.
  • Platform iPhone Retina untuk iOS 6 ke atas memakai ukuran 114×114.

Maka dari itu kita tambahkan link gambar favicon manual pada template kita, caranya silahkan copy kode di bawah dan tempelkan / simpan di bawah kode <head>

<!-- [ Favicon Blog ] -->  
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='icon' type='image/x-icon'/>
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='apple-touch-icon'/>
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='apple-touch-icon' sizes='57x57'/>
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='apple-touch-icon' sizes='72x72'/>
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='apple-touch-icon' sizes='76x76'/>
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='apple-touch-icon' sizes='114x114'/>
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='apple-touch-icon' sizes='144x144'/>
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png' rel='apple-touch-icon' sizes='180x180'/>

Selanjutnya silahkan ganti link gambar favicon https://3.bp.blogspot.com/-ecf5cpCfNsk/YGPNn5Q5PCI/AAAAAAAAArY/AGPbZ1UgSNonIOZB8OhOSNZ5gAPckPg2gCLcBGAsYHQ/s0/logo%2Baries.png dengan link gambar milik anda.

agar cepat dalam pengindekan favicon silahkan submit kembali web anda di searchconsole baik itu di google, bing atau yandex. Semoga bermanfaat

1 Komentar

Pastikan anda berkomentar dengan sopan