Favicons com Data URI (base64)
Um favicon com data URI embute a imagem diretamente na tag de link como texto base64 (href="data:image/png;base64,...") em vez de apontar para um arquivo, o que elimina uma requisição HTTP. Funciona para a aba do navegador, mas quebra em todo lugar que busca um ícone por URL: requisições a /favicon.ico, apple-touch-icon, ícones do manifest, crawlers e ferramentas de prévia de link. Então não é um substituto para arquivos reais.
O que ele traz, e o que ele custa
Embutir o ícone como base64 poupa uma requisição: a imagem viaja dentro do HTML, então o navegador não busca um arquivo separado para a aba. Para um ícone minúsculo em uma página sensível à latência, isso pode parecer atraente.
O problema é tudo que não lê o seu HTML. Um crawler ou uma ferramenta de prévia de link solicitando /favicon.ico por caminho não recebe nada. O iOS quer um arquivo apple-touch-icon real; o Android lê arquivos listados no manifest. Nenhum deles pode usar um ícone que só existe como texto dentro de uma tag de link, e o blob base64 incha toda resposta HTML em que aparece.
Como ele fica
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />Serve para a aba, invisível para qualquer coisa que solicite um ícone por URL.
Perguntas frequentes sobre favicon com data URI
Posso usar um favicon base64?
Para a aba do navegador, sim. Mas ele não vai satisfazer as requisições a /favicon.ico, o apple-touch-icon, o manifest ou os crawlers, então em um site real ele só pode complementar arquivos reais, não substituí-los.
Um favicon inline funciona em telas iniciais do iOS?
Não. As telas iniciais do iOS usam o apple-touch-icon, que precisa ser um arquivo real que ele possa buscar. Um data URI em um link de favicon não faz nada pela tela inicial.
Um favicon com data URI é bom para performance?
Ele elimina uma pequena requisição, mas embute a imagem codificada em toda resposta HTML que a carrega. Para um ícone que é armazenado em cache de forma intensa após o primeiro carregamento de qualquer forma, a economia costuma ser insignificante e o inchaço não.