PNG → ICO
Gerador de favicon
Crie todos os ícones de que um site precisa a partir de uma imagem: favicon.ico, Apple touch icon, ícones de app e o HTML para colar. Tudo acontece no seu navegador.
Solte seu logo ou ícone aqui PNG, JPG ou SVG. Uma imagem quadrada funciona melhor. apple-touch-icon.png · 180
icon-192.png · 192
icon-512.png · 512
Cole no <head> do seu site
Roda no navegador · os arquivos ficam no seu aparelho
Como criar um favicon
- Adicione seu logo ou ícone. PNG, JPG ou SVG. Uma imagem quadrada com uma forma simples funciona melhor.
- Ajuste margem, cantos e fundo. Dê espaço em volta do ícone, arredonde os cantos e preencha o fundo se o logo for escuro sobre transparente.
- Confira as abas do navegador. A prévia mostra o ícone no tamanho real de 16 px em uma aba clara e em uma escura.
- Baixe o ZIP e cole o HTML. Envie os arquivos para a raiz do seu site e cole as tags no
<head>.
O que o gerador de favicon cria
| Arquivo | Tamanho | Usado por |
|---|---|---|
| favicon.ico | 16, 32 e 48 px | Abas do navegador, favoritos, atalhos do Windows e qualquer ferramenta que peça /favicon.ico |
| icon.svg | Escalável | Navegadores modernos, quando a imagem de origem é um SVG |
| apple-touch-icon.png | 180 px | Atalhos na tela de início do iPhone e do iPad |
| icon-192.png e icon-512.png | 192 e 512 px | Android e web apps instalados, listados no manifest |
| manifest.webmanifest | – | Indica aos navegadores onde estão os ícones do app |
Os ícones de 192 e 512 px seguem o exemplo de web app manifest do web.dev. O Apple touch icon sempre recebe um fundo sólido, porque o iOS mostra as áreas transparentes em preto.
Criar favicon a partir de uma imagem ou PNG
Comece pela versão mais limpa do seu logo. Um favicon aparece com 16 por 16 pixels em uma aba, então textos pequenos e linhas finas somem. Muitas marcas usam só o símbolo ou a inicial. Se a imagem de origem não for quadrada, o gerador a centraliza em uma tela quadrada com margens transparentes.
Use o controle de margem quando o logo encostar nas bordas, e preencha o fundo quando o logo for escuro e transparente, para que ele continue visível nas abas escuras do navegador.
Gerar favicon SVG
Se você soltar um SVG, o pacote o inclui como icon.svg e o HTML o adiciona como ícone extra. Os navegadores que aceitam favicon em SVG o usam em qualquer tamanho, e os outros recorrem ao favicon.ico. Os ícones PNG são desenhados a partir do vetor, então saem nítidos.
Criar um favicon que apareça no Google
O Google pode mostrar o seu favicon ao lado dos resultados. As diretrizes pedem uma imagem quadrada de pelo menos 8 por 8 pixels e recomendam uma maior que 48 por 48 pixels (Google Search Central). O tamanho de 48 px dentro do favicon.ico e o ícone de 192 px atendem a isso. Para mais detalhes, veja o nosso guia de tamanho de favicon.