Usando um Emoji como Favicon
Você pode definir um emoji como favicon apontando o link do ícone para um data URI de SVG inline que contém o emoji como texto, sem nenhum arquivo de imagem. Funciona instantaneamente nos navegadores modernos. É um ótimo marcador de posição, mas o emoji é desenhado pela própria fonte do sistema operacional, então ele fica diferente entre Windows, macOS, Android e iOS, e não vai satisfazer /favicon.ico nem os ícones da tela inicial. Para qualquer coisa além de um começo rápido, exporte um conjunto de verdade.
Uma linha, nenhum arquivo
O truque é um data URI de SVG inline: o href do link é um SVG que desenha o emoji como um elemento de texto, então não há nenhuma imagem separada para hospedar. Os navegadores modernos o renderizam na aba imediatamente, o que faz dele um marcador de posição perfeito enquanto você constrói.
O próprio emoji é desenhado por qualquer fonte de emoji que o sistema operacional do visitante forneça, então o mesmo favicon fica sutilmente (ou nem tão sutilmente) diferente em cada plataforma.
O código de uma linha
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦊</text></svg>"
/>Troque por qualquer emoji. Em produção, codifique os caracteres especiais em URL: alguns navegadores são exigentes com colchetes angulares crus em um data URI.
Perguntas frequentes sobre favicon de emoji
Posso usar um emoji como favicon?
Sim, via um data URI de SVG inline que renderiza o emoji como texto. Funciona nos navegadores modernos sem nenhum arquivo de imagem, o que faz dele um marcador de posição rápido e prático.
Por que meu favicon de emoji fica diferente em cada dispositivo?
Porque o emoji é desenhado com a própria fonte de emoji do sistema operacional. Apple, Google e Microsoft desenham o mesmo emoji de forma diferente, então o seu favicon herda essa variação.
Um favicon de emoji é bom o suficiente para produção?
Como único ícone, não. Ele não cobre /favicon.ico nem as telas iniciais, e fica inconsistente entre plataformas. Use-o para começar, depois exporte um conjunto adequado para o lançamento.