Não. SVG é aceito como formato de origem, mas o pacote contém PNGs rasterizados e um ICO. Ele não cria um favicon vetorial ou animado.
Gerador de favicon
Transforme uma imagem em um ZIP com um ICO de vários tamanhos, cinco ícones PNG e um manifesto web. Use o exemplo de instalação abaixo para referenciar os arquivos no seu site.
Você também pode precisar:Gerador de ícones de aplicativo·PNG para ICO·Redimensionador de Imagem·Comprimir Imagem·Ver todas as ferramentas
Arquivos do pacote de favicon
O download é favicon-package.zip, com sete arquivos. O HTML é um exemplo de instalação deste artigo, não um arquivo incluído no ZIP.
| Arquivo | Dimensões ou conteúdo | Uso |
|---|---|---|
| favicon.ico | 16×16, 32×32 e 48×48 em um arquivo | Ícone do site em vários tamanhos. |
| favicon-16x16.png | 16×16 | Ícone pequeno do navegador. |
| favicon-32x32.png | 32×32 | Ícone maior do navegador. |
| apple-touch-icon.png | 180×180 | Referência de ícone para a tela inicial da Apple. |
| android-chrome-192x192.png | 192×192 | Ícone referenciado pelo manifesto web. |
| android-chrome-512x512.png | 512×512 | Ícone maior referenciado pelo manifesto web. |
| manifest.json | Nome do site, cores e duas referências de ícones | Manifesto inicial para revisar e adaptar ao seu site. |
Entradas: PNG, JPG/JPEG, WebP, GIF ou SVG. As saídas são ICO e PNG estáticos; enviar um SVG não cria um favicon SVG.
Gere e instale os arquivos do favicon
1
Escolha uma imagem reconhecível
Envie um desenho simples. Uma imagem quadrada de pelo menos 512×512 pixels ajuda na maior saída PNG; aumentar o tamanho não corrige um desenho pouco claro.
2
Gere e baixe o ZIP
Clique em Gerar pacote de favicon e baixe o ZIP quando estiver pronto. Extraia os arquivos antes de adicioná-los ao site.
3
Revise o manifesto e publique os arquivos
Edite o nome e as cores padrão de manifest.json conforme necessário. Coloque os arquivos em URLs públicas do site e ajuste os caminhos se usar uma subpasta.
4
Adicione as referências HTML e confira
Use o exemplo abaixo na seção head da página. Confirme que as URLs dos ícones e do manifesto abrem e confira o ícone no navegador.
Adicione os ícones ao site
Este exemplo pressupõe que os arquivos sejam servidos na raiz do site. Adicione as referências ao head da página e ajuste os caminhos à sua publicação.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Confira estes pontos antes de publicar:
| Verificação | O que fazer |
|---|---|
| Caminhos públicos | A barra inicial indica a raiz do site. Se usar uma subpasta, atualize tanto os href do HTML quanto os src dos ícones em manifest.json. |
| Valores do manifesto | name e short_name são gerados como My Website; theme_color e background_color são #ffffff. Revise após baixar. Esses valores não mudam as cores das imagens dos ícones. |
| Configuração existente | Confira se o tema ou framework declara outros ícones. Evite manter referências ao favicon antigo junto da configuração nova. |
Um manifesto com ícones não é uma aplicação web completa, instalável ou offline. Este gerador não fornece um service worker nem garante a instalação em todos os dispositivos.
Deixe o ícone reconhecível em tamanhos pequenos
🔎
Confira o resultado de 16×16
Letras pequenas e traços finos podem desaparecer. Prefira uma marca simples, bom contraste e espaço ao redor do elemento principal.
↔
Confira o formato e as bordas livres
Imagens não quadradas são ajustadas a uma tela quadrada com preenchimento transparente. Imagens pequenas podem ser ampliadas. Prepare uma imagem quadrada se precisar de enquadramento preciso.
Escolha a saída para a sua tarefa
Esta página cria arquivos favicon a partir de uma imagem existente; não é uma ferramenta para desenhar logotipos.
Precisa só de um arquivo ICO?
Use PNG para ICO para converter um PNG em ICO sem gerar o pacote do site.
Está desenvolvendo um aplicativo nativo?
Use Gerador de Ícones de Aplicativos para imagens de aplicativos iOS/Android nativos. Elas têm uma função diferente dos favicons de sites.
As imagens são enviadas para processamento no servidor. Baixe o ZIP quando estiver pronto; os temporários seguem a limpeza do serviço.
Dúvidas sobre a instalação do favicon
Confira primeiro as URLs publicadas e as declarações de ícones da página. O navegador pode manter o favicon em cache; teste uma nova sessão depois de confirmar que o site aponta para os arquivos novos.
O formulário atual só seleciona uma imagem. Edite name, short_name, theme_color e background_color no manifesto baixado e mantenha o theme-color do HTML consistente.
Não. Ele fornece ícones e um manifesto inicial. Instalação e funcionamento offline exigem configuração adicional do site; o pacote não acrescenta esses recursos automaticamente.
Crie os arquivos de favicon do site
Escolha uma imagem, gere o ZIP e revise os caminhos de instalação.