Kami menggunakan kode berikut untuk menambahkan ikon untuk favicon, tablet, smartphone, ubin windows 8 dan sejenisnya: -
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="shortcut icon" type="image/x-icon" href="/webmasters//favicon.ico"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<meta name="msapplication-TileImage" content="apple-touch-icon-144x144-precomposed.png"/>
<meta name="msapplication-TileColor" content="#17151a"/>
Sayangnya ini sepertinya tidak bekerja untuk IE9 dan IE10 'layar situs paling populer' Anda, pencarian google telah mencerahkan.
Stack menggunakan <link rel="apple-touch-icon" href="apple-touch-icon.png">
yang tampaknya berhasil, tetapi tidak untuk kita.
Petunjuk apa pun untuk solusi dihargai.
internet-explorer
favicon
MJWadmin
sumber
sumber
Jawaban:
Di mana file ico Anda? Saya bisa melihatnya di folder root, maka Anda tidak perlu slash di belakangnya, hapus slash dari belakang file Anda, juga Anda tidak perlu
type="image/x-icon"
File ICO Anda harus menjadi perpustakaan ikon normal dengan ukuran ikon yang diperlukan berbeda.
Cukup gunakan kode di atas, ini berfungsi dengan baik untuk IE9, IE10, FX dan Chrome.
Jika sebelumnya Anda memiliki favico yang berbeda, Anda juga perlu menyegarkan cache browser Anda .
sumber
Apa dimensi favicon Anda? Periksa daftar ini untuk memastikan mereka termasuk dalam pedoman ini:
Menyesuaikan Ikon Situs - Ikon Situs di Internet Explorer 9
Edit
Melihat kode sumber Stackoverflow, saya melihat 2 gambar ikon:
DAN
Ketika saya melihat stackoverflow saya di tab favorit saya di IE9, sepertinya menggunakan 16x16 favicon (dan menempatkannya dalam wadah 32x32), bukan ikon apple touch stackoverflow 158x158 seperti yang Anda sarankan karena jika Anda melihat png, Rasio jarak "padding" dari sisi vs bawah adalah sekitar 2,5: 1 sedangkan rasio 1: 1 di favicon, sama dengan padding 1: 1 pada tab IE9 ...
Saya dapat memberitahu Anda favicon perusahaan saya memuat di IE9 favorit, dan 64x64 (tidak ada transparansi, ukuran 12.5kb). Jika Anda masih tidak dapat menampilkan favicon Anda, poskan tautan sehingga kami dapat memeriksa file gambar yang sebenarnya
sumber
Cobalah seperti yang disarankan Omne dan hapus atribut type Anda atau tambahkan atribut kedua dengan image / vnd.microsoft.icon sebagai nilai. Dan kemudian pastikan server Anda mengirim tipe mime untuk file dot ico. Lihat ini:
https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee
Beberapa Backstory
Dulu, atau lebih tepatnya telah diperdebatkan tentang apa jenis mime yang benar untuk ikon.
Dunia Microsoft dulu dan mungkin masih mengandalkan "image / vnd.microsoft.icon" di mana sebagai bagian dari dunia menggunakan "image / x-icon" secara tidak resmi (resmi) lol.
Dari wikipedia Format ICO :
Belum Dari dari wikipedia untuk Favicon
sumber