HTML 5 Favicon - Dukungan?

Saya sedang membaca halaman Favicon di Wikipedia. Mereka menyebutkan spesifikasi HTML 5 untuk Favicon:

Spesifikasi HTML5 saat ini merekomendasikan menentukan ikon ukuran dalam berbagai ukuran menggunakan atribut rel = "icon" size = "daftar dimensi ikon yang dipisahkan oleh ruang" di dalam sebuah tag. [ sumber ] Beberapa format ikon, termasuk format wadah seperti file Microsoft .ico dan Macintosh .icns, serta Scalable Vector Graphics dapat disediakan dengan memasukkan tipe konten ikon dalam bentuk tipe = "tipe konten file" di dalam menandai.

Melihat artikel yang dikutip (W3) mereka menunjukkan contoh ini:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

Pertanyaan saya adalah apakah ada browser yang mendukung metode HTML 5?

Catatan: Saya tahu Apple menggunakan apple-touch-iconmetode meta tag mereka di atas metode HTML5.

Artikel wikipedia mengklaim:

Akan tetapi, peramban web Google Chrome, akan memilih ukuran pencocokan terdekat dari yang disediakan dalam header HTML untuk membuat ikon aplikasi 128 × 128 piksel ketika pengguna memilih pintasan Buat aplikasi ... dari menu "Tools".

Bagaimana Internet Explorer (v9 ke v11) dan Firefox menangani ini? Dan apakah artikelnya benar tentang bagaimana Chrome menangani Favicons HTML? (Tidak ada sumber yang dikutip untuk Chrome mengkonfirmasi ini.)

Dalam pencarian saya tidak dapat benar-benar menemukan info (kredibel) pada HTML 5 Favicon selain Artikel Wikipedia.

Jawaban yang diberikan (pada saat posting ini) adalah jawaban tautan saja jadi saya pikir saya akan meringkas tautan tersebut menjadi jawaban dan apa yang akan saya gunakan.

Saat bekerja untuk membuat Favicons Lintas Peramban (termasuk ikon sentuh) ada beberapa hal yang perlu dipertimbangkan.

Yang pertama (tentu saja) adalah Internet Explorer. IE tidak mendukung favicon PNG hingga versi 11. Jadi baris pertama kami adalah komentar bersyarat untuk favicon di IE 9 dan di bawah ini:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

Untuk menutupi penggunaan ikon, buat dengan ukuran 32x32 piksel. Perhatikan rel="shortcut icon"untuk IE untuk mengenali ikon itu perlu kata shortcutyang tidak standar. Kami juga membungkus .icofavicon dalam komentar bersyarat IE karena Chrome dan Safari akan menggunakan .icofile jika ada, meskipun ada opsi lain yang tersedia, bukan yang kita inginkan.

Di atas mencakup IE hingga IE 9. IE 11 menerima favicons PNG, namun IE 10 tidak. IE 10 juga tidak membaca komentar bersyarat sehingga IE 10 tidak akan menampilkan favicon. Dengan IE 11 dan Edge yang tersedia, saya tidak melihat IE 10 digunakan secara luas, jadi saya mengabaikan browser ini.

Untuk browser lainnya, kita akan menggunakan cara standar untuk mengutip favicon:

<link rel="icon" href="path/to/favicon.png">

Ikon ini berukuran 196x196 piksel untuk menutup semua perangkat yang menggunakan ikon ini.

Untuk menutupi ikon sentuh pada perangkat seluler, kita akan menggunakan cara milik Apple untuk mengutip ikon sentuhan:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Menggunakan rel="apple-touch-icon-precomposed"tidak akan menerapkan kilau reflektif saat bookmark di iOS. Agar iOS menerapkan penggunaan bersinar rel="apple-touch-icon". Ikon ini harus berukuran 180x180 piksel karena itu adalah ukuran saat ini yang direkomendasikan oleh Apple untuk iPhone dan iPad terbaru. Saya telah membaca Blackberry juga akan digunakan rel="apple-touch-icon-precomposed".

Sebagai catatan: Chrome untuk Android menyatakan:

Apple-touch-* sudah usang, dan hanya akan didukung untuk waktu yang singkat. (Ditulis sebagai beta untuk m31 Chrome).

Ubin Kustom untuk IE 11+ pada Windows 8.1+

IE 11+ pada Windows 8.1+ memang menawarkan cara untuk membuat ubin yang disematkan untuk situs Anda.

Microsoft merekomendasikan untuk membuat beberapa ubin dengan ukuran berikut:

Kecil: 128 x 128

