Gerador de Favicon
Todos os tamanhos de favicon, um .ico multitamanho de verdade e um web manifest a partir de uma imagem. Tudo roda localmente — nada é enviado para servidor nenhum.
- Entrada
- PNG · JPEG · WebP · SVG
- Saída
- ICO · PNG · webmanifest · ZIP
Solte seu logotipo
PNG, JPEG, WebP ou SVG. Quadrado e com pelo menos 512 × 512 px funciona melhor. Você também pode colar uma imagem.
Todos os arquivos de favicon a partir de uma imagem
Este gerador de favicon transforma um único logotipo no conjunto completo de que um site precisa hoje: um favicon.ico com ícones de 16, 32 e 48 pixels, PNGs nítidos de 16 a 512 pixels, o Apple touch icon, os ícones do Android Chrome, um site.webmanifest e as tags HTML para colar na sua página. Deixe a arte quadrada, adicione margem, arredonde os cantos ou coloque-a sobre um fundo sólido e baixe tudo em um único ZIP. O redimensionamento e o ZIP são feitos no seu dispositivo, então seu logotipo nunca é enviado para lugar nenhum.
Como criar um favicon
- Solte um PNG, JPEG, WebP ou SVG na página ou cole-o. Um logotipo quadrado de pelo menos 512 × 512 pixels, ou um SVG, dá o resultado mais nítido.
- Escolha Ajustar para manter a imagem inteira com espaço ao redor ou Preencher para recortá-la em um quadrado. Adicione margem e raio de canto se quiser um ícone arredondado.
- Escolha uma cor de fundo ou mantenha-o transparente. O Apple touch icon sempre recebe um fundo sólido, porque o iOS pinta a transparência de preto.
- Preencha o nome do app e as cores do web manifest e clique em Baixar ZIP, ou baixe arquivos avulsos na prévia.
- Envie os arquivos para a raiz do seu site e cole as tags HTML no
<head>de todas as páginas.
De quais arquivos de favicon os navegadores modernos realmente precisam?
As dicas sobre favicon estão cheias de restos de 2012: dezenas de tamanhos, XML de blocos do Windows e máscaras de abas fixadas do Safari. Os navegadores de hoje procuram bem menos. Quatro arquivos atendem praticamente todos os navegadores, celulares e sistemas operacionais em uso.
O resto do ZIP está lá por completude: os PNGs de 16, 32 e 48 pixels para ferramentas e CMSs que os pedem pelo nome, e um bloco opcional de 150 × 150 do Windows para sites fixados antigos. Arquivos extras não fazem mal, mas você não precisa vincular todos.
- favicon.ico
- O fallback universal. Os navegadores pedem /favicon.ico por conta própria mesmo sem nenhuma tag apontando para ele, assim como leitores de RSS, gerenciadores de favoritos e crawlers. Um único arquivo guarda as versões de 16, 32 e 48 pixels, cada uma como PNG dentro do contêiner ICO, que todo navegador lê desde o Windows Vista.
- icon.svg
- Um favicon vetorial, nítido em qualquer tamanho e nível de zoom. Chrome, Edge, Firefox e versões recentes do Safari o usam quando ele está vinculado. Você só tem um se partir de um SVG; uma imagem rasterizada não vira um vetor de verdade.
- apple-touch-icon.png
- Um PNG opaco de 180 × 180 que iPhones e iPads mostram quando alguém adiciona seu site à tela de início. O iOS aplica a própria máscara arredondada, então os cantos devem ser retos e o fundo sólido.
- Ícones do manifest
- Os PNGs de 192 e 512 pixels listados no site.webmanifest. O Android os usa para o atalho na tela de início e para a tela de abertura de um web app instalado, e o Chrome verifica se existem antes de oferecer a instalação do site.
As tags HTML para colar
O trecho vincula o ICO com sizes="32x32" em vez de sizes="any". Com "any", o Chrome prefere o ICO mesmo quando há um SVG disponível. Quando você envia um SVG, o trecho também o vincula, para que os navegadores com suporte a favicon SVG o usem e os demais recorram ao ICO. Sem SVG, são vinculados os PNGs de 32 e 16 pixels.
A meta tag theme-color colore a barra do navegador no Android e no Safari, e o site.webmanifest traz o nome do app, as cores e os ícones grandes. Mantenha os nomes dos arquivos e coloque todos na raiz do domínio, ou altere os caminhos no trecho para onde você os colocou.
Como desenhar um favicon que sobrevive a 16 pixels
- Simplifique. Um ícone de 16 × 16 tem 256 pixels no total. Logotipos com texto e linhas finas viram borrão; uma única letra, um símbolo ou o ícone do logotipo sem o texto fica muito mais legível.
- Use um contraste que funcione nas duas cores de aba. As abas do navegador são claras ou escuras conforme o tema. A prévia mostra cada tamanho sobre um bloco branco e um quase preto, para você notar um logotipo escuro que some no modo escuro antes de publicar.
- Na dúvida, use um fundo. Um fundo sólido com um pouco de margem e raio de canto mantém um logotipo fino ou transparente visível em qualquer aba e parece intencional na tela de início.
- Comece grande. As imagens são reduzidas pela metade a cada passo para bordas limpas, mas nada acrescenta detalhes que não estão na origem. Use 512 pixels ou mais, ou um SVG.
- Confira as cores. Se a cor da sua marca estiver fraca demais contra uma aba branca ou escura, teste-a no verificador de contraste, ou converta um valor recebido em outra notação no conversor de cores.
Por que não há upload
A maioria dos geradores de favicon envia seu logotipo para um servidor para redimensioná-lo. Este desenha cada tamanho em um canvas no seu navegador, escreve o arquivo ICO byte a byte em JavaScript e monta o ZIP com um pequeno módulo WebAssembly, então a imagem nunca sai do seu dispositivo e a ferramenta continua funcionando offline depois que a página carrega. Isso importa para uma marca ainda não lançada ou para o logotipo de um cliente que você ainda não pode compartilhar.
Perguntas frequentes
- Qual deve ser o tamanho de um favicon?
- As abas do navegador mostram favicons em 16 × 16 pixels CSS, o que equivale a 32 × 32 em telas de alta densidade, por isso o ICO contém versões de 16, 32 e 48 pixels. Adicione um Apple touch icon de 180 × 180 e ícones de 192 e 512 pixels para o web manifest e você cobre todos os casos comuns. Comece com uma imagem de pelo menos 512 × 512 pixels.
- Ainda preciso de um arquivo favicon.ico?
- Sim. Navegadores, leitores de feed e crawlers pedem /favicon.ico automaticamente mesmo sem nenhuma tag apontando para ele, e navegadores antigos só entendem ICO. Mantenha um na raiz do site junto com os ícones SVG e PNG.
- Posso usar um SVG como favicon?
- Sim. Chrome, Edge, Firefox e versões recentes do Safari aceitam favicons SVG por uma tag link com type="image/svg+xml". Envie um SVG aqui e ele é incluído como icon.svg ao lado do ICO de fallback, e o trecho HTML vincula os dois.
- O que é o apple-touch-icon?
- É o PNG de 180 × 180 pixels que um iPhone ou iPad usa quando alguém adiciona seu site à tela de início. Ele deve ter fundo sólido e cantos retos, porque o próprio iOS arredonda os cantos e deixa as áreas transparentes pretas.
- Por que meu favicon não aparece?
- Os navegadores guardam favicons em cache por muito tempo, muitas vezes por dias. Verifique se o arquivo está acessível no caminho da tag link e depois force a atualização ou abra o site em uma janela anônima. Renomear o arquivo ou adicionar uma query de versão como favicon.ico?v=2 força um novo download.
- Como converter PNG para ICO?
- Solte o PNG nesta página e baixe o favicon.ico. O gerador o redimensiona para 16, 32 e 48 pixels e junta os três em um único arquivo ICO, com cada tamanho guardado como PNG dentro do contêiner.
- Para que serve o site.webmanifest?
- É um pequeno arquivo JSON que informa ao Android e ao Chrome o nome do site, a cor do tema, a cor de fundo e os ícones de 192 e 512 pixels a usar quando o site é adicionado à tela de início ou instalado como app.
- Meu logotipo é enviado para algum servidor?
- Não. Cada ícone é desenhado e codificado no seu navegador e o ZIP é montado no seu dispositivo. Nada é enviado para lugar nenhum, e a página continua funcionando offline depois de carregada.