Gerador de favicon
Apple touch icon 180x180: gerar PNG e tag link
Gere o apple-touch-icon.png de 180x180 para a tela inicial do iPhone, com a tag link pronta e o restante do favicon junto.
Muda de cor no modo escuro
Todas as fontes do Google
Feito no seu navegador, sem cadastro
Iniciais
2 / 3
De 1 a 3 caracteres. Duas letras leem melhor na aba.
Fonte
1.966 fontes do Google
O selo mostra a espessura do traço na aba de 16 px. As recomendadas já vêm medidas; as outras são medidas quando você escolhe.
Peso
Tamanho das letras
64%
Forma
Modo claro
Modo escuroNa aba do navegador
simulação do Chrome
Meu projeto — PainelMeu projeto — PainelEm pixels de verdade
traço de 1,3 px em 16 px
O pacote
36,7 KB no total
favicon.svgO principal. Nítido em qualquer tamanho e muda no modo escuro.877 Bfavicon.ico16, 32 e 48 px, para quem não lê SVG.2,9 KBapple-touch-icon.png180 px, na tela inicial do iPhone, sempre com fundo.5,7 KBicon-192.pngAndroid e app instalado.6,1 KBicon-512.pngTela de abertura do app instalado.20,9 KBsite.webmanifestDeclara os dois PNGs acima.297 BUse no seu assistente de IA
Adicione como servidor MCP.
https://mcp.tools.ciromaciel.click
Onde colocar
Cada arquivo no lugar certo
Escolha o seu framework. Os passos mudam; os arquivos são os mesmos.
Copie os seis arquivos para a raiz do site.
Cole as tags no <head> de cada página.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Como funciona
Pequeno, nítido e do seu jeito
Todas as fontes do Google
As letras vão desenhadas dentro do arquivo, em contorno. Um favicon é carregado como imagem, e imagem não busca fonte: assim o ícone fica igual em qualquer máquina.
Emoji como ícone
Escolha qualquer emoji do Twemoji. Ele vai em vetor para o SVG e em pixels para o ICO e os PNGs, com a margem e o fundo que você quiser.
A sua imagem
Um SVG continua vetor e ganha a forma e a margem. Uma foto ou PNG vira o ICO e os PNGs, cortada ou inteira, sem sair da sua máquina.
Muda no modo escuro
O SVG traz uma regra que troca as cores quando o sistema ou o navegador está no modo escuro. Sem JavaScript no seu site.
O pacote completo
SVG, ICO com 16, 32 e 48 px, o ícone de 180 px do iPhone, os de 192 e 512 px do Android e o manifesto que os declara.
Visto em 16 px antes de baixar
A prévia mostra os pixels de verdade da aba, e a página avisa quando um traço fica fino demais ou as cores somem no fundo.
Perguntas
Antes de pôr no ar
Suporte
Algo não saiu como esperado, aqui ou no seu assistente de IA? Fale direto comigo. Mande o que você tentou fazer, o link do favicon (botão Copiar link) e um print, se der. Pedidos sobre os seus dados pessoais vão pelo mesmo canal.
Quem faz
Feito por quem usa todo dia.
Faço software há mais de vinte anos. Hoje construo os blocos que uma ideia precisa para existir de verdade.
Uso todo dia as ferramentas que construo. Se quebrar para você, quebrou para mim antes.
Ciro Cesar Maciel
Atalhos