# Design de favicon: ícones minúsculos com a tua cara [Canonical HTML page](https://gradiently.design/pt-pt/guide/favicon-design) O teu favicon é a peça mais repetida da tua marca e a mais pequena. Tem de sobreviver a 16 píxeis, em separadores claros e escuros, ao lado de cinquenta outros sites. Eis como o fazer resistir. ## The short version - Um favicon é o pequeno ícone que representa um site em separadores do navegador, favoritos, histórico, ecrãs iniciais e resultados de pesquisa. - Um conjunto mínimo moderno é um favicon.ico de 32×32, um ícone SVG, um Apple touch icon de 180×180 e PNG de 192×192 e 512×512 num manifesto de aplicação web. - A Pesquisa Google mostra o favicon de um site junto dos resultados e pede um ícone quadrado, idealmente maior do que 48×48 píxeis. - Os favicons funcionam melhor como uma só forma ou letra forte e com muito contraste, porque o pormenor desaparece a 16 píxeis. - Um favicon SVG pode trocar de cores para o modo escuro com uma media query dentro do ficheiro. Um **favicon** é o pequeno ícone quadrado que representa o teu site em separadores do navegador, favoritos, histórico, ecrãs iniciais de telemóvel e resultados do Google. Costuma aparecer com apenas 16 ou 32 píxeis, por isso o bom design de favicon é implacável: uma só forma ou letra forte, muito contraste, nada de pormenor fino. Tecnicamente só precisas de um punhado de ficheiros, um ICO de 32×32, um SVG, um Apple touch icon de 180×180 e dois PNG de manifesto, mais algumas linhas de HTML. ## Tamanhos de favicon e os ficheiros de que realmente precisas Os guias antigos listam vinte tamanhos. Os navegadores modernos redimensionam bem, por isso um conjunto curto cobre todos os sítios 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. | Ficheiro | Tamanho | Usado por | | --- | --- | --- | | `favicon.ico` | 32×32 | Navegadores antigos e tudo o que peça `/favicon.ico` diretamente | | `icon.svg` | Escalável | Navegadores atuais que suportam favicons SVG; pode adaptar-se ao modo escuro | | `apple-touch-icon.png` | 180×180 | Ecrãs iniciais de iPhone e iPad e favoritos do Safari | | `icon-192.png` | 192×192 | Ecrã inicial do Android, através do manifesto da aplicação web | | `icon-512.png` | 512×512 | Ecrãs de arranque do Android e instalações de aplicações, através do manifesto | Cinco ficheiros. Põe-nos na raiz do teu site, ou onde quiseres, desde que o HTML aponte para eles. A Pesquisa Google também mostra favicons ao lado dos resultados. As suas [diretrizes de favicon](https://support.google.com/webmasters/answer/9290858) pedem um ícone quadrado, recomendam um maior do que 48×48 píxeis e dizem que deve representar a tua marca. Os PNG de 192 e 512 cumprem ambos; confirma essa página antes do lançamento, porque a Google a revê. ## Como adicionar um favicon ao teu site ```html ``` Vai no `head` de cada página. Os navegadores que entendem SVG preferem-no; 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 deixa o Android cortá-lo nas suas próprias formas. > **Os ícones maskable precisam de margem** O Android pode cortar um ícone maskable num círculo, num squircle ou num quadrado arredondado. Mantém a parte importante dentro do círculo central, cerca de 80% da largura, e preenche o resto com a cor do fundo. ## Desenhar um favicon que se lê a 16 píxeis A 16 píxeis tens 256 pontos. Um logótipo tipográfico completo vira uma mancha cinzenta, os traços finos desaparecem e duas cores parecidas fundem-se. Os favicons que as pessoas reconhecem de imediato são quase sempre uma de três coisas: uma só letra, um símbolo simples ou uma forma sólida numa cor distintiva. Um ícone de aplicação quadrado com uma única letra N a negrito sobre um fundo em gradiente Uma letra pesada sobre um fundo forte. Continua a ler-se quando o navegador a reduz a 16 píxeis. Um ícone quadrado com o nome de um estúdio em três palavras, demasiado detalhado para funcionar como favicon O nome completo fica bem a 512 píxeis e torna-se textura ilegível a 16. Guarda-o para a própria página. ### Evita - O logótipo completo com o seu nome - Traços finíssimos e contraformas pequenas - Duas cores próximas que se esbatem - Pormenor que vai até às bordas - Um ícone transparente que desaparece em separadores escuros ### Faz - Uma letra, monograma ou símbolo - Traços com pelo menos 2 píxeis de espessura a 32×32 - Um forte contraste entre a forma e o fundo - Preenche a maior parte do quadrado, com um pouco de margem - Testa em temas do navegador claros e escuros ## Cor e gradientes num ícone minúsculo A cor faz mais trabalho do que a forma neste tamanho, porque é o que as pessoas procuram ao longo de uma fila de separadores. Uma cor de marca reconhecível vence um símbolo engenhoso. Os gradientes podem funcionar se forem fortes e curtos: dois pontos com uma diferença clara de luminosidade lêem-se como uma superfície iluminada, enquanto uma mistura subtil de vários pontos fica só turva a 16 píxeis. - Índigo a rosa: lê-se: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)` - Verde-azulado a lima: lê-se: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)` - Cinzentos pálidos: desaparece: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)` Os fundos de favicon precisam de uma mudança clara de luminosidade e de um tom seguro. O último desaparece contra uma barra de separadores clara. Se a tua marca já tem um fundo de assinatura, um recorte dele pode dar um mosaico de favicon distintivo. Os Marks do Gradiently são úteis aqui: o mesmo visual que corre por trás das tuas publicações pode ficar por trás de uma só letra a 512×512, para o separador e o feed parecerem uma só marca. Garante que a letra mantém um forte contraste com o mosaico, como se explica em [logótipo sobre fundo em gradiente](https://gradiently.design/pt-pt/guide/logo-on-gradient-background). ## Favicons para o modo escuro com SVG Um ícone preto desaparece numa barra de separadores escura, e um branco numa barra clara. Como um favicon SVG é um pequeno documento, pode levar a sua própria media query e trocar de cores com o tema do navegador. ```html ``` Guarda como `icon.svg`. Um mosaico arredondado com uma letra N que inverte as cores no modo escuro. Um mosaico sólido por trás do símbolo é o seguro mais simples: lê-se sobre qualquer fundo, claro ou escuro, sem depender da media query. [SVG ou PNG](https://gradiently.design/pt-pt/guide/svg-vs-png) explica porque o ficheiro vetorial é o que deves guardar. ## Uma lista rápida para o favicon 1. **Parte da parte mais simples do teu logótipo** Um monograma, a primeira letra ou só o símbolo. [Variações do logótipo](https://gradiently.design/pt-pt/guide/logo-variations) explica como construir de propósito uma versão pequena. 2. **Desenha-o primeiro a 32×32** Desenha na grelha pequena e amplia, e não ao contrário. Traços grossos, espaços generosos. 3. **Exporta os cinco ficheiros** ICO a 32×32, SVG, Apple touch icon de 180×180, PNG de manifesto de 192 e 512. 4. **Testa em separadores reais** Abre o teu site ao lado de dez outros, em temas claros e escuros. Se não encontras o teu separador num segundo, simplifica. O favicon fica ao lado da tua [imagem Open Graph](https://gradiently.design/pt-pt/guide/open-graph-image-size) e das fotografias de perfil das redes sociais como os sinais pequenos e constantes de uma marca. Mantém-nos coerentes e vê [tamanhos de logótipo](https://gradiently.design/pt-pt/guide/logo-sizes) para o kit completo. ## FAQ ### Que tamanho deve ter um favicon? Fornece um favicon.ico de 32×32, um SVG, um Apple touch icon de 180×180 e PNG de 192×192 e 512×512 num manifesto. Os navegadores escolhem e redimensionam a partir destes. ### Como adiciono um favicon ao meu site? Carrega os ficheiros do ícone e acrescenta etiquetas `link rel="icon"` e `link rel="apple-touch-icon"` ao `head` de cada página, mais uma ligação ao manifesto para o Android. ### Porque é que o meu favicon não aparece no Google? A Google precisa de um favicon quadrado, idealmente maior do que 48×48 píxeis, ligado a partir da tua página inicial e rastreável. Pode demorar algum tempo a atualizar depois de o mudares. ### Um favicon pode ser um SVG? Sim, os navegadores atuais que suportam favicons SVG vão usá-lo e ele mantém-se nítido em todos os tamanhos. Mantém um favicon.ico como alternativa. ### O meu favicon deve ser o logótipo completo? Normalmente não. Usa uma letra, um monograma ou o símbolo do logótipo, porque um logótipo tipográfico completo é ilegível a 16 píxeis.