HTML 5 Favicon - Dukungan?


170

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.


1
Sesuatu tampak aneh dalam kode di atas - apakah html5 mengizinkan tidak mengutip nilai atribut? Jawaban - stackoverflow.com/questions/6495310/...
jakubiszon

Jawaban:


330

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:


1
Ikon ukuran mana (untuk aplikasi web bookmark saya) yang saya perlukan untuk Apple? 320x460, 640x920, 640x1096, 72x72, 114x114, 144x144, 768x1004, 1024x748 ? Dan untuk Android?
Kiquenet

@Kiquenet Untuk web saya menggunakan 180x180 untuk Apple dan 196x196 untuk Android (dan perangkat lain juga, kecuali IE 10 dan di bawah.)
L84


Dari semua cara saya menambahkan ikon ikon pertanyaan dan jawaban, yang satu ini harus menjadi favorit saya karena sangat informatif dan yang terpenting - KARYA ITU! Terima kasih sobat! Menggunakan format .PNG benar-benar menyelamatkan saya!
twknab

16

Tidak, tidak semua browser mendukung sizesatribut:

Perhatikan bahwa beberapa platform menentukan ukuran spesifik:


1
...yet it favors the Apple Touch icon if it finds it.Tidak yakin ini sepenuhnya benar lagi, setidaknya tidak di masa depan. Dari situs web Chrome:The apple-touch-* are deprecated, and will be supported only for a short time. (Written as of beta for m31 of Chrome).
L84

2
Yap, tetapi sekarang Android Chrome 35 mengambil ikon Apple touch 152x152 dan mengabaikan ikon PNG 196x196 (saya menggunakan tes kompatibilitas: realfavicongenerator.net/favicon_compatibility_test ). Saya tidak tahu kapan Google akan beralih, tetapi saya duga itu tidak akan terjadi dalam waktu dekat. Yah, itu hanya dugaan.
philippe_b

Menurut developer.apple.com/library/safari/documentation/UserExperience/... ukuran untuk Apple ( ikon klip Web ) adalah 76x76, 120x120, 152x152, 167x167, 180x180
Kiquenet

Menurut developer.chrome.com/multidevice/android/installtohomescreen , ukuran untuk Android adalah 36x36, 48x48, 72x72, 96x96, 144x144, 192x192 , mungkin juga 128x128
Kiquenet
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.