Guia Completo de Especificação de Configuração para Favicon de Site Frontend

Um ficheiro ICO standard suporta a incorporação de múltiplos mapas de bits de tamanhos diferentes num único contentor, e a configuração comum inclui três tamanhos: 16×16, 32×32 e 48×48. Diferentes cenários de utilização correspondem automaticamente ao tamanho adequado: 16×16 é utilizado para barras de separadores de navegadores, 32×32 para barras de marcadores e 48×48 para atalhos de ambiente de trabalho.

O armazenamento de múltiplos tamanhos em ficheiros ICO segue a especificação do formato ICO, cada tamanho corresponde a um bloco de dados de mapa de bits independente, e o navegador lê o mapa de bits do tamanho correspondente de acordo com o cenário de renderização atual, pelo que não é necessário gerar vários ficheiros independentes. Navegadores IE mais antigos suportam apenas a leitura de favicons no formato ICO, pelo que manter favicon.ico no diretório raiz garante compatibilidade com acesso a partir de versões antigas.

Navegadores modernos como Chrome, Firefox e Edge suportam todos favicons no formato PNG. O método de declaração utiliza a etiqueta link para adicionar o atributo de tamanho correspondente, e a configuração principal requer duas especificações: 32×32 e 192×192. 32×32 corresponde à renderização de barra de separadores de alta resolução em navegadores modernos, e 192×192 é utilizado para ícones de aplicações PWA nativas em Android.

O código de declaração standard é <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> e <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">. Os navegadores selecionam automaticamente o tamanho correspondente para carregar de acordo com o cenário.

Alguns navegadores modernos suportam favicons no formato SVG. O SVG pode obter adaptação de cor sob diferentes temas através de consultas de mídia incorporadas para se adaptar à mudança de modo escuro do sistema. O princípio da adaptação SVG é adicionar uma consulta de mídia para prefers-color-scheme no código SVG, e definir a cor de preenchimento do ícone para os modos claro e escuro, respetivamente.

Para declarar um favicon SVG, utiliza-se type="image/svg+xml" para especificar o formato do ficheiro. Tem uma prioridade mais alta que ICO e PNG tradicionais, e os navegadores carregam o formato SVG primeiro. Os desenvolvedores podem usar um conversor de SVG para ICO para converter o SVG adaptado editado para o formato ICO para ser compatível com mais cenários de acesso.

O Apple iOS fornece um ícone dedicado para páginas web adicionadas ao ecrã inicial, nomeadamente apple-touch-icon. A especificação atual requer um ícone PNG de 180×180. Versões antigas suportavam declarações de vários tamanhos diferentes, e o iOS 12 e versões posteriores priorizam o tamanho 180×180 para corresponder a todos os dispositivos Apple.

O código de declaração standard é <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">. Não é necessário adicionar o atributo size, e o sistema iOS reconhece automaticamente o tamanho 180×180 para adaptação. Os cantos arredondados e efeitos de destaque são processados automaticamente pelo sistema iOS, e os desenvolvedores não precisam de pré-processar os cantos arredondados.

As aplicações PWA precisam de configurar o ficheiro manifest.json para declarar informações básicas da aplicação, que precisa de incluir um campo icon com o tamanho correspondente, declarando um ícone de aplicação de 512×512 para cumprir os requisitos de instalação de PWA. O theme-color precisa de ser declarado tanto na etiqueta meta como no manifest, e é utilizado para a correspondência da cor do tema da barra de endereço do navegador.

Para uma configuração completa, adicione <meta name="theme-color" content="#ffffff">, e adicione um campo com o mesmo nome em manifest.json, mantendo o valor consistente com a etiqueta meta, para se adaptar à lógica de renderização da barra de endereço de diferentes navegadores.