Guias de favicon
Respostas concretas às dúvidas que surgem ao criar um favicon: que tamanhos, que formatos e que código colar.
Tamanhos de favicon: formatos e utilizações
Pesquisar «tamanho favicon» ainda devolve listas de quinze ficheiros herdadas de 2014. Na prática, seis dimensões bastam hoje para abranger separadores, resultados de pesquisa, iOS, Android e PWA. Saiba quais e porquê.
Ler o guiaConverter PNG para ICO, gratuitamente
O .ico continua a ser o formato esperado na raiz de um site, e a maioria dos conversores online pede que envie a imagem para um servidor. Saiba como obter um favicon.ico correto, com vários tamanhos, a partir de um PNG, sem enviar nada.
Ler o guiaapple-touch-icon: tamanho, formato e código
O ícone Apple Touch fornece explicitamente a imagem usada quando um visitante adiciona o seu site ao ecrã principal do iPhone. É distinto do favicon do separador e dos ícones declarados no manifesto web.
Ler o guiaFavicon em modo escuro com SVG
Um logótipo preto sobre fundo transparente fica perfeito num separador claro e invisível num separador escuro. O formato ICO não se adapta, mas o favicon SVG pode fazê-lo: inclui uma regra CSS que altera as cores conforme o tema do navegador.
Ler o guiaAdicionar um favicon em HTML
Um favicon HTML fiável depende de um pequeno conjunto de ficheiros acessíveis e ligações no head, não de uma etiqueta mágica. Este procedimento abrange separadores modernos, clientes antigos e atalhos móveis sem multiplicar variantes históricas.
Ler o guiaFavicon ausente ou desatualizado
Quando falta um favicon, nem sempre o ficheiro é a causa. O navegador, uma CDN, um service worker e um motor de pesquisa podem guardar versões diferentes. Um diagnóstico ordenado evita alterar vários elementos ao mesmo tempo.
Ler o guiaFavicons com Next.js App Router
O App Router pode produzir as etiquetas de ícones a partir de ficheiros convencionais ou do objeto metadata. As duas abordagens são válidas, mas misturá-las sem uma regra clara cria facilmente declarações concorrentes.
Ler o guiaGuia do favicon SVG
O SVG mantém contornos nítidos em todas as densidades e pode adaptar as cores ao tema. Esta flexibilidade tem uma condição: o ficheiro deve continuar autónomo, simples e legível num espaço minúsculo.
Ler o guia