Favicon e ICO para Base64

Como converter um favicon para Base64

1. Arraste o favicon.ico, um PNG ou um SVG para a caixa, ou escolha-o no seletor de arquivos.
2. Para um PNG, defina Largura máx. como 32 (ou 48) para não embutir sem querer um ícone de app de 512 pixels. Arquivos ICO e SVG são codificados como estão.
3. Saída como já vem em Data URI. Copie e cole no href:

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

A prévia mostra o ícone com o tamanho em pixels, então você vê se um PNG é mesmo 32×32 antes de colar.

ICO, PNG ou SVG

Um favicon.ico muitas vezes junta imagens de 16×16, 32×32 e 48×48, e todas acabam no Base64, o que explica uma string mais longa do que você esperava. Converter um único PNG de 32×32 costuma bastar para a aba do navegador.

Favicons em SVG podem reagir ao modo escuro com uma media query prefers-color-scheme dentro do SVG. Mantenha um PNG como alternativa se você atende Safari antigo.

Quando um favicon inline faz sentido

• HTML de arquivo único: relatórios exportados, documentação offline, um dashboard salvo como um arquivo só. Um caminho relativo para favicon.ico deixaria de apontar para algo assim que o arquivo fosse movido.
• Ferramentas internas e servidores locais, em que criar uma rota para arquivos estáticos dá mais trabalho que uma linha de HTML.
• Favicons dinâmicos: um selo de notificação ou uma cor de status desenhados num canvas e aplicados com link.href = canvas.toDataURL("image/png").

Num site comum, um arquivo de ícone separado é a melhor escolha. O navegador o baixa e o guarda em cache uma vez, enquanto um favicon inline se repete em cada página HTML servida.

Desenhar um favicon em JavaScript

Para um indicador de status você nem precisa de arquivo. Desenhe num canvas de 32×32 e atribua o data URI ao link de ícone existente:

const canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#e33";
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
document.querySelector('link[rel="icon"]').href = canvas.toDataURL("image/png");

Quando o ícone não muda

• O ícone antigo continua aparecendo. Os navegadores guardam favicons em cache com força e separado da página. Recarregue sem cache ou abra a página numa janela anônima para ver o novo.
• Não aparece nada. Confira se o href começa com o tipo certo: data:image/png;base64,, data:image/x-icon;base64, ou data:image/svg+xml;base64,. Um ícone SVG também precisa do atributo xmlns no elemento raiz.
• Várias tags <link rel="icon">. O navegador escolhe entre elas pelo tipo e pelo tamanho, então um ícone inline pode perder para outro ícone declarado. Remova os que você não quer.

Voltar para arquivo

Para recuperar o favicon.ico a partir de um data URI, use o Base64 para ICO. Para ícones SVG, o SVG para Data URI também gera uma versão com codificação de URL, que muitas vezes fica mais curta que o Base64.

Perguntas frequentes