Para que serve cada formato
Um favicon não é um arquivo só. Navegadores, sistemas operacionais e ferramentas de favoritos procuram, cada um, um arquivo diferente, e o padrão HTML deixa uma página declarar vários e entrega a escolha ao navegador.
| Arquivo | Formato | Usado para |
|---|---|---|
favicon.ico |
ICO, vários bitmaps num só arquivo | A alternativa de segurança: sem nenhum link de ícone, os navegadores podem pedir /favicon.ico na raiz do site. Este pacote coloca imagens de 16, 32 e 48 px nele. |
favicon.svg |
SVG | Um único arquivo escalável para os navegadores que aceitam favicons SVG. Ele pode ter as próprias cores para o modo claro e o escuro. |
favicon-16x16.png, favicon-32x32.png |
PNG | Cópias raster do ícone da aba, para um criador de sites ou ferramenta que peça um favicon PNG. |
apple-touch-icon.png |
PNG, 180 × 180 px | A tela inicial do iPhone e do iPad, quando alguém adiciona o site a ela. |
site.webmanifest |
JSON | Nome, cores e os ícones de app para web apps instaláveis (veja o guia de ícones maskable para PWA). |
ICO é o formato mais antigo e ainda o mais lido. O padrão HTML descreve o pedido de /favicon.ico como algo que um navegador pode fazer quando a página não declara nenhum ícone, então trate-o como rede de segurança e inclua o link explicitamente mesmo assim. O MDN observa que um arquivo ICO pode guardar vários tamanhos, e é por isso que um único arquivo cobre 16, 32 e 48 px.
SVG é o único formato que continua nítido em qualquer tamanho e em qualquer densidade de pixels. Um bloco <style> dentro do SVG pode trocar as cores com prefers-color-scheme, para que uma marca escura continue visível numa barra de abas escura. O servidor precisa enviá-lo como image/svg+xml: o Can I use observa que os navegadores Chromium e o Firefox exigem esse tipo.
Favicons PNG são bitmaps simples, normalmente incluídos com um atributo sizes. O padrão diz que sizes é só uma indicação: o navegador pode usá-lo para escolher o arquivo mais próximo, mas nada o obriga. Isso tem dois lados, como mostra a próxima seção.
Que navegadores usam cada um
Compatibilidade com favicons SVG, pelos dados do Can I use consultados em 28 de setembro de 2026: Chrome e Edge a partir da versão 80, Firefox a partir da 41, Opera a partir da 67 e Safari a partir da 26.0, tanto no macOS quanto no iOS. O Safari 18 e anteriores não usam favicons SVG, então dependem dos arquivos PNG e ICO. A equipe do WebKit anunciou a mudança do Safari no post de lançamento do Safari 26.0, em setembro de 2025. Quem ainda usa um Safari mais antigo continua vendo os ícones raster, e é por isso que um favicon SVG nunca os substitui.
Quando uma página declara vários ícones, o padrão HTML diz que o navegador escolhe o que melhor lhe convém e, quando vários servem igualmente, vale o último declarado. Se um arquivo não puder ser usado, por exemplo por estar num formato que o navegador não lê, ele passa para o próximo. O "que melhor lhe convém" fica a critério do navegador: um que escolhe pelo tamanho declarado pode preferir um PNG marcado com sizes="32x32" a um SVG sem tamanho declarado, seja qual for a ordem. Por isso o trecho abaixo não inclui nenhum PNG com tamanho: o ICO cobre os tamanhos raster, e o SVG vem depois dele.
Um detalhe vem da prática, e não de um fabricante de navegador. O artigo de favicons da Evil Martians recomenda sizes="32x32" no link do ICO "para corrigir o bug do Chrome em que ele escolhe um arquivo ICO em vez de um SVG"; o histórico de mudanças do artigo diz que essa opção substituiu sizes="any" por esse motivo em julho de 2023. O artigo não aponta nenhum relato de bug do Chromium, e nós também não encontramos nenhum, então leia isso como experiência de campo. O gerador segue esse conselho. Não faz mal, já que o ICO tem mesmo uma imagem de 32 px.
Apple touch icon. O Safari Web Content Guide da Apple, hoje arquivado, documenta <link rel="apple-touch-icon"> e indica 180 × 180 px para iPhones com tela Retina. O MDN acrescenta que o iOS não usa os links comuns rel="icon" para os ícones da tela inicial. A documentação da Apple não diz o que acontece com pixels transparentes; uma resposta nos fóruns de desenvolvedores da Apple (de outro desenvolvedor, não da Apple) diz que eles aparecem pretos. Por isso o gerador sempre faz esse arquivo opaco, na cor de fundo que você escolher.
Cor de tema é a parte menos confiável. O Can I use não indica suporte a <meta name="theme-color"> no Firefox e diz que o Chrome para desktop só usa a cor em web apps instalados. O Can I use e o MDN dizem que, a partir do Safari 26, ela só vale para web apps instalados. As duas fontes discordam em detalhes sobre o Chrome no Android e o Safari no iOS 26. Inclua a tag, mas não baseie o design nela.
O antigo link mask-icon da Apple, para as abas fixadas do Safari, ainda aparece na documentação arquivada. Não encontramos nenhuma nota oficial que o aposente, nem nada que o exija. Este pacote não inclui esse link.
O conjunto mínimo que vale publicar
Para um site com arte vetorial, inclua os links de favicon.ico, favicon.svg e apple-touch-icon.png, além de um manifest com ícones de 192 e 512 px se o site for instalável. É o conjunto a que o artigo da Evil Martians chega. Os favicons PNG podem ficar no servidor para as ferramentas que pedirem um, sem tag de link. Para um site cujo logo só existe como bitmap, deixe o SVG de fora: um PNG embrulhado num arquivo SVG continua sendo um bitmap e não ganha nada com isso. Faça o traçado em caminhos vetoriais de verdade primeiro, se quiser um favicon SVG.
O trecho de HTML
Estas são as tags que o gerador grava em favicon.html para o pacote de exemplo abaixo, com os arquivos na raiz do site:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">
Se os seus arquivos ficam numa pasta como /assets/icons/, informe essa pasta como prefixo de caminho no gerador de favicon e todos os href mudam junto; copie também favicon.ico para a raiz do site, onde os navegadores o procuram nas páginas que não incluem nenhum ícone. Um PNG, JPG ou WebP como origem gera as mesmas tags, sem a linha do SVG.
Um exemplo real para baixar
Passamos a marca deste próprio site (um SVG do nosso repositório, não o envio de ninguém) pelo gerador de favicon com o nome "png2svg.art", cor de tema #0a2d8f, fundo #e8efff e 8 % de margem. Nada foi editado depois: estes são exatamente os arquivos que a ferramenta gera.
O favicon de 32 px, no tamanho real: 
O Apple touch icon de 180 px, opaco sobre a cor de fundo:
Baixe o pacote de exemplo completo (ZIP): favicon.svg, favicon.ico, os dois favicons PNG, o Apple touch icon, quatro ícones de app, site.webmanifest, favicon.html e um README.
Conferindo os seus favicons
Depois de publicar, abra a página numa janela anônima: os navegadores guardam favicons no cache por muito tempo, e um ícone antigo numa janela normal não prova nada. No painel de rede das ferramentas de desenvolvedor, confirme que favicon.svg é servido como image/svg+xml e que todos os arquivos respondem 200. Olhe a aba no modo claro e no escuro, e adicione a página à tela inicial de um celular para conferir o touch icon.