Conversor de favicon

Crie, a partir de uma única imagem raster, os arquivos necessários para adicionar um favicon a um site. Escolha como a imagem de origem deve se ajustar à tela quadrada, defina o fundo e baixe um ZIP com um ICO em vários tamanhos, sete ícones PNG, um manifesto de aplicativo web, a configuração de blocos do Windows e um trecho HTML pronto para copiar no cabeçalho. A conversão da imagem e a montagem do ZIP são feitas localmente no seu navegador.

Como converter uma imagem em um pacote de favicon

  1. 1

    Escolha uma imagem raster

    Selecione um PNG, JPEG ou WebP que respeite os limites exibidos de tamanho do arquivo e dimensões da imagem. Arquivos SVG, GIF e AVIF não são aceitos.

  2. 2

    Escolha o ajuste

    Use Cobrir para preencher o quadrado e cortar as bordas, ou Conter para manter a imagem inteira e adicionar espaço ao redor.

  3. 3

    Defina o fundo

    Escolha uma cor de fundo para os pixels transparentes e para o espaço criado no modo Conter. Depois, confira as prévias geradas.

  4. 4

    Baixe e instale

    Baixe o ZIP, coloque os arquivos de ícone e configuração no seu site e copie as tags de link fornecidas para o cabeçalho do documento.

Conteúdo do ZIP

Item do pacote Finalidade
favicon.ico Um contêiner ICO com versões de 16, 32, 48 e 256 px para navegadores e programas que solicitam o caminho tradicional do favicon
favicon-16x16.png PNG compacto para abas do navegador e outros espaços pequenos
favicon-32x32.png Ícone com maior densidade para abas e favoritos do navegador
favicon-48x48.png Tamanho adicional para área de trabalho e atalhos
mstile-150x150.png PNG de 150 × 150 referenciado pela configuração de blocos do Windows
apple-touch-icon.png PNG de 180 × 180 para links na tela inicial de dispositivos Apple
android-chrome-192x192.png Ícone de aplicativo de 192 × 192 referenciado pelo manifesto web
android-chrome-512x512.png Ícone de aplicativo de 512 × 512 referenciado pelo manifesto web
site.webmanifest Metadados JSON que indicam aos navegadores compatíveis os ícones de 192 e 512 px
browserconfig.xml Configuração de blocos do Windows que referencia os ícones gerados
favicon-head.html Tags prontas para copiar que conectam a página ao ICO, aos PNGs, ao ícone da Apple, ao manifesto e à configuração do navegador

Os arquivos ICO e PNG são separados de propósito. Navegadores e sistemas operacionais escolhem ícones de formas diferentes. Por isso, um pacote completo atende tanto à solicitação tradicional de /favicon.ico quanto às declarações explícitas de ícones modernos.

Tags HTML para o cabeçalho

O pacote baixado inclui um trecho neste formato:

<link rel="icon" href="/favicon.ico" sizes="any">
<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="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">

Se os arquivos estiverem em uma subpasta ou em um servidor de recursos separado, altere os caminhos antes de colar as tags em <head>. Mantenha os nomes de arquivo e os caminhos em site.webmanifest e browserconfig.xml de acordo com os arquivos publicados.

Cobrir, conter e escolher o fundo

  • Cobrir preenche completamente cada saída quadrada. Uma imagem larga ou alta é cortada de modo uniforme nas bordas opostas, então mantenha a parte importante do desenho perto do centro.
  • Conter mantém toda a imagem visível. O espaço não usado vira uma margem na cor de fundo selecionada.
  • Fundo pode continuar transparente ou usar uma cor sólida personalizada. No modo Conter, essa escolha também controla a cor da margem ao redor da imagem. Confira as prévias em fundos de página claros e escuros antes de publicar.

Para obter ícones pequenos mais nítidos, comece com uma imagem quadrada simples de pelo menos 512 × 512 pixels. Letras finas, traços muito delicados e pequenos detalhes podem desaparecer na versão de 16 px, mesmo quando a imagem de origem é grande.

Limites de entrada e instalação

Este conversor aceita somente imagens raster PNG, JPEG e WebP. Ele verifica a assinatura da imagem e rejeita SVG, GIF, AVIF e qualquer outro formato não listado. A imagem de origem pode ter até 20 MiB, nenhum lado pode ultrapassar 8.192 pixels e o total não pode exceder 24 megapixels. Os limites de dimensões são verificados antes de a imagem inteira ser decodificada.

Depois de baixar, extraia o ZIP e envie os arquivos gerados para os caminhos usados no trecho fornecido. Caminhos relativos à raiz, como /favicon.ico, pressupõem que os arquivos estejam disponíveis na raiz do domínio atual. Ao substituir um favicon existente, limpe o cache do site ou da CDN, pois os navegadores costumam guardar arquivos de ícone por mais tempo do que recursos comuns da página.

O manifesto incluído fornece metadados dos ícones, mas um manifesto e um conjunto de ícones, sozinhos, não tornam um site um aplicativo web progressivo instalável. A instalação também depende da página, da segurança do transporte e dos requisitos de cada navegador.

Perguntas frequentes

Você pode usar PNG, JPEG ou WebP. O conversor verifica a assinatura do arquivo em vez de confiar apenas no nome e rejeita SVG, GIF, AVIF e outros formatos.

Cobrir amplia a imagem até preencher o quadrado e corta partes iguais das bordas quando a proporção não é quadrada. Conter mantém a imagem inteira e preenche o espaço restante do quadrado com a cor de fundo selecionada.

ICO é um contêiner que pode armazenar vários tamanhos pequenos de ícone em um único arquivo favicon tradicional. Arquivos PNG separados oferecem a navegadores e plataformas recursos com tamanhos definidos para abas, links da tela inicial e ícones de aplicativos. Manter os dois melhora a compatibilidade na prática.

Não. O manifesto descreve os ícones de aplicativo gerados e os metadados de exibição relacionados, mas a possibilidade de instalação depende de requisitos adicionais do navegador e de como o site foi criado e é servido.

O trecho fornecido usa caminhos relativos à raiz, então a configuração mais simples é colocar os arquivos extraídos na raiz do domínio. Se você usar outra pasta ou um servidor de recursos, atualize o trecho e os caminhos no manifesto e na configuração do navegador.

Não. O processamento da imagem e a criação do ZIP ocorrem no seu navegador. No fluxo de várias etapas, um rascunho do IndexedDB pode manter a imagem neste navegador por até 30 minutos para transferi-la entre as etapas. Essa transferência local não é um envio ao servidor.

Ferramentas relacionadas