Sedang: 270 x 270

Lebar: 558 x 270

Besar: 558 x 558

Ini harus berupa gambar transparan karena kita akan menentukan latar belakang warna selanjutnya.

Setelah gambar-gambar ini dibuat, Anda harus membuat file xml yang dipanggil browserconfig.xmldengan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Simpan file xml ini di root situs Anda. Ketika sebuah situs disematkan, IE akan mencari file ini. Jika Anda ingin memberi nama file xml sesuatu yang berbeda atau memilikinya di lokasi yang berbeda, tambahkan tag meta ini ke head:

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

Untuk informasi tambahan tentang ubin khusus IE 11+ dan menggunakan file XML, kunjungi situs web Microsoft .

Menyatukan semuanya:

Untuk menyatukan semuanya kode di atas akan terlihat seperti ini:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Ubin Windows Phone Live

Jika pengguna menggunakan Windows Phone, mereka dapat menyematkan situs web ke layar mulai ponsel mereka. Sayangnya, ketika mereka melakukan ini menampilkan screenshot dari ponsel Anda, bukan favicon (bahkan kode MS spesifik yang dirujuk di atas). Untuk membuat "Live Tile" untuk Pengguna Windows Phone untuk situs web Anda, seseorang harus menggunakan kode berikut:

Berikut adalah petunjuk terperinci dari Microsoft tetapi ini adalah sinopsisnya:

Langkah 1

Buat gambar persegi untuk situs web Anda, untuk mendukung layar resolusi tinggi, buat ukuran 768x768 piksel.

Langkah 2

Tambahkan hamparan tersembunyi dari gambar ini. Berikut ini contoh kode dari Microsoft:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
  <img src="customtile.png" width="320" height="320" />
  <div style='margin-top: 40px'>
     Add text/graphic asking user to pin to start using the menu...
  </div>
</div>

Langkah 3

Anda kemudian dapat menambahkan baris berikut untuk menambahkan pin untuk memulai tautan:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

Microsoft menganjurkan Anda mendeteksi windows phone dan hanya menunjukkan tautan itu ke pengguna tersebut karena itu tidak berfungsi untuk pengguna lain.

Langkah 4

Selanjutnya Anda menambahkan beberapa JS untuk mengaktifkan visibilitas overlay

<script>
function ToggleTileOverlay() {
 var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

Catatan tentang Ukuran

Saya menggunakan satu ukuran karena setiap browser akan menurunkan gambar sesuai kebutuhan. Saya bisa menambahkan lebih banyak HTML untuk menentukan beberapa ukuran jika diinginkan untuk mereka dengan bandwidth yang lebih rendah tetapi saya sudah mengompresi file PNG banyak menggunakan TinyPNG dan saya menemukan ini tidak perlu untuk keperluan saya. Juga, menurut jawaban philippe_b , Chrome dan Firefox memiliki bug yang menyebabkan peramban memuat semua ukuran ikon. Menggunakan satu ikon besar mungkin lebih baik daripada banyak ikon kecil karena ini.

Bacaan lebih lanjut

Bagi mereka yang ingin lebih detail, lihat tautan di bawah:

• Artikel Wikipedia tentang Favicon
• Ikon Handbook
• Memahami Favicon oleh Jonathan T. Neal
• rel = "ikon pintasan" dianggap berbahaya oleh Mathias Bynens
• Segala sesuatu yang Anda selalu ingin tahu tentang ikon sentuhan oleh Mathias Bynens

Tidak, tidak semua browser mendukung sizesatribut:

• Safari: Ya, ia memilih gambar yang paling cocok .
• Opera: Ya, itu memilih gambar yang paling cocok .
• IE11: Tidak yakin. Tampaknya mengambil gambar lebih besar yang ditemukannya , yang agak kasar tapi oke.
• Chrome: Tidak, lihat bug 112941 dan 324820 . Faktanya, Chrome cenderung memuat semua ikon yang dideklarasikan, tidak hanya yang terbaik / pertama / terakhir.
• Firefox: Tidak, lihat bug 751712 . Seperti Chrome, Firefox cenderung memuat semua ikon yang dideklarasikan.

Perhatikan bahwa beberapa platform menentukan ukuran spesifik:

• Android Chrome mengharapkan ikon 192x192 , tetapi mendukung ikon yang dideklarasikan manifest.jsonjika ada. Plus, Chrome menggunakan ikon Apple Touch untuk bookmark .
• Coast by Opera mengharapkan ikon 228x228 .
• Google TV mengharapkan ikon 96x96 .