Tamanhos de Favicon: Todas as Dimensões que Você Realmente Precisa
Os tamanhos de favicon que você precisa são 16x16 e 32x32 PNG para abas e favoritos do navegador, 180x180 para o apple-touch-icon do iOS, e 192x192 mais 512x512 PNG para telas iniciais do Android e instalação de PWA. Um favicon.ico contendo entradas de 16, 32 e 48 pixels cobre qualquer coisa que solicite /favicon.ico diretamente. Todo outro tamanho é opcional, e a maioria dos sites não entrega nenhum deles.
Por que mais de um tamanho
A aba de um navegador pede um ícone de cerca de 16 a 32 pixels de largura. Uma tela inicial do Android pede 192. Uma tela de abertura de PWA pede 512. Não é a mesma imagem redimensionada. A 16 pixels, uma marca tem cerca de 256 pixels para trabalhar, e qualquer coisa que sobreviva ali precisa ser bem mais simples do que o que parece certo a 512.
Quando você declara vários tamanhos, o navegador escolhe o mais próximo e redimensiona a partir dele. Declarar apenas um ícone grande significa que toda superfície pequena o reduz, e é daí que vem a mancha cinza na aba. Declarar apenas um pequeno significa que toda superfície grande o amplia, e é daí que vem o ícone borrado na tela inicial.
Tamanhos essenciais de favicon
| Tamanho | Usado para | Prioridade |
|---|---|---|
| 16x16 | Barra de endereços, navegadores antigos, favoritos | Essencial |
| 32x32 | Abas do navegador, navegadores modernos | Essencial |
| 96x96 | Atalhos da área de trabalho, blocos do Windows | Opcional |
| 192x192 | Tela inicial do Android, ícones de PWA | Essencial |
| 512x512 | Telas de abertura, ícones de alta resolução | Essencial |
Como esses números realmente ficam
Tamanhos do apple touch icon
| Tamanho | Dispositivo |
|---|---|
| 57x57 | iPhone (sem retina) |
| 60x60 | iPhone (retina) |
| 72x72 | iPad (sem retina) |
| 76x76 | iPad (retina) |
| 114x114 | iPhone (retina) |
| 120x120 | iPhone (retina HD) |
| 144x144 | iPad (retina) |
| 152x152 | iPad (retina HD) |
| 180x180 | iPhone (retina HD) principal |
Onde os arquivos vão
- public/
- favicon.ico16, 32 and 48 in one file
- favicon-16x16.pngAddress bar
- favicon-32x32.pngBrowser tabs
- favicon-96x96.pngDesktop shortcuts
- apple-touch-icon.png180x180, iOS home screen
- icon-192.pngAndroid home screen
- icon-512.pngPWA splash screen
- manifest.jsonLists the PWA icons
Espalhados na raiz de public é a convenção porque vários deles também são solicitados por caminho, sem nenhuma tag de link envolvida.
Perguntas frequentes sobre tamanhos de favicon
Qual é o conjunto mínimo de tamanhos de favicon?
Um favicon.ico contendo 16 e 32, um apple-touch-icon.png de 180x180 e PNGs de 192x192 e 512x512 listados no seu web app manifest. Isso cobre navegadores de desktop, telas iniciais do iOS, Android e instalação de PWA com cinco arquivos.
Ainda preciso de 57x57 e 72x72 para iOS?
Apenas se você der suporte a iPhones e iPads muito antigos. O iOS atual usa o apple-touch-icon de 180x180 e o reduz onde precisa de algo menor, então um único 180 é suficiente para quase todos os sites.
Um favicon maior deixa a página mais lenta?
Não de forma significativa. Ícones são PNGs pequenos medidos em poucos kilobytes e os navegadores solicitam apenas o tamanho que precisam, além de serem armazenados em cache de forma agressiva. Entregar um 512 que você nunca usa custa menos do que um ícone de tela inicial borrado.