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.
Construir um quadrado com viewBox
Use um viewBox quadrado, por exemplo 0 0 64 64, e deixe uma margem à volta do símbolo. O viewBox define o sistema de coordenadas sem impor uma dimensão física à apresentação.
Reduza o desenho às suas formas distintivas. Os pormenores finos, pequenos espaços interiores e palavras completas desaparecem frequentemente a 16 píxeis, mesmo que o ficheiro vetorial continue tecnicamente nítido.
| Aspeto | Motivo | Teste |
|---|---|---|
| viewBox quadrado | Recorte previsível | Pré-visualização 16×16 |
| Traçados simples | Legibilidade | Separador claro e escuro |
| Sem dependências | Carregamento autónomo | Sem ligação à rede |
| Alternativa ICO | Clientes antigos | URL da raiz |
Tornar o ficheiro autónomo
Inclua os estilos necessários no SVG. Converta o texto em traçados se o símbolo depender de uma tipografia, pois um tipo de letra web externo não é uma dependência fiável neste contexto.
Remova scripts, ligações remotas e metadados desnecessários do editor. Formas e estilos simples também facilitam a auditoria de segurança e reduzem o tamanho do ficheiro.
Por fim, abra o ficheiro sozinho no navegador e teste-o sem ligação à Internet. Se o desenho mudar ou desaparecer, ainda depende de um recurso externo que deve ser incluído ou substituído.
Declarar o SVG com uma alternativa
Adicione link rel icon com type image/svg+xml e um URL relativo à raiz. Mantenha também favicon.ico na raiz para os clientes que não selecionam o SVG ou que pedem diretamente o ICO.
O SVG não substitui o ícone Apple Touch nem os ícones do manifesto. Exporte PNG opacos ou maskable adaptados a essas interfaces.
Adaptar as cores ao tema
Uma regra prefers-color-scheme numa etiqueta style pode alterar fill ou stroke no modo escuro. Defina primeiro uma cor predefinida robusta e adicione depois a variante como melhoria progressiva.
Teste o ficheiro em separadores reais e com vários níveis de zoom. Verifique também a alternativa quando o SVG não é escolhido: um ICO invisível sobre fundo escuro continua a ser um problema nesses clientes.
Fontes primárias
Perguntas frequentes
Um SVG precisa de largura e altura?
Um viewBox quadrado é o elemento essencial para o redimensionamento. Pode acrescentar largura e altura explícitas, mas o navegador dimensiona o ícone consoante o contexto.
É possível carregar um tipo de letra externo?
Não conte com isso. Converta as letras em traçados para obter um ficheiro autónomo e previsível.
O SVG basta para iOS?
Não. Forneça separadamente um ícone Apple Touch em PNG opaco para o ecrã principal.