Ekran Twoich najpopularniejszych witryn w IE 10 - Ikony nie są wyświetlane

Używamy następującego kodu, aby dodać ikony favicon, tabletów, smartfonów, kafelków Windows 8 i tym podobnych: -

<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"/>

Niestety wydaje się, że to nie działa w przypadku IE9 i IE10 ekranu „najpopularniejszych witryn”, wyszukiwania w Google nie są pouczające.

Zastosowania stosu, <link rel="apple-touch-icon" href="apple-touch-icon.png">które wydają się działać dla niego, ale nie dla nas.

Doceniamy wszelkie wskazówki dotyczące rozwiązania.

wprowadź opis zdjęcia tutaj

internet-explorer favicon

— MJWadmin
źródło

Czy zawodzi tylko na tym ekranie? na przykład. Czy ikona jest ładowana przez kartę przeglądarki podczas normalnego odwiedzania? To by ostatecznie niczego nie udowodniło, ale byłoby trochę pouczające. W przeciwnym razie wydajesz się, że dość dokładnie opisałeś sytuację favicon. Nie jestem pewien, czy martwiłbym się tym zbyt mocno. Przeglądarki od dawna notują błędy w ładowaniu ulubionych ikon. Czy to się dzieje także dla wszystkich?

— Su '

Żadna z ikon nie ma 404'ów, a favicon działa w innych przeglądarkach, podobnie jak ikony dotykowe. Jest to jedna z tych bardzo irytujących kwestii „zawiadomień przewodniczącego”. Po spędzeniu nad nim rano ciekawość i frustracja mnie pokonały.

— MJWadmin,

Czy wypróbowałeś rzeczywisty obraz PNG, którego używa stos? W przypadku jakiejś anomalii z samym formatem PNG?

— MrWhite

Inne przeglądarki nie są tu istotne; Miałem na myśli, czy ikona ładuje się na zwykłych kartach IE. Brak 404 też nic ci nie powie. Nie ma to nic wspólnego z tym, czy obraz naprawdę tam jest. Przeglądarki są po prostu kapryśne w kwestii ładowania ulubionych, kropka; gdy staje się to problemem, często niewiele można zrobić (wyczyszczenie pamięci podręcznej i wszystko, co możesz pomyśleć: może działać, może nie; to będzie niespodzianka!) Z czasem zrobiły się lepsze, ale to wciąż się dzieje. Firefox po prostu nie załadował favicon na zakładce dla strony już otwartej w innej zakładce, z ikoną.

— Su '

Czy możesz zamieścić link do strony w komentarzach?

Odpowiedzi:

Gdzie jest twój plik ico? Widzę, że jest w folderze głównym, więc nie potrzebujesz ukośnika za nim, usuń ukośnik zza pliku, a także nie potrzebujesztype="image/x-icon"

Twój plik ICO powinien być zwykłą biblioteką ikon o różnych potrzebnych rozmiarach ikon.

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

Wystarczy użyć powyższego kodu, działa idealnie dla IE9, IE10, FX i Chrome.

Jeśli miałeś wcześniej inny favico, musisz także odświeżyć pamięć podręczną przeglądarki .

— Omne
źródło

zakładając, że plik faktycznie znajduje się w folderze głównym, problemem jest z pewnością plik, a nie znacznik HTML, jak pokazano (chyba że w dalszej części znajdują się inne błędy HTML, które powodują problemy z IE). Mój tag łącza favicon jest napisany tak jak @MJWadmin, a moja ikona ładuje się dobrze w ulubionych kartach IE9

— WebChemist

Jakie są wymiary Twojego favicon? Sprawdź tę listę, aby upewnić się, że spełniają one następujące wytyczne:

Dostosowywanie ikony witryny - ikony witryny w programie Internet Explorer 9

Edytować

Patrząc na kod źródłowy Stackoverflow, widzę 2 obrazy ikon:

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

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

Kiedy patrzę na mój stackoverflow na mojej karcie ulubionych w IE9, wygląda na to, że używa favicon 16x16 (i centruje go w pojemniku 32x32), a nie ikonę dotyku apple flowover 158x158, jak sugerowałeś, ponieważ jeśli spojrzysz na png, Stosunek odległości „padding” z boku do dołu wynosi około 2,5: 1, gdzie jako favicon 1: 1, tak samo jak padding 1: 1 na zakładce IE9 ...

Mogę powiedzieć, że mój ulubiony pracodawca ładuje się w ulubionych IE9 i jego 64x64 (bez przezroczystości, rozmiar 12,5kb). Jeśli nadal nie możesz wyświetlić swojego favicon, opublikuj link, abyśmy mogli sprawdzić rzeczywisty plik obrazu

— WebChemist
źródło

-1

Spróbuj tak jak sugeruje Omne i usuń atrybut type lub dodaj drugi z wartością image / vnd.microsoft.icon. A następnie upewnij się, że Twój serwer wysyła typ MIME dla plików dot ico. Zobacz:

https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

Trochę historii

Kiedyś było, a raczej dyskutowano o tym, jaki jest właściwy typ mime dla ikon.

Świat Microsoft kiedyś i prawdopodobnie nadal opiera się na „image / vnd.microsoft.icon”, gdzie podobnie jak reszta świata używa „image / x-icon” nieoficjalnie (oficjalnie) lol.

Z wikipedii Format ICO :

Oficjalny typ MIME zarejestrowany przez IANA dla plików ICO to image / vnd.microsoft.icon, zarejestrowany w 2003 roku. Błędne etykiety „image / ico”, „image / icon”, „text / ico” i „application / ico”, wraz o nieoficjalnej nazwie „image / x-icon” były używane w momencie oficjalnej rejestracji i przypisania typu MIME.

jeszcze Z wikipedii dla Favicon

W 2003 r. Format .ico został zarejestrowany przez Internet Assorted Numbers Authority (IANA) w ramach typu MIME image / vnd.microsoft.icon. [12] Podczas korzystania z formatu .ico program Internet Explorer nie może wyświetlać plików obsługiwanych ze standardowym typem MIME. Obejściem dla Internet Explorera jest powiązanie .ico z niestandardowym typem MIME image / x-icon na serwerach WWW.

— Anthony Hatzopoulos
źródło