# Design de favicon: ícones minúsculos que ainda têm a sua cara [Canonical HTML page](https://gradiently.design/pt-br/guide/favicon-design) O seu favicon é a peça mais repetida da sua marca e a menor. Ele precisa sobreviver a 16 pixels, em abas claras e escuras, ao lado de cinquenta outros sites. Veja como fazê-lo aguentar. ## The short version - O favicon é o ícone pequeno que representa um site nas abas do navegador, nos favoritos, no histórico, na tela inicial e nos resultados de busca. - Um conjunto mínimo moderno tem um favicon.ico de 32×32, um ícone SVG, um Apple touch icon de 180×180 e PNGs de 192×192 e 512×512 num manifesto de app web. - A Pesquisa Google mostra o favicon de um site ao lado dos resultados e pede um ícone quadrado, de preferência maior que 48×48 pixels. - Os favicons funcionam melhor como uma forma ou letra forte com bom contraste, porque o detalhe some a 16 pixels. - Um favicon em SVG pode trocar de cores no modo escuro com uma media query dentro do arquivo. O **favicon** é o pequeno ícone quadrado que representa o seu site nas abas do navegador, nos favoritos, no histórico, na tela inicial do celular e nos resultados do Google. Ele costuma aparecer com só 16 ou 32 pixels, então um bom design de favicon é implacável: uma forma ou letra forte, alto contraste, nenhum detalhe fino. Tecnicamente, você só precisa de poucos arquivos, um ICO de 32×32, um SVG, um Apple touch icon de 180×180 e dois PNGs do manifesto, mais algumas linhas de HTML. ## Tamanhos e arquivos de favicon de que você realmente precisa Guias antigos listam vinte tamanhos. Os navegadores modernos redimensionam bem, então um conjunto curto cobre todos os lugares onde um favicon aparece. Isto segue a abordagem recomendada no [web.dev](https://web.dev/articles/add-manifest) para manifestos e o comportamento atual dos navegadores para o resto. | Arquivo | Tamanho | Usado por | | --- | --- | --- | | `favicon.ico` | 32×32 | Navegadores antigos e tudo que pede `/favicon.ico` diretamente | | `icon.svg` | Escalável | Navegadores atuais que aceitam favicons em SVG; pode se adaptar ao modo escuro | | `apple-touch-icon.png` | 180×180 | Telas iniciais de iPhone e iPad e favoritos do Safari | | `icon-192.png` | 192×192 | Tela inicial do Android, pelo manifesto do app web | | `icon-512.png` | 512×512 | Telas de abertura e instalação de apps no Android, pelo manifesto | Cinco arquivos. Coloque-os na raiz do site, ou em qualquer lugar, desde que o HTML aponte para eles. A Pesquisa Google também mostra favicons ao lado dos resultados. As [diretrizes de favicon](https://support.google.com/webmasters/answer/9290858) dela pedem um ícone quadrado, recomendam um maior que 48×48 pixels e dizem que ele deve representar a sua marca. Os PNGs de 192 e 512 se qualificam; confira essa página antes do lançamento, porque o Google a revisa. ## Como colocar um favicon no seu site ```html ``` Vai no `head` de todas as páginas. Os navegadores que entendem SVG o preferem; os outros recorrem ao ICO. ```json { "name": "Studio Nine", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" } ] } ``` Um `manifest.webmanifest` mínimo. O ícone maskable é opcional e permite que o Android o recorte nas suas próprias formas. > **Ícones maskable precisam de margem** O Android pode recortar um ícone maskable em círculo, squircle ou quadrado arredondado. Mantenha a parte importante dentro do círculo central, cerca de 80% da largura, e preencha o resto com a cor de fundo. ## Criando um favicon legível a 16 pixels A 16 pixels você tem 256 pontos. Um logotipo com o nome inteiro vira uma mancha cinza, traços finos somem e duas cores parecidas se fundem. Os favicons que as pessoas reconhecem na hora quase sempre são uma de três coisas: uma única letra, um símbolo simples ou uma forma sólida numa cor marcante. Um ícone de app quadrado com uma única letra N em negrito sobre um fundo em gradiente Uma letra pesada sobre um fundo forte. Ela continua legível quando o navegador a reduz a 16 pixels. Um ícone quadrado com o nome de um estúdio em três palavras, detalhado demais para funcionar como favicon O nome completo fica bem a 512 pixels e vira uma textura ilegível a 16. Guarde-o para a própria página. ### Evite - O logotipo completo com o nome - Traços finíssimos e miolos pequenos - Duas cores próximas que se misturam - Detalhes que vão até as bordas - Um ícone transparente que some em abas escuras ### Faça - Uma letra, um monograma ou um símbolo - Traços de pelo menos 2 pixels em 32×32 - Um contraste forte entre a forma e o fundo - Preencha a maior parte do quadrado, com um pouco de margem - Teste nos temas claro e escuro do navegador ## Cor e gradientes num ícone minúsculo Nesse tamanho, a cor trabalha mais do que a forma, porque é o que as pessoas procuram numa fileira de abas. Uma cor de marca reconhecível vence um símbolo engenhoso. Gradientes podem funcionar se forem fortes e curtos: duas paradas com uma diferença clara de luminosidade parecem uma superfície iluminada, enquanto uma mistura sutil de várias paradas só fica turva a 16 pixels. - Índigo para rosa: legível: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)` - Verde-azulado para lima: legível: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)` - Cinzas claros: some: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)` Fundos de favicon precisam de uma mudança clara de luminosidade e de um tom decidido. O último some numa barra de abas clara. Se a sua marca já tem um fundo de assinatura, um recorte dele pode virar um bloco de favicon marcante. Os Marks do Gradiently são úteis aqui: o mesmo visual que fica atrás dos seus posts pode ficar atrás de uma única letra em 512×512, para que a aba e o feed pareçam uma só marca. Garanta que a letra mantenha um contraste forte com o bloco, como explica [logotipo sobre fundo em gradiente](https://gradiently.design/pt-br/guide/logo-on-gradient-background). ## Favicons para modo escuro com SVG Um ícone preto some numa barra de abas escura, e um branco numa barra clara. Como um favicon em SVG é um pequeno documento, ele pode levar a sua própria media query e trocar de cores conforme o tema do navegador. ```html ``` Salve como `icon.svg`. Um bloco arredondado com a letra N que inverte as cores no modo escuro. Um bloco sólido atrás do símbolo é o seguro mais simples: ele fica legível em qualquer fundo, claro ou escuro, sem depender da media query. [SVG ou PNG](https://gradiently.design/pt-br/guide/svg-vs-png) explica por que o arquivo vetorial é o que vale guardar. ## Um checklist rápido de favicon 1. **Comece pela parte mais simples do seu logotipo** Um monograma, a primeira letra ou só o símbolo. [Variações de logotipo](https://gradiently.design/pt-br/guide/logo-variations) mostra como construir uma versão pequena de propósito. 2. **Desenhe primeiro em 32×32** Crie na grade pequena e amplie, não o contrário. Traços grossos, espaços generosos. 3. **Exporte os cinco arquivos** ICO em 32×32, SVG, Apple touch icon de 180×180, PNGs de 192 e 512 para o manifesto. 4. **Teste em abas de verdade** Abra o seu site ao lado de outros dez, nos temas claro e escuro. Se você não acha a sua aba em um segundo, simplifique. O favicon fica ao lado da sua [imagem Open Graph](https://gradiently.design/pt-br/guide/open-graph-image-size) e das fotos de perfil nas redes sociais como os sinais pequenos e constantes de uma marca. Mantenha todos consistentes, e veja [tamanhos de logotipo](https://gradiently.design/pt-br/guide/logo-sizes) para o kit completo. ## FAQ ### Qual deve ser o tamanho de um favicon? Ofereça um favicon.ico de 32×32, um SVG, um Apple touch icon de 180×180 e PNGs de 192×192 e 512×512 num manifesto. Os navegadores escolhem e redimensionam a partir deles. ### Como coloco um favicon no meu site? Envie os arquivos do ícone e adicione as tags `link rel="icon"` e `link rel="apple-touch-icon"` ao `head` de todas as páginas, mais um link para o manifesto no Android. ### Por que o meu favicon não aparece no Google? O Google precisa de um favicon quadrado, de preferência maior que 48×48 pixels, vinculado na sua página inicial e rastreável. Pode levar um tempo para atualizar depois que você o muda. ### Um favicon pode ser SVG? Sim, os navegadores atuais que aceitam favicons em SVG vão usá-lo, e ele fica nítido em qualquer tamanho. Mantenha um favicon.ico como alternativa. ### O meu favicon deve ser o meu logotipo completo? Geralmente não. Use uma letra, um monograma ou o símbolo do logotipo, porque um logotipo com o nome inteiro fica ilegível a 16 pixels.