Solução Killer em 2020
Essa solução vem necessariamente nove anos depois que a pergunta foi feita originalmente, porque até bem recentemente, a maioria dos navegadores não era capaz de lidar com favicons no .svg
formato.
Esse não é mais o caso.
Consulte: https://caniuse.com/#feat=link-icon-svg
1) Escolha SVG como o formato Favicon
No momento, em junho de 2020, esses navegadores podem lidar com SVG Favicons :
- cromada
- Raposa de fogo
- Beira
- Ópera
- Chrome para Android
- Navegador KaiOS
Observe que esses navegadores ainda não podem:
- Safári
- iOS Safari
- Firefox para Android
Com o exposto acima, podemos usar com confiança um SVG Favicon .
2) Apresentar o SVG como um URI de dados
O principal objetivo aqui é evitar solicitações HTTP.
Como outras soluções mencionaram, uma maneira bastante inteligente de fazer isso é usar um URI de dados em vez de um URL HTTP .
Os SVGs (especialmente pequenos SVGs) se prestam perfeitamente aos URIs de dados, porque o último é simplesmente texto sem formatação (com qualquer caractere potencialmente ambíguo codificado em porcentagem) e o primeiro, sendo XML, pode ser gravado como uma longa linha de texto sem formatação (com uma smattering de códigos de porcentagem) incrivelmente simples.
3) Todo o SVG é um Emoji
Em dezembro de 2019, Leandro Linares foi um dos primeiros a perceber que, desde que o Chrome havia ingressado no Firefox no suporte ao SVG Favicons, valeu a pena experimentar para ver se um favicon poderia ser criado a partir de um emoji:
https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/
O palpite de Linares estava certo.
Vários meses depois (março de 2020), o código pirata Lea Verou percebeu a mesma coisa:
https://twitter.com/leaverou/status/1241619866475474946
E os favicons nunca mais foram os mesmos.
4) Implementando a solução você mesmo:
Aqui está um simples SVG:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16 16">
<text x="0" y="14">🦄</text>
</svg>
E aqui está o mesmo SVG que um URI de dados :
data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E
E, finalmente, aqui está o URI de dados como um Favicon:
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
5) Mais truques
Como o Favicon é um SVG, qualquer número de efeitos de filtro (SVG e CSS) pode ser aplicado a ele.
Por exemplo, ao lado do Favicon White Unicorn acima, podemos criar facilmente um Favicon Black Unicorn aplicando o filtro:
style="filter: invert(100%);"
Favicon unicórnio preto:
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />