Menambahkan Ikon di Chrome
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
Android
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.
Belum ada Komentar untuk "Menambahkan Ikon di Chrome"
Posting Komentar