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: