Gere tags HTML para favicon e Apple touch icon

Ele cria uma referência de favicon para cada recurso informado e acrescenta automaticamente uma referência Apple touch icon. O resultado é determinístico, protege os valores dos atributos e fica pronto para você inserir em um template, site estático, sistema de conteúdo ou layout de aplicativo.

Prepare um inventário preciso de ícones

Comece pelos arquivos de ícone que seu site já publica. Adicione uma linha para cada recurso, informando as dimensões em pixels no formato LARGURAxALTURA e o caminho público ou a URL. Conjuntos comuns para navegadores incluem arquivos quadrados pequenos para abas e favoritos, enquanto uma imagem quadrada maior é útil quando um dispositivo salva o site na tela inicial. Os caminhos podem ser relativos ao site, como /assets/icons/favicon-32.png, ou URLs absolutas fornecidas por um serviço de ativos. Cada tamanho deve aparecer apenas uma vez, pois dois arquivos concorrentes declarados com dimensões idênticas tornam a seleção ambígua. O gerador valida todas as linhas antes de produzir a marcação; assim, caminhos vazios, dimensões malformadas, tamanhos repetidos e extremos não suportados viram erros claros de entrada, em vez de tags quebradas. A ferramenta não consulta o sistema de arquivos nem baixa imagens, portanto considera as dimensões uma declaração explícita sua. Confirme se cada caminho estará acessível publicamente após a implantação e se as dimensões reais da imagem correspondem ao tamanho informado.

Entenda como as tags são escolhidas e ordenadas

Para cada ícone fornecido, o resultado inclui um elemento link com rel definido como icon, um valor sizes normalizado em letras minúsculas e um href protegido. As tags do navegador são ordenadas da menor área em pixels para a maior, com critérios determinísticos de desempate. Dessa forma, o mesmo conjunto lógico sempre produz a mesma saída, mesmo quando as linhas chegam em outra ordem. O Apple touch icon é escolhido separadamente. Um recurso quadrado de exatamente 180x180 tem preferência, pois esse tamanho é muito usado para ícones de toque. Se ele não existir, o maior ícone quadrado será selecionado; se não houver recurso quadrado, o maior item fornecido será usado por uma regra de contingência explícita. O arquivo escolhido continua na lista comum do navegador, e outro elemento link o identifica com rel igual a apple-touch-icon. O escape de atributos protege e comerciais, aspas e sinais angulares nos caminhos sem alterar o destino interpretado pelo HTML. Nenhum tipo MIME é deduzido pela extensão, evitando uma declaração incorreta em rotas transformadas ou sem extensão.

Insira e confira a marcação gerada

Copie o valor html retornado para o head do template compartilhado que atende todas as páginas públicas. Se você usa um framework, coloque-o no layout raiz ou no template de metadados, em vez de repeti-lo em cada rota. O array tags contém as mesmas linhas como strings separadas quando um script de build precisa de valores estruturados; icon_count e apple_touch_size facilitam verificações automatizadas. Depois da implantação, abra o código-fonte da página gerada e confirme se os valores href são resolvidos a partir da origem pública final. Um caminho relativo ao site iniciado por barra é resolvido desde a raiz do domínio; um caminho relativo sem barra usa a localização do documento e pode se comportar de maneira diferente em rotas aninhadas. Ao verificar substituições, limpe o cache do navegador ou use uma janela privativa, porque o cache de favicon costuma ser especialmente persistente. Teste também a adição do site à tela inicial de um celular se essa experiência for relevante. Esta ferramenta escreve somente referências: ela não cria imagens, altera um manifesto web, envia ativos nem confirma o tipo de conteúdo devolvido pelo servidor.