A tela Sites mais populares do IE 10 - Os ícones não aparecem

Usamos o código a seguir para adicionar ícones para favicon, tablets, smartphones, blocos do Windows 8 e similares: -

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

Infelizmente, isso não parece funcionar para a "tela de sites mais populares do IE9 e IE10"; as pesquisas no Google são pouco esclarecedoras.

Stack usa o <link rel="apple-touch-icon" href="apple-touch-icon.png">que parece funcionar para ele, mas não para nós.

Todas as pistas para uma solução são bem-vindas.

insira a descrição da imagem aqui

internet-explorer favicon

— MJWadmin
fonte

Está falhando apenas nesta tela? por exemplo. O ícone é carregado pela guia do navegador ao visitar normalmente? Isso definitivamente não provaria nada, mas seria um pouco informativo. Caso contrário, você parece ter coberto a situação do favicon completamente. Não tenho certeza se me preocuparia muito com isso. Os navegadores têm sido notoriamente esquisitos em carregar favicons em geral há séculos. Além disso, isso acontece para todos?

— Su

Nenhum dos ícones tem 404'e o favicon funciona em outros navegadores, assim como os ícones de toque. Essa é uma daquelas questões muito irritantes do tipo 'o presidente observa'. Depois de passar a manhã nisso, a curiosidade e a frustração me venceram.

— MJWadmin 09/09/12

Você já tentou a imagem PNG real que a pilha usa? Caso haja alguma anomalia no próprio formato PNG?

— MrWhite 9/09/12

Outros navegadores não são relevantes aqui; Eu quis dizer que o ícone carrega nas guias regulares do IE. A falta de 404 também não diz nada. Não tem nada a ver se a imagem está ou não realmente presente. Os navegadores geralmente são inconstantes quanto ao carregamento de favoritos, ponto final; quando se torna um problema, muitas vezes há pouco que pode ser feito (limpar o cache e qualquer outra coisa que você possa pensar: pode funcionar, pode não funcionar; será uma surpresa!) Eles melhoraram com o tempo, mas isso ainda acontece. O Firefox apenas falhou ao carregar um favicon em uma guia de um site já aberto em outra guia, com o ícone.

— Su

Você poderia postar um link para o site nos comentários?

Respostas:

Onde está o seu arquivo ico? Eu posso ver que está na pasta raiz, então você não precisa da barra por trás, remova a barra por trás do arquivo, também não precisatype="image/x-icon"

Seu arquivo ICO deve ser uma biblioteca de ícones normal com diferentes tamanhos de ícones necessários.

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

Basta usar o código acima, ele funciona perfeitamente para IE9, IE10, FX e Chrome.

Se você já teve um favico diferente antes, também precisa atualizar o cache do seu navegador .

— Omne
fonte

supondo que o arquivo esteja realmente na pasta raiz, o problema certamente é o arquivo, não a tag html, como mostrado (a menos que haja outros erros html mais abaixo que causem problemas no IE). Meu tag link favicon é escrito como @MJWadmin e meu ícone de cargas multa no IE9 guias favoritos

— WebChemist

Quais são as dimensões do seu favicon? Verifique esta lista para garantir que eles se enquadram nestas diretrizes:

Personalizando o ícone do site - Ícones do site no Internet Explorer 9

Editar

Olhando para o código fonte do Stackoverflow, vejo 2 imagens de ícones:

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

Quando olho para o meu stackoverflow na guia Favoritos no IE9, ele parece estar usando o favicon 16x16 (e centralizando-o em um contêiner 32x32), não o ícone apple touch 158x158 stackoverflow como você sugeriu, porque se você olhar para o png, o a proporção de distância "padding" do lado versus o fundo é de cerca de 2,5: 1, onde, como seu 1: 1 no favicon, é igual ao preenchimento de 1: 1 na guia IE9 ...

Posso dizer que o favicon do meu empregador carrega nos favoritos do IE9 e seus 64x64 (sem transparência, tamanho 12,5kb). Se você ainda não consegue exibir seu favicon, poste um link para que possamos verificar o arquivo de imagem real

— WebChemist
fonte

-1

Tente como Omne sugere e remova seu atributo type ou adicione um segundo com image / vnd.microsoft.icon como um valor. E verifique se o servidor está enviando o tipo MIME para arquivos dot ico. Veja isso:

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

Alguma história de fundo

Costumava ser, ou melhor, foi discutido sobre qual é o tipo correto de mime para ícones.

O mundo da Microsoft costumava e provavelmente ainda conta com "image / vnd.microsoft.icon", onde o resto do mundo usa "image / x-icon" de forma não oficial (oficialmente) lol.

Da wikipedia Formato ICO :

O tipo MIME oficial registrado pela IANA para arquivos ICO é image / vnd.microsoft.icon, registrado em 2003. Rótulos incorretos "image / ico", "image / icon", "text / ico" e "application / ico", junto com o nome não oficial "image / x-icon" estavam em uso no momento do registro oficial e da atribuição do tipo MIME.

ainda De from wikipedia for Favicon

Em 2003, o formato .ico foi registrado na IANA (Internet Assigned Numbers Authority) sob o tipo MIME image / vnd.microsoft.icon. [12] Ao usar o formato .ico, o Internet Explorer não pode exibir arquivos servidos com o tipo MIME padronizado. Uma solução alternativa para o Internet Explorer é associar .ico ao tipo MIME não padrão de imagem / x-ícone em servidores Web.

— Anthony Hatzopoulos
fonte