Gerador de Favicon
Gera PNG de favicon em todos os tamanhos padrão e um ficheiro .ico multirresolução a partir de qualquer imagem, inteiramente no teu navegador.
A carregar Gerador de Favicon… Se nada acontecer, ativa o JavaScript.
Um favicon é o pequeno ícone que um navegador mostra ao lado do título de uma página na barra de separadores, na barra de marcadores e na lista do histórico. O nome é uma contração de favorite icon (ícone favorito), um termo que remonta ao Internet Explorer 5 em 1999, quando a Microsoft introduziu o suporte para um ficheiro chamado favicon.ico na raiz do site. Duas décadas e meia depois, o humilde favicon cresceu até se tornar uma pequena família de recursos: um clássico .ico multitamanho para os navegadores de secretária mais antigos, um conjunto de PNG para os navegadores modernos, um apple-touch-icon de 180x180 para os ecrãs iniciais do iOS, e PNG de 192x192 e 512x512 referenciados a partir de um manifesto de aplicação web para Android e para as aplicações web progressivas instaláveis.
Perguntas frequentes
A minha imagem é enviada para algum lado?
Que tamanhos produz o gerador e porquê?
Pode um ficheiro .ico conter realmente dados PNG?
Que imagem de origem devo usar para o melhor favicon?
Como adiciono os favicons gerados ao meu site?
Porque é que o meu favicon parece desfocado ou pixelizado?
A ferramenta mantém a transparência da imagem?
Porque é que o meu favicon não está a atualizar no navegador?
Sobre Gerador de Favicon
Este gerador pega numa única imagem de origem e produz todos esses tamanhos de uma só vez. Desenha a tua imagem em telas HTML a 16, 32, 48, 180, 192 e 512 pixéis, mantendo a proporção e centrando a ilustração dentro de cada quadrado, e depois codifica cada uma como um PNG nítido que podes descarregar individualmente. Também monta um ficheiro .ico real que agrupa as versões de 16, 32 e 48 pixéis num único contentor, para que um navegador possa escolher a resolução de que precisa. Os ficheiros .ico modernos podem incorporar entradas comprimidas em PNG em vez de mapas de bits em bruto, e é exatamente isso que esta ferramenta escreve, produzindo um ícone mais pequeno e mais nítido do que o antigo formato BMP sem compressão.
Tudo acontece localmente dentro do teu navegador usando a API Canvas e a API Blob. A tua imagem nunca é enviada para um servidor, não há qualquer conta para criar e não há nenhuma fila onde esperar. Isso torna a ferramenta segura para logótipos inéditos, trabalho de clientes sob acordo de confidencialidade e qualquer ilustração que prefiras não entregar a um serviço de terceiros. Assim que a página tiver carregado, também funciona sem ligação à internet, e os ficheiros gerados são produzidos instantaneamente no teu próprio dispositivo.
Para o melhor resultado, parte de uma origem quadrada e de alta resolução, idealmente de 512x512 ou maior, com um fundo transparente ou sólido e formas marcadas e simples. O detalhe fino e as linhas finas desaparecem a 16 pixéis, por isso os favicons que se leem bem são quase sempre versões simplificadas de um logótipo completo. Testa as pré-visualizações de 16 e 32 pixéis ao seu tamanho real antes de publicar, porque é assim que a maioria dos utilizadores irá realmente ver o teu ícone numa fila apinhada de separadores do navegador.
De um único ficheiro escondido a todo um ecossistema de ícones
O favicon nasceu em março de 1999 com o Internet Explorer 5. A implementação da Microsoft foi silenciosamente engenhosa e um pouco invasiva: o navegador pedia automaticamente um ficheiro chamado favicon.ico a partir da raiz de qualquer site que adicionasses aos marcadores, sem necessidade de marcação. Os administradores web descobriram a funcionalidade ao reparar em pedidos misteriosos desse nome de ficheiro nos registos do seu servidor. Como o pedido ocorria apenas ao adicionar aos marcadores, uma métrica extraoficial inicial da popularidade de um site era contar os acessos a favicon.ico.
A especificação original ligava os favicons ao contentor ICO do Windows, um formato herdado do Windows 3.0 que pode albergar várias imagens de diferentes tamanhos e profundidades de cor dentro de um único ficheiro. Durante anos, essas entradas foram mapas de bits BMP sem compressão, o que tornava os ícones de alta resolução surpreendentemente grandes. O Windows Vista mudou isso ao permitir entradas comprimidas em PNG dentro do mesmo contentor, e a web padronizou-se em favicons PNG referenciados através de etiquetas link rel=icon, libertando os designers das restrições do antigo formato e mantendo ao mesmo tempo o .ico vivo por compatibilidade com versões anteriores.
A era móvel multiplicou os requisitos. A Apple introduziu o apple-touch-icon para que uma página adicionada aos marcadores pudesse ficar no ecrã inicial do iOS com o aspeto de uma aplicação nativa. O Android e a especificação do manifesto de aplicação web acrescentaram ícones de 192 e 512 pixéis para as aplicações web progressivas instaláveis e os ecrãs de boas-vindas. O que começou como um único ficheiro escondido de 16x16 tornou-se um pequeno sistema de design por direito próprio, e gerar o conjunto completo à mão num editor de imagens é exatamente a tarefa tediosa e repetitiva que uma ferramenta baseada no navegador foi pensada para te tirar das mãos.