Como fazer um favicon
Para fazer um favicon, adicione seu logo acima - ou digite uma letra ou emoji -, ajuste o visual e baixe o ZIP. As prévias mostram o ícone em cada tamanho real e em uma aba do navegador, nos modos claro e escuro.
- Escolha a origem. Um logo em PNG ou SVG funciona melhor; qualquer outra imagem é ajustada dentro de um quadrado. Não tem logo? Use uma letra ou emoji sobre um fundo colorido.
- Defina o visual. Cor de fundo ou transparente, o formato (quadrado arredondado, quadrado ou círculo) e quanto espaçamento fica ao redor da imagem.
- Baixe. Baixar todos os ícones entrega o pacote completo; Somente favicon.ico entrega apenas esse arquivo.
O que vem no pacote de favicon
| Arquivo | Tamanho | Usado por |
|---|---|---|
favicon.ico | 16, 32 e 48 px | Todos os navegadores, Windows, resultados de busca |
favicon-16x16.png, favicon-32x32.png | 16 e 32 px | Abas do navegador e favoritos |
apple-touch-icon.png | 180 px | Tela inicial do iPhone e do iPad |
android-chrome-192x192.png, -512x512.png | 192 e 512 px | Tela inicial do Android, web apps instalados |
site.webmanifest | - | Define os nomes dos ícones e as cores para Android e web apps |
favicon-html.txt | - | As tags para colar nas suas páginas |
O ícone da Apple sempre recebe fundo sólido e cantos retos: os iPhones arredondam os cantos sozinhos e mostram áreas transparentes em preto.
Adicione o favicon ao seu site
- Descompacte o pacote e envie os arquivos para a pasta raiz do seu site, ao lado da página inicial,
para que
seusite.com/favicon.icoabra o ícone. - Cole as tags HTML (mostradas acima e em
favicon-html.txt) no<head>das suas páginas. - Recarregue limpando o cache. Os navegadores guardam favicons antigos, então uma janela anônima é a forma mais rápida de conferir.
No WordPress, você pode definir o ícone de 512 px como Ícone do site no Personalizador, e ele cria os outros tamanhos sozinho.
Dicas para um favicon nítido
- Simplifique. Com 16 pixels, um logo cheio de detalhes vira um borrão. Use o símbolo do seu logo, ou a primeira letra, em vez do logo completo com texto.
- Use contraste. As abas são claras ou escuras dependendo do tema do navegador - confira as duas prévias.
- Cuide do espaçamento. Menos espaçamento deixa o ícone maior na aba; um pouco mais fica melhor na tela inicial do celular.
Precisa de um único arquivo .ico de outro tamanho? O conversor de imagens salva qualquer imagem como ICO.
Perguntas frequentes
Como fazer um favicon?
Adicione seu logo ou qualquer imagem quadrada na caixa desta página, ou digite uma letra ou emoji. Ajuste o fundo, o espaçamento e o formato e baixe o ZIP com todos os tamanhos de ícone e o HTML para colar no seu site.
Quais tamanhos um favicon precisa ter?
Um favicon.ico com versões de 16, 32 e 48 pixels cobre os navegadores e o Windows; um apple-touch-icon de 180 pixels cobre iPhones e iPads; ícones de 192 e 512 pixels cobrem o Android e os web apps instalados. O pacote inclui todos eles.
Como adicionar o favicon ao meu site?
Envie os arquivos do ZIP para a pasta raiz do seu site, para que o favicon.ico abra em seusite.com/favicon.ico. Depois, cole as tags HTML na seção head das suas páginas.
Por que meu favicon novo não aparece?
Os navegadores guardam os favicons em cache por muito tempo. Abra o endereço do favicon diretamente, recarregue a página ou teste em uma janela anônima. Os resultados de busca podem levar semanas para atualizar.
Posso criar um favicon a partir de texto ou emoji?
Sim. Escolha "Letra ou emoji", digite um ou dois caracteres e escolha as cores. É um jeito rápido de ter um ícone limpo sem precisar de um logo.
Minha imagem é enviada para algum servidor?
Não. Todos os ícones são criados no seu navegador, e sua imagem nunca sai do seu dispositivo.