Layar Situs Paling Populer Anda di IE 10 - Ikon tidak muncul


11

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.

masukkan deskripsi gambar di sini


1
Apakah gagal hanya di layar ini? misalnya. Apakah ikon dimuat oleh tab browser ketika mengunjungi secara normal? Itu tidak akan membuktikan apa pun secara definitif, tetapi itu akan sedikit informatif. Jika tidak, Anda tampaknya telah membahas situasi favicon dengan cukup teliti. Saya tidak yakin saya terlalu khawatir tentang ini. Peramban telah terkenal rapuh tentang memuat favicon secara umum sejak lama. Juga, apakah itu terjadi untuk semua orang?
Su '

Tak satu pun dari ikon itu yang aktif, dan favicon berfungsi di peramban lain, seperti halnya ikon sentuh. Ini adalah salah satu masalah 'pemberitahuan ketua' yang sangat mengganggu. Setelah menghabiskan pagi itu, rasa ingin tahu dan frustrasi membuat saya lebih baik.
MJWadmin

3
Sudahkah Anda mencoba gambar PNG aktual yang digunakan tumpukan? Jika ada beberapa anomali dengan format PNG itu sendiri?
MrWhite

1
Browser lain tidak relevan di sini; Maksud saya apakah ikon memuat dalam tab IE biasa. Kurangnya 404 tidak akan memberi tahu Anda apa pun. Ini tidak ada hubungannya dengan apakah gambar itu benar-benar ada atau tidak. Browser umumnya hanya berubah-ubah tentang memuat favicons, titik; ketika itu membuat dirinya menjadi masalah, sering kali ada sedikit yang bisa dilakukan (membersihkan cache, dan hal lain yang mungkin Anda pikirkan: mungkin berhasil, mungkin tidak; itu akan mengejutkan!) itu masih terjadi. Firefox baru saja gagal memuat favicon di tab untuk situs yang sudah terbuka di tab lain , dengan ikon.
Su '

1
Bisakah Anda memposting tautan ke situs web di komentar?

Jawaban:


1

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 perlutype="image/x-icon"

File ICO Anda harus menjadi perpustakaan ikon normal dengan ukuran ikon yang diperlukan berbeda.

<link rel="shortcut icon" href="favicon.ico"/>

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 .


dengan asumsi file tersebut sebenarnya ada di folder root, masalahnya pasti file tersebut, bukan tag html seperti yang ditunjukkan (kecuali ada kesalahan html lain di bawah yang menyebabkan masalah IE). Tag tautan favicon saya ditulis seperti @MJWadmin dan ikon saya dimuat dengan baik di tab favorit IE9
WebChemist

0

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:

<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

DAN

<link rel="apple-touch-icon" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">

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


-1

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 :

Jenis MIME resmi yang terdaftar IANA untuk file ICO adalah image / vnd.microsoft.icon, terdaftar pada tahun 2003. Label yang keliru "image / ico", "image / icon", "text / ico" dan "application / ico", bersama dengan nama tidak resmi "image / x-icon" digunakan pada saat registrasi resmi dan penugasan tipe MIME.

Belum Dari dari wikipedia untuk Favicon

Pada tahun 2003, format .ico terdaftar di Internet Assigned Numbers Authority (IANA) di bawah tipe gambar MIME / vnd.microsoft.icon. [12] Saat menggunakan format .ico, Internet Explorer tidak dapat menampilkan file yang disajikan dengan tipe MIME standar. Solusi untuk Internet Explorer adalah mengaitkan .ico dengan tipe MIME gambar / x-ikon non-standar di server Web.

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.