Écran de vos sites les plus populaires dans IE 10 - Les icônes n'apparaissent pas

Nous utilisons le code suivant pour ajouter des icônes pour les favicon, les tablettes, les smartphones, les tuiles Windows 8 et similaires: -

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

Malheureusement, cela ne semble pas fonctionner pour IE9 et IE10, l'écran de vos sites les plus populaires, les recherches sur Google n'ont pas été éclairantes.

Stack utilise <link rel="apple-touch-icon" href="apple-touch-icon.png">ce qui semble fonctionner pour lui, mais pas pour nous.

Tous les indices d'une solution sont appréciés.

entrez la description de l'image ici

internet-explorer favicon MJWadmin
la source

Faut-il échouer uniquement sur cet écran? par exemple. L'icône est-elle chargée par l'onglet du navigateur lors d'une visite normale? Cela ne prouverait définitivement rien, mais ce serait un peu informatif. Sinon, vous semblez avoir couvert la situation du favicon de manière assez approfondie. Je ne suis pas sûr que je m'en soucierais trop. Les navigateurs ont été notoirement instables sur le chargement de favicons en général depuis des siècles. Cela arrive-t-il également à tout le monde?

Aucune des icônes ne fonctionne 404, et le favicon fonctionne dans d'autres navigateurs, tout comme les icônes tactiles. C'est l'un de ces problèmes très ennuyeux «les avis du président». Après y avoir passé la matinée, la curiosité et la frustration ont pris le dessus sur moi.

MJWadmin

Avez-vous essayé l'image PNG réelle que la pile utilise? En cas d'anomalie avec le format PNG lui-même?

MrWhite

Les autres navigateurs ne sont pas pertinents ici; Je voulais dire que l'icône se charge dans les onglets IE standard. Le manque de 404 ne vous dira rien non plus. Cela n'a rien à voir avec la présence ou non de l'image. Les navigateurs sont généralement inconstants quant au chargement des favicons, point final; quand il se pose un problème, il y a souvent peu de choses à faire (vider le cache, et tout ce à quoi vous pourriez penser: pourrait fonctionner, peut-être pas; ce sera une surprise!) ça arrive encore. Firefox vient d'échouer lors du chargement d'un favicon dans un onglet pour un site déjà ouvert dans un autre onglet, avec icône.

Pourriez-vous publier un lien vers le site Web dans les commentaires?

Réponses:

Où est votre fichier ico? Je peux voir qu'il est dans le dossier racine, alors vous n'avez pas besoin de la barre oblique derrière, supprimez la barre oblique derrière votre fichier, vous n'avez pas non plus besointype="image/x-icon"

Votre fichier ICO doit être une bibliothèque d'icônes normale avec différentes tailles d'icônes nécessaires.

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

Utilisez simplement le code ci-dessus, il fonctionne parfaitement pour IE9, IE10, FX et Chrome.

Si vous aviez auparavant un favico différent, vous devez également actualiser le cache de votre navigateur .

Omne
la source

en supposant que le fichier se trouve réellement dans le dossier racine, le problème est sûrement le fichier, pas la balise html comme indiqué (sauf s'il y a d'autres erreurs html plus bas qui causent des problèmes IE). Ma balise de lien favicon est écrite comme @MJWadmin et mon icône se charge bien dans les onglets préférés d'IE9

WebChemist

Quelles sont les dimensions de votre favicon? Vérifiez cette liste pour vous assurer qu'ils respectent ces directives:

Personnalisation de l'icône du site - Icônes du site dans Internet Explorer 9

Éditer

En regardant le code source de Stackoverflow, je vois 2 images d'icônes:

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

Lorsque je regarde mon stackoverflow dans mon onglet favoris dans IE9, il ressemble à son utilisation du favicon 16x16 (et en le centrant dans un conteneur 32x32), pas l'icône 158x158 stackoverflow apple touch comme vous l'avez suggéré car si vous regardez le png, le le rapport de distance "rembourrage" du côté par rapport au bas est d'environ 2,5: 1 alors que son 1: 1 dans le favicon, identique au rembourrage 1: 1 de l'onglet IE9 ...

Je peux vous dire que le favicon de mon employeur se charge dans les favoris IE9 et son 64x64 (pas de transparence, taille 12,5kb). Si vous ne parvenez toujours pas à afficher votre favicon, publiez un lien afin que nous puissions consulter le fichier image réel

WebChemist
la source

-1

Essayez comme Omne le suggère et supprimez votre attribut de type ou ajoutez-en un deuxième avec image / vnd.microsoft.icon comme valeur. Et assurez-vous ensuite que votre serveur envoie le type MIME pour les fichiers point ico. Regarde ça:

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

Un peu d'histoire

C'était le cas, ou plutôt on a discuté du type de mime correct pour les icônes.

Microsoft World utilisait et s'appuie probablement toujours sur "image / vnd.microsoft.icon" où, comme le reste du monde, utilise "image / x-icon" officieusement (officiellement) lol.

De wikipedia Format ICO :

Le type MIME enregistré par l'IANA pour les fichiers ICO est image / vnd.microsoft.icon, enregistré en 2003. Étiquettes erronées "image / ico", "image / icon", "text / ico" et "application / ico", avec portant le nom non officiel "image / x-icon" étaient en usage au moment de l'enregistrement officiel et de l'attribution du type MIME.

encore De wikipedia pour Favicon

En 2003, le format .ico a été enregistré auprès de l'Internet Assigned Numbers Authority (IANA) sous le type MIME image / vnd.microsoft.icon. [12] Lorsque vous utilisez le format .ico, Internet Explorer ne peut pas afficher les fichiers servis avec le type MIME standardisé. Une solution de contournement pour Internet Explorer consiste à associer .ico au type MIME d'image / x-icon non standard dans les serveurs Web.

Anthony Hatzopoulos
la source