Como usar
- Solte um arquivo .ico na área de arrastar e soltar, clique para escolher um ou cole uma imagem.
- Deixe Converter para em Manter o original para que todos os tamanhos armazenados no ícone fiquem na saída.
- Confira o tamanho codificado; um ícone com muitos tamanhos pode ser maior do que você espera.
- Copie o data URI para a tag link do favicon, ou copie a saída em tag img, CSS ou Markdown.
O formato ICO
O ICO é o formato de ícones do Windows e o formato original de favicon. Ele é um contêiner: um pequeno diretório lista uma ou mais imagens com largura, altura e profundidade de cor, e cada imagem é armazenada como dados de bitmap ou, em tamanhos grandes como 256 por 256, como um PNG incorporado. Um favicon.ico típico contém versões de 16, 32 e 48 pixels para que o navegador escolha a mais nítida.
O tipo MIME registrado é image/vnd.microsoft.icon, mas image/x-icon é bem mais comum, e os navegadores aceitam os dois. Dados ICO em Base64 começam com AAABAA, o cabeçalho do arquivo codificado.
Um favicon em data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Incorporar o favicon é prático em documentos HTML de arquivo único, como relatórios exportados, dashboards salvos em disco e documentação offline, e em protótipos ou ferramentas internas em que você não quer publicar um arquivo separado. Em um site com muitas páginas, um /favicon.ico normal costuma ser melhor: ele é baixado uma vez e fica em cache, enquanto um data URI se repete em cada resposta HTML.
Se você não quer nenhum ícone, <link rel="icon" href="data:,"> impede que o navegador solicite /favicon.ico.
Favicons em ICO, PNG ou SVG
Os navegadores atuais também aceitam favicons em PNG e SVG, por exemplo <link rel="icon" type="image/png" href="data:image/png;base64,...">. Um único PNG de 32 por 32 costuma ser menor que um ICO com vários tamanhos; para esses casos, use PNG para Base64 ou SVG para Base64.
Converter um ICO aqui para PNG, JPEG ou WebP mantém apenas uma imagem, aquela que o navegador escolhe exibir. Para fazer o caminho inverso e montar um arquivo ICO, codifique um PNG e cole o resultado em Base64 para ICO, que gera ícones de 16 a 256 pixels.
Perguntas frequentes
Devo usar image/x-icon ou image/vnd.microsoft.icon?
image/vnd.microsoft.icon é o tipo registrado oficialmente, enquanto image/x-icon é o que a maioria dos sites usa. Se um sistema espera um deles em particular, edite o prefixo depois de copiar.Todos os tamanhos de ícone ficam na saída em Base64?
Sim, quando você mantém o formato original. O arquivo inteiro é codificado, então o navegador ainda pode escolher o tamanho de que precisa. A conversão para outro formato mantém uma única imagem.
Favicons em data URI funcionam em todos os navegadores?
Os navegadores de desktop atuais os exibem na aba. Favoritos, atalhos na tela inicial e alguns navegadores antigos podem ignorar um ícone incorporado, então sites públicos ainda devem oferecer um arquivo de favicon.