Favicon de emoji: uma linha, sem arquivo de imagem
Sem arquivo, sem gerador, sem upload. Cole uma linha e sua aba ganha um ícone.
A linha única
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">Troque o foguete por qualquer emoji. As sequências %22 são aspas duplas codificadas em URL, para que todo o SVG sobreviva dentro do href.
Como funciona
Não há imagem aqui. O href é um data URI que contém um SVG minúsculo, e o SVG é um único elemento <text> com o emoji dentro. O navegador renderiza o SVG direto na aba, então você pula todo o ciclo de gerar-baixar-fazer upload.
O viewBox e o font-size cuidam do dimensionamento. O ajuste y=".9em" empurra o glifo para baixo, para que ele fique dentro da caixa em vez de cortar no topo. É esse o truque inteiro.
Os limites
Ele é renderizado com a fonte de emoji do sistema operacional, então o mesmo emoji fica diferente no macOS, no Windows e no Android. Você não controla a arte.
Ele cobre apenas a aba. Não é um /favicon.ico de verdade, então crawlers e clientes mais antigos que solicitam esse caminho não encontram nada, e ele não faz nada pelas telas iniciais do iOS nem pelos launchers do Android, que precisam de arquivos PNG de verdade.
Em produção, codifique os caracteres especiais em URL. Um < e um > e aspas cruas dentro de um href podem quebrar o parsing ou esbarrar em políticas de conteúdo rigorosas. Codificá-los, como no snippet acima, mantém a solução robusta.
Perguntas frequentes
Como uso um emoji como favicon?
Defina o href do link do favicon como um data URI que contenha um pequeno SVG inline com o emoji em um elemento <text>. Leva uma linha de HTML e não precisa de arquivo de imagem.
Por que meu favicon de emoji fica diferente em outros dispositivos?
Ele é renderizado com a fonte de emoji própria de cada dispositivo, então a arte difere entre macOS, Windows e Android. Se você precisa de uma aparência consistente, use um ícone de imagem de verdade.
Um favicon de emoji funciona para ícones de tela inicial?
Não. Ele cobre apenas a aba do navegador. As telas iniciais do iOS e os launchers do Android precisam de arquivos PNG de verdade referenciados pelo apple-touch-icon e pelo manifest.