Standard Ukuran Favicon pada Semua Platform
Standarisasi Favicon pada Platform Tertentu - Hallo semuanya, favicon adalah salah satu syarat agar sebuah website dapat dikatakan profesional. Pada artikel sebelumnya DUMET School pernah membahas tentang cara memasang favicon pada website baik secara otomatis ataupun manual pada artikel yang berjudul Menambahkan Gambar pada Title Bar.
Favicon distandarisasi oleh W3C dalam rekomendasi HTML 4.01. Implementasi standar menggunakan elemen link dengan atribut rel di bagian <head> dokumen yang menentukan format file serta nama file dan lokasi. File tersebut dapat berada di direktori situs Web apa pun dan memiliki format file gambar apa pun (ico, png, jpeg, gif).
Untuk perangkat Apple dengan sistem operasi iOS versi 1.1.3 atau lebih baru dan untuk perangkat Android, Kalian dapat membuat shortcut di layar home dengan menggunakan tombol Tambahkan ke Layar Awal di dalam fitur bagikan di Safari. Untuk platform yang berbeda kalian bisa tambahkan tambahkan link di bagian head halaman.
Berikut adalah ukuran dari masing-masing platform
| Platform | Name | Rel value | Favicon size |
|---|---|---|---|
| Google TV | favicon.png | icon | 96×96 |
| Opera Coast | favicon-coast.png | icon | 228×228 |
| Ipad Retina, iOS 7 keatas | apple-touch-icon-152×152-precomposed.png | apple-touch-icon-precomposed | 152×152 |
| Ipad Retina, iOS 6 keatas | apple-touch-icon-144×144-precomposed.png | apple-touch-icon-precomposed | 144×144 |
| Ipad Min, first generation iOS 7 keatas | apple-touch-icon-76×76-precomposed.png | apple-touch-icon-precomposed | 76×76 |
| Ipad Mini,first generation iOS 6 dan sebelumnya | apple-touch-icon-72×72-precomposed.png | apple-touch-icon-precomposed | 72×72 |
| Iphone Retina, iOS 7 keatas | apple-touch-icon-120×120-precomposed.png | apple-touch-icon-precomposed | 120×120 |
| Iphone Retina, iOS 6 dan sebelumnya | apple-touch-icon-114×114-precomposed.png | apple-touch-icon-precomposed | 114×114 |
Pada tabel diatas terdapat masing-masing platform dengan standard nama file, rel, dan ukuran gambar yang direkomendasikan, selain itu, berikut adalah contoh Penerapan pada tag link di bagian head
<!-- default favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- wideley used favicon -->
<link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
<!-- for apple mobile devices -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120">
<!-- google tv favicon -->
<link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">
Baiklah teman-teman demikian artikel DUMET School kali ini yang membahas standard ukuran favicon pada semua platform, dengan begini kalian bisa menyesuaikan icon yang akan kalian buat untuk website kalian.
Artikel Terkait:
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
