Gerador de favicons
Crie um pacote completo de favicon com SVG, PNG ou JPG
Transforme um logotipo SVG, PNG ou JPG em favicon.ico, PNGs para navegador, ícone Apple Touch, ícones Android Chrome, site.webmanifest e tags HTML prontas para colar. Baixe o pacote completo em ZIP, gerado de forma privada no navegador.
A editar predefinições para novos ficheiros
Adicione um logo para vê-lo em todos os tamanhos de favicon.
Saída
head-tags.html
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Coloque todos os arquivos, menos o index.html, na pasta de onde seu site é servido, depois cole estas tags no head de todas as páginas.
Ainda não há arquivos. Solte arquivos acima ou clique em SELECIONAR ARQUIVOS.
O que é um favicon?
Um favicon é o pequeno ícone que o navegador mostra ao lado do título de uma página: na aba, nos favoritos, no histórico e nos resultados de alguns mecanismos de busca. Ele começou como um único favicon.ico de 16 × 16 na raiz do site. Hoje o mesmo trabalho é feito por um conjunto de arquivos em tamanhos diferentes, porque uma aba do navegador, um atalho na tela inicial e um aviso de instalação desenham o ícone em escalas muito diferentes.
Por que um pacote de favicons em vez de um arquivo só
Um favicon.ico sozinho ainda funciona, mas já não basta por si só. As abas do navegador leem a entrada de 16 ou 32 px de dentro do .ico, o Safari pede um apple-touch-icon de 180 px quando a página é adicionada à Home Screen, e o Android Chrome lê os PNGs de 192 e 512 px a partir de um manifesto web para o aviso de instalação e a splash screen. Exportar tudo isso um de cada vez são seis exportações, seis chances de recortar algo de um jeito diferente, e um manifesto escrito à mão. Gerar todos a partir de uma mesma origem mantém cada tamanho idêntico e custa apenas soltar um arquivo.
Como gerar um pacote de favicons
- 1
Solte o seu logo, ou clique em SELECIONAR ARQUIVOS, para adicioná-lo. SVG, PNG, JPG, WebP, GIF, BMP, AVIF e TIFF funcionam, até 40 por vez.
- 2
Defina o fundo, o raio dos cantos, o padding, a escala e o alinhamento, depois digite o nome do app e o nome curto que vão para o manifesto. Todos os tamanhos são redesenhados conforme você muda as opções.
- 3
Clique em SALVAR TUDO para baixar o favicon-package.zip, depois cole as quatro tags link da aba HTML no head de todas as páginas.
Privacidade: seus arquivos não saem do navegador
A conversão é executada localmente em seu navegador usando JavaScript e WebAssembly. Não há upload de arquivos ou conversão no servidor, portanto, os arquivos adicionados permanecem no seu dispositivo.
O processamento local ajuda a proteger logotipos confidenciais, documentos internos e obras de arte não divulgadas de clientes. As páginas e o código de conversão são armazenados em cache à medida que você os utiliza, para que as ferramentas que você já abriu possam continuar funcionando sem uma conexão de rede.
Perguntas frequentes
Quais arquivos eu recebo, e onde eles ficam?
favicon.ico (com 16, 32 e 48 px dentro de um mesmo arquivo), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest e um index.html com as tags. Copie tudo, menos o index.html, para a pasta de onde seu site é servido, depois cole as quatro tags link no head de todas as páginas.
Posso usar um logo PNG ou JPG em vez de um SVG?
Pode. SVG, PNG, JPG, WebP, GIF, BMP, AVIF e TIFF funcionam. Um SVG ainda é a melhor origem, porque cada tamanho é desenhado a partir dos vetores em vez de ser reamostrado. Um logo raster menor que 512 px é ampliado para os ícones maiores e vai ficar borrado; a linha do arquivo avisa quando isso acontece.
Ainda preciso do favicon.ico se eu publicar ícones PNG?
Mantenha o arquivo. É ele que navegadores e rastreadores pedem na raiz do site quando nenhuma tag aponta para outro lugar, e é o único que carrega vários tamanhos num único arquivo. As entradas PNG cobrem os navegadores que as preferem, e o manifesto cobre o aviso de instalação do Android.