Gostaria de usar uma única imagem como favicon comum e favicon amigável para iPhone / iPad.
Isso é possível? Um PNG de 72x72 compatível com iPad seria dimensionado se vinculado como um favicon normal do navegador? Ou preciso usar uma imagem 16x16 ou 32x32 separada?
Respostas:
Para o IE, a Microsoft recomenda 16x16, 32x32 e 48x48 compactados no arquivo favicon.ico .
Para iOS, a Apple recomenda nomes e resoluções de arquivos específicos , no máximo 180x180, para os dispositivos mais recentes com iOS 8.
O Android Chrome usa principalmente um manifesto e também conta com o ícone de toque da Apple.
O IE 10 no Windows 8.0 requer imagens PNG e uma cor de fundo e o IE 11 no Windows 8.1 e 10 aceita várias imagens PNG declaradas em um arquivo XML dedicado chamadobrowserconfig.xml .
Safari para Mac OS X El Capitan apresenta um ícone SVG para abas fixadas .
Algumas outras plataformas procuram arquivos PNG com várias resoluções, como a imagem 96x96 para o Google TV ou a imagem 228x228 da Opera Coast .
Veja esta lista de imagens favicon para uma referência completa.
TLDR: este gerador de ícones favoritos pode gerar todos esses arquivos de uma só vez. O gerador também pode ser implementado como um plugin do WordPress . Divulgação completa: Eu sou o autor deste site.
Não vejo nenhuma informação atualizada listada aqui, então aqui vai:
Para responder a essa pergunta agora, dois favicons não farão isso se você quiser que seu ícone fique ótimo em todos os lugares. Veja os tamanhos abaixo:
16 x 16 - tamanho padrão para navegadores
24 x 24 - tamanho do site fixado no IE9 para a interface do usuário
32 x 32 - guia Nova página do IE, botão da barra de tarefas do Windows 7+, barra lateral da lista de leitura do Safari
48 x 48 - site do Windows
57 x 57 - iPod touch , iPhone até 3G
60 x 60 - iPhone até iOS7
64 x 64 - site Windows, barra lateral Safari List em HiDPI / Retina
70 x 70 - Win 8.1 Metro tile
72 x 72 - iPad touch até iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - Retina do iPhone para iOS6
120 x 120 - Retina para iPhone iOS7
128 x 128 - Chrome Web Store app, Android
144 x 144 - Bloco IE10 Metro para site fixo, retina do iPad até iOS6
150 x 150 - bloco de metrô Win 8.1
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - bloco Metro largo de 8,1 Win
310 x 310 - bloco Metro de Win 8.1
Não sei se / como os navegadores dimensionam ícones grandes, mas o W3C sugere o seguinte 1 :
O formato da imagem escolhida deve ser 16x16 pixels ou 32x32 pixels, usando cores de 8 ou 24 bits. O formato da imagem deve ser PNG (padrão W3C), GIF ou ICO.
1 w3c.org: Como adicionar um Favicon ao seu site (Rascunho em desenvolvimento) .
[current year]eu ainda preciso lidar com algumas limitações de besteira, quando as coisas que você pode fazer apenas com o CSS é incrível o suficiente, e eu quase perdi sua resposta. Vou usar o que eu quiser e, se algo não suportar, é problema deles, conforme o padrão.
Na verdade, para fazer seu favicon funcionar corretamente em todos os navegadores, você deverá adicionar mais de 10 arquivos nos tamanhos e formatos corretos.
Meu amigo e eu criamos um aplicativo apenas para isso! você pode encontrá-lo em faviconit.com
Fizemos isso, para que as pessoas não precisem criar todas essas imagens e as tags corretas manualmente, crie todas elas usadas para me irritar muito!
Você pode ter vários tamanhos de ícones no mesmo arquivo. Eu costumo criar favicons ( .icoarquivo) com 48, 32 e 16 pixels. Você pode adicionar qualquer tamanho de imagem que desejar. A questão é: o iPhone usará um icoarquivo?
icotambém suporta transparência, mas não tenho certeza se é um canal alfa como PNG; provavelmente mais como GIF onde está ligado ou desligado.
.icoarquivo.
De acordo com o artigo da Wikipedia sobre Favicon, o Internet Explorer suporta apenas o formato ICO para favicons.
Eu ficaria com dois ícones diferentes.
O favicon não precisa ser 16x16 ou 32x32. Você pode criar um favicon de 80x80 ou 100x100, verifique se os dois valores têm o mesmo tamanho e, obviamente, não o tornam muito grande ou muito pequeno, escolha um tamanho razoável.
Você precisará de arquivos separados para cada resolução, receio. Há um artigo realmente bom no monitor de campanha que descreve como eles criaram e implementaram seus ícones para cada dispositivo iOS:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
Como aprendi, nenhuma dessas várias soluções é perfeita. Usar um gerador de favicon é realmente uma boa solução, mas o número deles é esmagador e difícil de escolher. Gostaria de acrescentar que, se você deseja que seu site seja habilitado para PWA, também é necessário fornecer um ícone de 512x512, conforme declarado pelo Google Devs :
ícones incluindo uma versão 192px e 512px
Eu não conheci muitos geradores de favicon aplicando esse critério (o firebase atende , mas há muitas coisas que ele não faz). Portanto, a solução deve ser uma mistura de muitas outras soluções.
Não sei, hoje, no início de 2020, se o fornecimento de 16x16, 32x32 ainda é relevante. Eu acho que ainda importa em determinado contexto, como, por exemplo, se seus usuários ainda usam o IE por algum motivo (isso ainda acontece em algumas empresas privadas que não migram para um navegador mais recente por alguns motivos)