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.
internet-explorer
favicon
MJWadmin
fonte
fonte
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 precisa
type="image/x-icon"
Seu arquivo ICO deve ser uma biblioteca de ícones normal com diferentes tamanhos de ícones necessários.
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 .
fonte
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:
E
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
fonte
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 :
ainda De from wikipedia for Favicon
fonte