Gerando favicon automaticamente em 2025

Favicon Generator

Depois de ver Como preparar um favicon em 2025, resolvi criar uma ferramenta que gera automaticamente um favicon de acordo com o conteúdo do artigo.

Experimentar

Como usar

1. Envie uma imagem SVG com proporção quadrada.
2. Inclua no projeto o código HTML gerado e os arquivos de imagem baixados.
3. Pronto.

Detalhes

• ✅ O arquivo SVG é otimizado com SVGO.

• ✅ O arquivo ICO inclui imagens de 16px e 32px.

• ✅ São geradas imagens PNG de 180px, 192px e 512px.

• ❌ Os arquivos PNG não são comprimidos com Squoosh.

Impressões

Trabalhei nisso junto com o GPT; ele fez bem a UI, mas deu bastante problema na parte de importar módulos externos. Nessa parte, uma pessoa precisou intervir.
Ele também não conseguiu criar o arquivo ICO, então tive que abrir uma nova conversa separada e gerar o código novamente.

Fazia tempo que eu não criava algo assim, então foi bem divertido.

[honglu]

Achei bem útil! Obrigado.

[hi098123]

Para comprimir PNG, em vez de usar o Squoosh,
você pode usar o UPNG https://github.com/photopea/UPNG.js, e deve dar para fazer a compressão sem muita dificuldade no código atual.
(Quando comparei antes, lembro que no caso de PNG o desempenho e a taxa de compressão eram parecidos ou o UPNG tinha uma leve vantagem. Não tenho certeza.)
É possível definir a compressão com o valor cnum de 0 a 256, e algo em torno de 128 deve comprimir de forma razoavelmente boa.

[secret3056]

Acho que seria bom acrescentar a informação de que a criação do mask icon precisa ser feita manualmente, removendo a cor.

[secret3056]

Ah, então mask icon não é mais usado agora....

[xguru]

Uau, que legal. Pelo texto, é um projeto para criar isso na hora junto com IA, haha. Acho que é assim que o mundo está mudando.

[huiya]

Como o trabalho braçal diminuiu, parece que a carga das tarefas ficou menor. Que mundo maravilhoso!