Menambahkan Custom Icon/Favicon Blog Dengan Tag Link

Di artikel yang lalu saya telah mempublikan konten tentang favicon dan di artikel ini saya juga akan membahas tentang cara menambahkan custom favicon melalui tag link di html situs web/blog. Kelebihan menambahkan favicon dengan tag link adalah sebagai barikut:

  • Support (mendukung) untuk semua platform web yang open source
  • Support (mendukung) mobile browser dan dekstop
  • Support (mendukung) banyak browser dan versi
Icon Link Tags
Sekarang kita langsung saja topik inti yaitu menambahkan icon atau favicon blog dengan tag link html, simak dengan baik, berikut ini adalah tag link favicon yang paling umum digunakan. [ads id="ads1"]

Cara Menggunakan Tag Icon

  1. Siapkan icon/favicon web/blog.
  2. Tambahkan Tag Icon diantara tag <head> dan </head>.
  3. Ganti URL icon dengan URL icon blog anda.
Catatan: Size icon harus sesuai dengan yang tertera pada tag icon, jangan merubah size icon yang sudah ditentukan karena itu akan berdampak pada kinerja perenderan browser pada web/blog anda.

Contoh Penerapan Tag Icon

Saya akan mencontohkan penerapan tag icon pada platform blogger dan berikut ini adalah URL icon yang sudah saya siapkan dengan size awal 250 x 250 dan format file png.
https://1.bp.blogspot.com/-fioSS56a-BQ/YDHcjEPRBXI/AAAAAAAAAxU/y0qkjqDmcUs6Q5flEGAE9EbKB_zQ_5M3QCLcBGAsYHQ/s250/cordial-favicon.png
Untuk merubah size icon kita hanya perlu merubah s250 menjadi s32 misalnya, sehingga pada penerapan yang sebenarnya tag icon akan terlihat seperti berikut ini:
<head>

   <link rel="icon" type="image/png" href="https://1.bp.blogspot.com/-fioSS56a-BQ/YDHcjEPRBXI/AAAAAAAAAxU/y0qkjqDmcUs6Q5flEGAE9EbKB_zQ_5M3QCLcBGAsYHQ/s32/cordial-favicon.png" sizes="32x32"/>
   <link rel="icon" type="image/png" href="https://1.bp.blogspot.com/-fioSS56a-BQ/YDHcjEPRBXI/AAAAAAAAAxU/y0qkjqDmcUs6Q5flEGAE9EbKB_zQ_5M3QCLcBGAsYHQ/s192/cordial-favicon.png" sizes="192x192"/>
   <link rel="icon" type="image/png" href="https://1.bp.blogspot.com/-fioSS56a-BQ/YDHcjEPRBXI/AAAAAAAAAxU/y0qkjqDmcUs6Q5flEGAE9EbKB_zQ_5M3QCLcBGAsYHQ/s96/cordial-favicon.png" sizes="96x96"/>
   <link rel="icon" type="image/png" href="https://1.bp.blogspot.com/-fioSS56a-BQ/YDHcjEPRBXI/AAAAAAAAAxU/y0qkjqDmcUs6Q5flEGAE9EbKB_zQ_5M3QCLcBGAsYHQ/s16/cordial-favicon.png" sizes="16x16"/>
   <link rel="apple-touch-icon" sizes="57x57" href="https://1.bp.blogspot.com/-fioSS56a-BQ/YDHcjEPRBXI/AAAAAAAAAxU/y0qkjqDmcUs6Q5flEGAE9EbKB_zQ_5M3QCLcBGAsYHQ/s57/cordial-favicon.png"/>
   <link rel="apple-touch-icon" sizes="60x60" href="https://1.bp.blogspot.com/-fioSS56a-BQ/YDHcjEPRBXI/AAAAAAAAAxU/y0qkjqDmcUs6Q5flEGAE9EbKB_zQ_5M3QCLcBGAsYHQ/s60/cordial-favicon.png"/>

...More tags

</head>
Platform blogger mendukung auto resize image sehingga untuk menambahkan tag icon kita hanya perlu mengupload satu icon saja, jika platform web anda tidak mendukung auto resize image kamu dapat mengupload beberapa icon dengan size dan format yang disesuaikan dengan tag icon yang saya sedikan diatas.

Sampai disini saya harap artikel ini cukup membantu anda dalam menambahkan icon web/blog yang support untuk banyak browser dan versi.

Cobalah sendiri dan jika ada kendala jangan sungkan untuk bertanya kepada admin melalui formulir kontak yang saya sediakan di blog ini, akhir kata saya ucapkan terimakasih telah berkunjung dan sampai jumpa lagi.
Lebih baru Lebih lama
Close