Um favicon precisa ser 32x32 ou 16x16?

692

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?

Alex G
fonte
veja minha resposta stackoverflow.com/a/45301651/661584 muito mais fácil. pode ajudar. obrigado #
25717

Respostas:

1448

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.

philippe_b
fonte
136

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

Matt
fonte
8
Existe alguma referência para esta lista?
Abdulhameed
81

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) .

Daniel Vassallo
fonte
Em 2006, cheguei a conclusões semelhantes (em "Favicon Primer" (abril de 2006; por hakre) ), mas não sabia sobre o material W3C de 2005 (sim, seraching + leitura ajuda :)). Obrigado pelo resumo. Naquela época, eu escrevi e não ou mas isso também era sobre cores de 4 bits.
hakre
2
Foi um rascunho desde 2005? Oo
mcont 22/08
7
Esse uso deve ser substituído pelo padrão html5 agora. Ele não tem limitação no tamanho do ícone e forneceu um exemplo com um ícone 32768x32768.
Rhd #
1
@rhgb Obrigado! Eu estive olhando confuso por que diabos [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.
Sahsahae 28/11/19
63

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!

PedroHCan
fonte
6

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.

Brad
fonte
1
Acredito que o XP e o suporte a um formato PNG (PNG propriamente dito?) Para imagens RGBA. egressive.com/tutorial/… mostra como você pode usar o GIMP para incluir essas imagens em um .icoarquivo.
SamB 17/02/11
1
A ICO usa um canal alfa de 1 bit, enquanto o PNG tem 8 bits, como nos outros canais. A ICO será suficiente para ícones simples, mas em alguns casos o PNG será mais desejável por causa dessa diferença.
Steen Schütt
SamB está quase certo e Time Sheep está meio certo. O ICO suporta imagens PNG para serem incorporadas e os PNGs incorporados devem ser imagens RGBA de 32 bits.
precisa
2

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.

Pekka
fonte
2

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.

Trevor
fonte
3
Desculpe, mas há muito mais do que a sua resposta sugere. Por favor, veja stackoverflow.com/a/45301651/661584 e leia se você quiser - é um complexo maluco. pode ajudar. obrigado #
25717
1

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/

Richard
fonte
2
você pode ter vários tamanhos de ícones no mesmo arquivo.
Brad
Muito obrigado, esse é um excelente artigo. Ainda é um mistério o que os dispositivos Apple fariam com arquivos ico que têm várias imagens de tamanho neles.
Alex G
1

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)

snoob dogg
fonte