Gerador de Favicon: crie favicon.ico e ícones PNG
Envie qualquer imagem e gere um conjunto completo de favicons, .ico, tamanhos em PNG e Apple Touch Icon, pronto para adicionar ao seu site.
Arraste uma imagem aqui ou clique para escolher
JPG, PNG, WebP ou SVG. Imagens quadradas funcionam melhor
Tamanho máximo do arquivo: 50MB
O favicon é o pequeno ícone que aparece nas abas do navegador, nos favoritos, no histórico e nos atalhos da tela inicial. Um favicon de 16×16 pode parecer detalhe, mas ele aparece em centenas de contextos na navegação de cada visitante, e um favicon ausente ou genérico faz o site parecer inacabado. Para criar um favicon que funcione em todo lugar, um site moderno precisa de vários tamanhos: 16×16 e 32×32 para as abas do navegador, 180×180 para o Apple Touch Icon (atalho na tela inicial do iPhone), 192×192 e 512×512 para o manifest de PWA no Android e um favicon.ico multirresolução para a raiz do domínio. Esta ferramenta gera todos os tamanhos necessários a partir de uma única imagem, inteiramente no seu dispositivo.
Como criar um favicon
- Abra sua imagem de origem. Comece com uma imagem quadrada (largura e altura iguais) de pelo menos 512×512 pixels. O logotipo da sua empresa, o ícone do app ou um símbolo ou letra simples funcionam melhor. A imagem de origem é reduzida para cada tamanho de favicon, então comece com a maior versão de melhor qualidade disponível.
- Veja a prévia de todos os tamanhos. A ferramenta mostra a prévia de cada tamanho (16×16, 32×32, 48×48, 180×180, 192×192, 512×512), para você ver como a imagem fica em tamanhos pequenos antes de baixar. Detalhes pequenos visíveis em 512×512 costumam ficar invisíveis ou poluídos em 16×16.
- Baixe o pacote de favicons. Clique em Baixar tudo para receber um arquivo ZIP com todos os favicons gerados, mais as tags HTML
<link>recomendadas para adicionar à seção<head>do seu site. - Adicione ao seu site. Coloque os arquivos de favicon na raiz do site (ou no caminho indicado nas tags de link) e adicione o trecho de HTML fornecido à sua seção
<head>. Teste em vários navegadores para confirmar que o favicon aparece corretamente.
Dicas para um resultado melhor
- Comece com um SVG ou uma imagem de alta resolução. O gerador de favicon reduz a origem para tamanhos minúsculos. Comece com um SVG (que independe de resolução) ou pelo menos um PNG de 512×512 para resultados nítidos em todos os tamanhos de saída. Para SVGs, use o conversor de SVG para PNG para rasterizar em 512×512 antes, se precisar.
- Simplifique para os tamanhos pequenos. Logotipos complexos com detalhes finos, linhas finas ou texto pequeno ficam borrados em 16×16 pixels. Considere criar uma versão simplificada do logotipo, só o símbolo ou uma letra, para usar como favicon em vez da marca completa.
- Teste no modo escuro. Os navegadores exibem favicons em barras de abas claras e escuras, conforme o tema do sistema. Um ícone escuro em uma barra de abas escura fica invisível. Teste seu favicon sobre fundos claros e escuros e considere uma versão com fundo contrastante, se precisar. Precisa de um esquema de cores para o seu favicon? Explore as nossas Ferramentas de Cores.
- Atualize o manifest.json para PWA. Se o seu site é um Progressive Web App, os PNGs de 192×192 e 512×512 precisam ser referenciados no seu
manifest.json, junto com os tamanhos e finalidades de ícone definidos na especificação do Web App Manifest.
Por que usar o PixMidas
- Todos os tamanhos em um download. Receba todos os tamanhos de favicon necessários, .ico, 16×16, 32×32, 48×48, 180×180, 192×192 e 512×512, em um único ZIP, em vez de redimensionar um por um.
- 100% privado. Toda a geração de favicons roda no seu dispositivo, usando a API Canvas. Seu logotipo ou ícone nunca é enviado para nenhum servidor.
- Sem conta e sem cadastro. Grátis e instantâneo. A geração de favicons roda localmente no seu dispositivo.
Perguntas frequentes
De quais tamanhos de favicon eu realmente preciso?
O conjunto mínimo para compatibilidade completa é: favicon.ico (com camadas de 16×16 e 32×32) na raiz do domínio, apple-touch-icon.png em 180×180 para atalhos na tela inicial do iPhone e iPad, e PNGs de 192×192 e 512×512 para o manifest de PWA no Android. Incluir 48×48 melhora a exibição na barra de tarefas do Windows e em extensões de navegador. O PNG de 512×512 também é usado como ícone de tela de abertura em alguns contextos de PWA.
O que é um arquivo favicon.ico?
O favicon.ico é um formato de ícone do Windows que pode conter várias resoluções em um único arquivo, diferente do PNG, que armazena uma só. O favicon.ico da raiz do domínio é buscado automaticamente pelos navegadores e por muitos serviços (leitores de RSS, gerenciadores de senha, geradores de prévia de link) mesmo antes de você adicionar qualquer tag de link, então incluí-lo é importante como cobertura de reserva. Este gerador cria um arquivo .ico com camadas de 16×16 e 32×32.
Por que meu favicon fica borrado nos tamanhos pequenos?
Reduzir uma imagem complexa para 16×16 pixels usa 256 pixels para representar algo originalmente renderizado em 262.144 pixels (512×512). Detalhes finos, linhas finas, degradês e texto ficam irreconhecíveis nessa escala. A solução é criar ou usar uma versão simplificada do ícone, uma letra única, um símbolo simples ou um ícone com fundo sólido, que se leia bem em tamanhos minúsculos. Repare como Apple, Google e Twitter usam símbolos simplificados como favicon, em vez dos logotipos completos.
Preciso colocar os arquivos de favicon na raiz do site?
Os navegadores procuram o favicon.ico na raiz do domínio por padrão, então https://seudominio.com/favicon.ico é buscado automaticamente, sem nenhuma tag de link. Para todos os outros formatos e tamanhos, o local é indicado nas tags <link> do head do seu HTML. Você pode guardá-los em qualquer lugar que o seu servidor consiga servir. O trecho de HTML incluído no download indica os caminhos corretos.
O que é o Apple Touch Icon?
O Apple Touch Icon (180×180 px) é usado pelo iOS e pelo iPadOS quando alguém adiciona o seu site à tela inicial do iPhone ou do iPad. Ele vira o ícone de app do atalho. Sem ele, o iOS usa uma captura da página, o que fica ruim como ícone de tela inicial. O Android usa o ícone de 192×192 do manifest de PWA para a mesma finalidade.
Meu favicon deve ter fundo transparente ou sólido?
Depende do design. Fundos transparentes funcionam bem para símbolos que precisam se adaptar às diferentes cores da aba do navegador, no modo claro e no escuro. Fundos de cor sólida garantem que o ícone pareça intencional e idêntico, seja qual for a cor da aba. Para logotipos de marca, um fundo sólido na cor principal da marca costuma ser a abordagem mais limpa e a que mais lembra um ícone de app nativo na tela inicial.