Ícones SVG vs ICO

SVG é o futuro; ICO é a base. Publique ambos.

4 min de leitura

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

Por que SVG vence nos navegadores modernos

Um arquivo, escalável infinitamente, com suporte a media queries de modo escuro. Peso típico: menos de 2 KB.

Por que ICO ainda é essencial

Navegadores antigos, atalhos do Windows e alguns embeds só leem .ico. Omiti-lo produz um ícone quebrado para cerca de 5 % dos usuários.

Use os dois juntos

Vincule favicon.ico primeiro como fallback universal, depois adicione <link rel="icon" type="image/svg+xml"> para navegadores que suportam.

Perguntas frequentes

Should I use SVG or ICO for a favicon?

Use both. Link favicon.ico as the universal fallback, then add <link rel="icon" type="image/svg+xml"> for scalable rendering on modern browsers.

Does SVG work in every browser?

Most modern browsers support SVG favicons, but older browsers and some embedders still need .ico. Never ship SVG alone.

Can an SVG favicon support dark mode?

Yes. Embed a <style>@media (prefers-color-scheme: dark) { ... }</style> block inside the SVG file.

Guias relacionados

Experimente as ferramentas

Continuar lendo