Favicon
O que é um favicon, onde ele aparece, quais formatos e tamanhos usar e erros comuns ao criá-lo.
Um favicon é o pequeno ícone que identifica um site nas abas do navegador, nos favoritos, no histórico e em alguns resultados de busca. O nome vem de "favorites icon", termo que o Internet Explorer usava para os favoritos.
Os navegadores originalmente solicitavam um arquivo chamado favicon.ico na raiz do site. O formato ICO pode conter vários tamanhos em um único arquivo, como 16×16, 32×32 e 48×48 pixels. O HTML atual declara ícones com um elemento link cujo atributo rel é icon, e o arquivo pode ser PNG ou SVG, além de ICO.
Dispositivos Apple usam um ícone de toque separado para atalhos na tela de início, normalmente um PNG de 180×180. Aplicativos web instaláveis listam ícones maiores, geralmente de 192×192 e 512×512, em um manifesto de aplicativo web.
Formatos e tamanhos de favicon
| Arquivo | Formato | Tamanhos comuns |
|---|---|---|
| favicon.ico | ICO | 16, 32, 48 px em um só arquivo |
| Link de ícone | PNG ou SVG | PNG de 32×32, ou um SVG escalável |
| Ícone de toque da Apple | PNG | 180×180 |
| Ícones do manifesto | PNG | 192×192, 512×512 |
Onde os favicons aparecem
- Abas do navegador e barra de endereço.
- Favoritos, listas de leitura e histórico.
- Atalhos na tela de início de celulares e tablets.
- Resultados de busca e pré-visualizações de links em alguns serviços.
Como criar um favicon
- Comece com uma marca quadrada, não com o logotipo completo com texto.
- Simplifique a marca para que ela seja legível em 16×16 pixels.
- Exporte os tamanhos em PNG, um SVG opcional e um arquivo ICO.
- Adicione os elementos link no cabeçalho da página e teste em vários navegadores.
Em um fluxo real de publicação
Um favicon ausente aparece como um ícone genérico em capturas de abas e na documentação. Antes de capturar janelas do navegador para um guia ou um post de lançamento, confirme que o favicon carrega. Os navegadores guardam favicons em cache de forma agressiva, então um ícone antigo pode permanecer depois de uma atualização.
Erros comuns
- Usar um logotipo detalhado que vira um borrão em 16 pixels.
- Esquecer o ícone de toque da Apple, então os celulares mostram uma captura da página no lugar do ícone.
- Publicar um ícone transparente que desaparece em temas escuros do navegador.
- Testar em apenas um navegador.
Precisa corrigir uma imagem agora?
Converta um logotipo entre PNG, JPG e WebP com o Image Converter e confira o tamanho em pixels com o Screenshot Resolution Checker.
Perguntas frequentes
O favicon.ico ainda é necessário?
Muitos sites ainda o incluem, porque algumas ferramentas o solicitam na raiz do site. Um link de ícone em PNG ou SVG atende aos navegadores atuais.
Um favicon pode ser animado?
Alguns navegadores mostram favicons em GIF animado, mas o suporte varia. Um ícone estático é a escolha confiável.
Fontes
Recursos relacionados
- Open Graph image: a imagem de pré-visualização maior para links compartilhados.
- Image Compressor: reduz o tamanho do arquivo do ícone.
Você tira as mesmas capturas de tela várias vezes?
O Temposhot captura uma tela, janela ou área em intervalos programados e exporta o conjunto como PDF, imagens, ZIP ou MP4. As ferramentas gratuitas do navegador capturam apenas uma imagem por vez.
Recursos relacionados
Termos relacionados
- Imagem Open GraphO que é uma imagem Open Graph, por que ela importa para o compartilhamento em redes sociais e como criar pré-visualizações og:image eficazes.
- PNGComo o formato de imagem PNG funciona, quando usá-lo para capturas de tela e como ele se compara ao JPG e ao WebP.
- SVGO que é SVG, em que os gráficos vetoriais diferem das imagens raster e quando o SVG é o formato certo para o seu conteúdo.
- Formato de imagemVisão geral dos formatos de imagem comuns (PNG, JPG, WebP e AVIF) e quando usar cada um.