Gerador de favicon e ícones de app (PNG, ICO, manifest)
Transforma uma imagem ou uma ou duas letras em um conjunto completo de favicon e ícones de app de 16 a 512 px, com ICO, apple-touch-icon e um trecho de manifest, salvo em zip. Nada sai do seu navegador
Carregando a ferramenta…
Cria um conjunto completo de favicon e ícones de app a partir de um logotipo ou de uma ou duas letras: todos os tamanhos de 16 a 512 px, um favicon.ico, um apple-touch-icon e um manifest em um único download, para um site novo ou um app adicionado à tela inicial.
Como usar
- Em "Criar a partir de", escolha "Letras" ou "Imagem". Digite um ou dois caracteres em "Letras", ou solte um arquivo de imagem ou pressione "Carregar exemplo".
- Ajuste "Forma do fundo", "Cor de fundo" e "Margem interna"; a prévia é atualizada na hora. Imagens também aceitam "Fundo transparente".
- "Nome do app ou do site" e "Nome curto" entram no site.webmanifest. Para Android, ative "Criar também ícones mascaráveis".
- Pressione "Salvar como zip", envie os arquivos para a raiz do site e copie o "Trecho para o head do HTML" para dentro do elemento head.
Como funciona
- Primeiro é desenhado um original de 512 px, reduzido pela metade em etapas até os PNGs de 16, 32, 48, 180, 192 e 512 px, para que linhas finas continuem nítidas nos tamanhos pequenos.
- O favicon.ico contém os PNGs de 16, 32 e 48 px dentro do contêiner ICO; os navegadores atuais leem os dados PNG de um ICO diretamente.
- Um ícone mascarável mantém o conteúdo dentro da zona segura central de 80%, assim o Android pode recortá-lo em círculo ou quadrado arredondado sem cortar nada.
- Imagens e texto são processados apenas neste navegador e nunca enviados. As configurações ficam neste navegador para a próxima visita.
Perguntas frequentes
- Qual deve ser o tamanho de um favicon?
- Abas do navegador usam 16 e 32 px, atalhos 48 px, a tela inicial do iPhone 180 px, e instalações Android ou PWA 192 e 512 px. Esta página cria os seis de uma vez.
- Ainda preciso de um arquivo .ico?
- Ele ajuda navegadores antigos e clientes que pedem /favicon.ico automaticamente. Links PNG também são incluídos, então navegadores atuais preferem os arquivos PNG.
- Qual fonte é usada nos ícones de letras?
- Uma fonte do sistema instalada no seu dispositivo, da família escolhida. Outro dispositivo pode desenhar a mesma família com uma fonte diferente.
- O ícone pode ter fundo transparente?
- Sim, com imagens: ative "Fundo transparente" e o fundo do PNG fica vazio. Ícones de letras sempre têm cor de fundo.