Sebelum kehadiran smartphone dan banyak-nya jenis browser modern setiap website seperti situs blogger umumnya menggunakan sebaris tag favicon.ico untuk menambahkan icon situs web. Namun sekarang meta tag icon seperti itu kurang maksimum bahkan tidak support di sebagian browser.
Agar icon situs web khususnya icon situs blogger muncul di banyak jenis browser dan kita perlu menambahkan beberapa jenis meta tag icon dengan size atau ukuran icon website yang berbeda.
Meta tag icon ini untuk mendukung keterlihatan icon atau logo situs di banyak browser modern dan di banyak tempat seperti pada tab browser, beranda browser, history, recent history, favorite dan lainnya seperti terlihat pada contoh di bawah ini;
Agar icon website muncul secara maksimal di banyak jenis browser kita perlu menambahkan beberapa versi meta tag icon berikut diantara tag pembuka <head> dan tag penutup </head> html situs web.
[code]<link rel="apple-touch-icon" sizes="72x72" href="url-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="url-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="url-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="url-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="url-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="url-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="url-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="url-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="url-icon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="url-icon-96x96.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="url-icon-144x144.png">[/code]
Catatan: Tidak semua meta tag icon harus di tambahkan ke dalam html situs web, pilih beberapa meta tag icon saja untuk mewakili browser yang paling umum di gunakan dan jenis file gamar icon yang digunakan adalah file png "icon_name.png".
Cara Memasang Meta Icon Pada Situs Blogger
Tambahkan meta tag icon di bawah ini pada area <head> html situs, lebih jelas nya letakkan di antara kode <head> dan </head>, kemudian ganti tanda pagar atau hashtag "#" dengan url_icon atau logo yang di inginkan.[code]<link href='#' rel='icon' sizes='192x192'/>
<link href='#' rel='apple-touch-icon'/>
<link href='#' rel='apple-touch-icon' sizes='152x152'/>
<link href='#' rel='apple-touch-icon' sizes='180x180'/>
<link href='#' rel='apple-touch-icon' sizes='167x167'/>[/code]
Pengaturan size image data icon
Untuk menyesuaikan ukuran atau size icon.png dengan size yang ditetapkan pada meta (link) tag icon, kamu tidak perlu membuat dan menggunggah banyak gambar dengan ukuran (size) yang berbeda. Cukup unggah satu (1) icon.png persegi misal: 5cm x 5cm dengan data size dibawah 350kb, kemudian icon.png akan kita compress menggunakan image url blogspot agar sesuai dengan ukuran yang di tetapkan pada meta tag icon, perhatikan image_url dibawah ini.
[code type="URL"]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s470/HG.png[/code]
Perhatikan size file pada url diatas, kemudian ganti s470 dengan size yang ada pada masing-masing meta tag icon, misalnya s192, s152, s180 dan s167, dengan demikian ukuran atau size mage "icon.png" akan di resize sesuai dengan ukuran pada tag icon. Untuk membuat ukuran normal icon.png silahkan hapus /s470 dari image_url.
Contoh Penerapan Sebenarnya:
[code]<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s144/ms-icon-144x144.png' name='msapplication-TileImage'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s192/HG.png' rel='icon' sizes='192x192'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s32/HG.png' rel='icon' sizes='32x32'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s96/HG.png' rel='icon' sizes='96x96'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s16/HG.png' rel='icon' sizes='16x16'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/' rel='apple-touch-icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s152/HG.png' rel='apple-touch-icon' sizes='152x152'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s180/HG.png' rel='apple-touch-icon' sizes='180x180'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc83GPyaAEc74EeKHiqLRNIDeTZbaUOIuMxSGArjewnvYQiBs3NOCCcK7H3uxD7GeWLItOEFRpldrjie7xbQyaoJYonS4QWMoyiLgLtCjL6iBktFSna0gXM0xrAKuxG7017iasc0tm0uU/s167/HG.png' rel='apple-touch-icon' sizes='167x167'/>[/code]
Setelah tag icon di terapkan silahkan lihat atau tinjau situs anda melalui smartphone (android atau apple) dengan browser chrome, opera dan safari, jangan lupa untuk meninjaukan situs saya juga jika kamu pengguna iphone.
Seberapa Penting Tag Icon Untuk Situs Blogger?
Icon atau logo situs akan menambah nilai / tingkat propesional terhadap situs web itu sendiri, Selain itu icon/logo situs juga menjadikan situs web anda lebih mudah di kenali karena itu merupakan brand situs web. Orang-orang biasanya lebih cenderung mengenali atau menghafal brand di bandingkan url situs.
Demikian saja penjelasan dan cara menerapkan tag icon website, saya harap artikel ini dapat memberikan sedikit ilmu atau sekedar pemahaman tentang website selamat mencoba dan sukses buat kamu. Jika kamu butuh refesensi yang lebih akurat mengenai cara penerapan meta tag icon ini silahkan view-source situs saya untuk melihat meta icon yang saya terapkan (Buka halaman "Beranda" situs ini kemudian tekan Ctrl+U untuk melihat).