Ir para o conteúdo
TextArray1.87.0
Totalmente local

Gerador de HTML para favicon

Gera as etiquetas <head> necessárias para a favicon, ícone de toque e cores do tema de um site.

Saída
Ferramentas relacionadas
Gerador de metatagsFerramentas de desenvolvedor
Gerador de manifesto para aplicações webFerramentas de desenvolvedor
Gerador de humanos.txtFerramentas de desenvolvedor
diferença de chave i18nFerramentas de desenvolvedor
Conversor de TOML para JSONFerramentas de desenvolvedor
SQL para JSONFerramentas de desenvolvedor
Gerador de HTML para favicon
Uma favicon é mais do que um ficheiro: um separador do navegador precisa de um .ico, um ecrã inicial de telefone precisa de uma apple-touch-icon 180x180, o separador fixado do Safari precisa de uma máscara SVG monocromática, e um pedido de instalação de PWA lê os ícones listados no manifesto. Esta ferramenta escreve as etiquetas exatas <link> e <meta> para todos eles a partir de um caminho base e um conjunto de tamanhos de ícones, para que copie um bloco único para <head> em vez de montá-lo a partir de cinco especificações diferentes.
Defina o caminho base para onde os ficheiros de ícones vão estar — a raiz ou uma pasta como /icones/ — e cada href é construído contra ela. Alterne entre ICO, PNG e SVG de forma independente: PNG também adiciona a apple-touch-icon no tamanho fixo 180x180 que a Apple espera, e SVG adiciona uma mask-icon cuja cor provém da sua cor de tema clara (ou escura, se essa for a única definida). Uma cor de tema clara e escura tornam-se cada uma uma etiqueta <meta name="theme-color"> separada com uma consulta prefers-color-scheme, para que a cromática do navegador corresponda à página em qualquer modo. Um comutador separado adiciona as etiquetas msapplication mais antigas que alguns cenários de azulejo do Windows ainda leem.
O campo de tamanhos aceita uma lista separada por vírgulas ou linhas — "16x16, 32x32, 192x192" — e um número simples como "48" é uma abreviatura para um ícone quadrado; as entradas não reconhecidas são descartadas em vez de rejeitadas. Ative a lista de verificação de ficheiros e o resultado termina com um comentário listando cada caminho referenciado, por ordem, que é a lista a ser realmente carregada.
Tudo funciona no seu navegador: nada do que escreve é enviado para qualquer lugar. Copie o resultado para a secção <head> da sua página, descarregue-o como um ficheiro .txt ou envie-o para a entrada de outra ferramenta para continuar a ajustá-lo.
FAQ
Esta ferramenta cria os ficheiros de imagem de ícone reais?
Não. Apenas gera o HTML que os referencia — ainda precisa de exportar favicon.ico, os PNGs, favicon.svg e safari-pinned-tab.svg nos tamanhos que lista, utilizando um editor de imagem ou um exportador de ícones dedicado.
Por que a apple-touch-icon é sempre 180x180?
É o tamanho que a orientação própria da Apple especifica para o maior ícone de ecrã inicial do iPhone moderno; o iOS redimensiona-o para dispositivos mais antigos, portanto um ficheiro cobre o intervalo.
Que cor utiliza a mask-icon?
A sua cor de tema clara, ou a escura se deixou a clara em branco. O ícone de separador fixado do Safari é apresentado numa única cor plana que escolhe, não nas cores próprias da obra de arte.
Preciso das etiquetas de azulejo do Windows?
Apenas se ainda almejar fixação de azulejo do Windows/Edge antigo. A maioria dos sites pode deixar isto desativado — o Windows moderno utiliza o mesmo manifesto e ícones PNG como tudo o resto.
Algo que escrevo é enviado para algum lugar?
Não. O HTML é gerado inteiramente no seu navegador a partir das opções que define — nada é enviado para um servidor.