Uma Breve História do Favicon
O favicon (abreviação de "ícone favorito") foi introduzido pelo Internet Explorer 5 em 1999 como um arquivo ICO 16×16 exibido na barra de endereço. O W3C padronizou-o em 2000 usando o elemento HTML .
Nas duas décadas seguintes, o requisito expandiu-se dramaticamente:
- 2007: A Apple introduziu o ícone Apple Touch (57×57 PNG) para favoritos do iOS
- 2010: Android Chrome adicionou suporte para aplicativos da web ícones
- 2012: O Windows 8 introduziu ícones de bloco para aplicativos Metro fixados
- 2019: favicons SVG ganharam suporte ao navegador, permitindo favicons independentes de resolução e compatíveis com modo escuro
- 2023: Requisitos de instalação de PWA padronizados em 192×192 e 512×512
Todos os tamanhos de favicon obrigatórios em 2026
| Arquivo | Tamanho | Finalidade |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 (multirresolução) | Guia navegador, IE/legado substituto |
| favicon-16x16.png | 16×16 | Navegador pequeno guia |
| favicon-32x32.png | 32×32 | Guia do navegador, navegador barra de ferramentas |
| apple-touch-icon.png | 180×180 | iOS/macOS Safari favoritos e página inicial tela |
| android-chrome-192x192.png | 192×192 | Página inicial do Android Chrome tela |
| android-chrome-512x512.png | 512×512 | Android PWA splash tela |
| mstile-150x150.png | 150×150 | Menu Iniciar do Windows 8/10 bloco |
| safari-pinned-tab.svg | SVG | Guias fixadas do Safari (preto e branco SVG) |
| favicon.svg | SVG | Navegadores modernos, modo escuro adaptativo |
Favicons SVG: suporte adaptável ao modo escuro
Os favicons SVG suportam consultas de mídia CSS, permitindo ícones responsivos no modo claro/escuro:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path fill="black" d="M10,10 L90,10 L90,90 L10,90 Z"/>
</svg>Este SVG mostra automaticamente um ícone claro no modo claro e um ícone escuro no modo escuro — perfeito para logotipos que precisam se adaptar aos temas do sistema.
Gere um conjunto completo de favicons no ToolDolfen
- Abra o Gerador de Favicon (Favicon Generator).
- Carregue um PNG quadrado de alta resolução (512×512 ou 1024×1024 recomendado – fonte maior = melhor qualidade). tamanhos).
- O gerador produz um pacote ZIP completo contendo:
- Todos os tamanhos PNG necessários - Arquivo ICO (multi-resolução) - Modelo JSON de manifesto da web - Snippets de código HTML para implementação de
- Extraia o ZIP e coloque os arquivos no diretório público do seu projeto.
- Adicione os snippets HTML fornecidos ao seu
.
Guias complementares recomendados
Explore tutoriais e utilitários complementares deste grupo de tópicos para aprimorar seu fluxo de trabalho digital: