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