Menambahkan Ikon di Chrome

Malestea
Malestea
Menambahkan Ikon di Chrome
Browser modern dapat memudahkan kita dalam menyesuaikan komponen tertentu, seperti ikon, address bar yang saya buat pada postingan beberapa hari lalu dan bahkan menambahkan sebuah peta/situs/map wilayah kita sendiri disebuah Browser. Memang perlu kita ketahui bahwa dengan menyesuaikan komponen tertentu dapat membuat penggunjung untuk kembali ke web kita.

Jika kemarin saya membahas Address Bar maka sekarang adalah Ikon pada Chrome, saya menyebutnya seperti itu... Ohhh sebelumnya saya akan meperlihatkan sesuatu untuk kalian yang belum paham dengan judul yang saya tulis diatas.

Dekstop
Menambahkan Ikon di Chrome

Android
Menambahkan Ikon di Chrome

Seperti yang bisa kalian lihat pada gambar diatas merupakan Ikon pada Browser Chrome dari Android dan Dekstop terdapat Ikon yang sama yaitu situs saya Pintarsaurus, perlu kalian ketahui seharusnya Ikon tersebut berupa nama "P" bukan "Logo". Mungkin Anda akan bertanya kenapa bisa berubah dari nama "P" menjadi "Logo", seperti yang saya jelaskan bahwa Browser modern memudahkan kita dalam menyesuaikan komponen tertentu.

Menambahkan Ikon di Chrome


Ketika pengguna/pengunjung membuka situs milik kita secara otomatis browser akan mencoba untuk mengambil ikon dari HTML, seperti yang kita ketahui bahwa ikon muncul di banyak tempat, termasuk tab browser, tombol recent app, laman tab yang baru (atau baru saja dikunjungi), tombol subscribe dengan ikon dan lainnya.

<link rel="icon" href="Your Icon">
<link rel="apple-touch-icon" href="Your Icon">
<meta name="msapplication-square310x310logo" content="Your Icon">

Untuk menambahkan ikon pada sebuah Browser, kalian harus menambahkan sebuah kode head pada template blog. Lebih tepatnya pada bagian <head> atau diatas kode <b:skin>.

Kalian copy kode diatas dan taruh pada bagian <head> kalau binggung taruh saja pada kode <meta> yang mana saja, terpenting tepat berada di head

Kode diatas terdapat beberapa versi yang harus kalian ketahui seperti pada Browser, Chrome, Opera, Safare, IE (Internet Explorer), dan Windows Phone. Mari saya bahas satu-satu.

Chrome & Opera


Chrome dan Opera menggunakan Icon.png, yang diskalakan ke ukuran yang diperlukan oleh perangkat. Untuk mencegah penskala otomatis, Kalian bisa membuat Icon dengan menetapkan atribut sizes.


Note: Ukuran ikon harus 48px, 96px, 144px dan 192px


Safari

Safari juga menggunakan tag <link> dengan atribut rel: apple-touch-icon.

Kalian bisa menetapkan ukuran eksplisit dengan menyediakan tag tautan yang terpisah untuk setiap ikon, mencegah OS dari mengubah ukuran ikon otomatis:
<link rel="apple-touch-icon" href="Your Icon">
<link rel="apple-touch-icon" sizes="76x76" href="Your Icon">
<link rel="apple-touch-icon" sizes="120x120" href="Your Icon">
<link rel="apple-touch-icon" sizes="152x152" href="Your Icon">

Chrome & Opera

Layar beranda baru Windows 8 mendukung empat layout berbeda untuk situs yang dipasangi pin, dan membutuhkan empat ikon. Kalian bisa menghilangkan tag meta yang relevan jika kalian ingin mendukung ukuran tertentu.
<meta name="msapplication-square70x70logo" content="Your Icon">
<meta name="msapplication-square150x150logo" content="Your Icon">
<meta name="msapplication-wide310x310logo" content="Your Icon">

Diatas sudah saya jelaskan meskipun itu juga merupakan Referensi dari Developers Google, kalian bisa sesuaikan setiap kode <link> atau <meta> dengan ukuran yang di inginkan atau jika ingin lebih simple seperti yang saya jelaskan gunakan Icon dengan ukuran yang pas.

4 comments : Menambahkan Ikon di Chrome

  1. abang ichal
    nice post.
    • Malestea
      thank you
  2. Mas Monsta
    oh script nya ditaruh di HTML ya gan...nanti dicoba deh
    • Malestea
      iya di html, dicoba pokonya jadi tambah keren