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:

Menambahkan Gambar pada Title Bar

13 Maret 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat