Guia

Favicon (.ico) vs PNG

ICO e PNG não são concorrentes — são parceiros. O setup moderno usa .ico como fallback universal e PNG como override de alta DPI. Veja exatamente quando cada um ganha.

Check favicons on any website

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

Install Chrome Extension

ICO é o único formato em que um único arquivo embute múltiplas resoluções. O navegador ou SO escolhe a mais próxima no momento do desenho — sem upscale, sem bordas borradas.

PNG é mais nítido em qualquer resolução individual e oferece melhor compressão para logos de cores chapadas. Porém não embute vários tamanhos em um só arquivo.

O setup ideal é um .ico multirresolução somado a PNGs avulsos de 32×32 e 180×180 para navegadores de alta DPI e iOS.

Como funciona

  1. 1

    Parta de uma imagem 512×512

    PNG ou SVG.

  2. 2

    Gere ambos os formatos

    O FetchFavicon produz um .ico multirresolução mais PNGs avulsos de 16/32/48/180/192/512.

  3. 3

    Vincule ambos no <head>

    <link rel="icon" href="/favicon.ico"> seguido de <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.

Experimente agora

Gere .ico e PNG

Conversor de PNG para ICO

Perguntas frequentes

Qual formato é mais leve?+

Um PNG avulso é menor que um .ico na mesma resolução, mas um .ico multirresolução substitui 4–6 PNGs e geralmente vence no peso total.

O Google exibe favicons PNG nos resultados de busca?+

Sim. O Google aceita .ico e PNG. Ele prefere proporção quadrada de pelo menos 48×48.

PNG suporta modo escuro?+

Não diretamente. Use uma variante SVG ao lado do PNG para suporte a modo escuro.

Ferramentas relacionadas

Mais guias

Guias