Não é bobagem que um pequeno ícone favorito exija mais uma solicitação HTTP? Como posso colocar o favicon em um sprite?

305

Todo mundo sabe como configurar um link favicon.ico em HTML:

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

Mas acho que é bobagem que, para um pequeno ícone de vários bytes, você precise de mais uma solicitação HTTP . Então, eu me perguntava, como eu poderia fazer essa imagem parte de um sprite (por exemplo background-position=0px -200px;) para acelerar e salvar essa solicitação HTTP valiosa. Como posso inserir isso em uma imagem sprite existente com meu logotipo e outras obras de arte?

O robô apontando para o favicon.icoitem número 31 no gráfico em cascata é o meu ZAM de estimação. Ele geralmente é mais feliz e faz questão de me informar que é hora de algumas atualizações criativas na Web, embora ele e eu não concordemos com a roupa dele, o que acho um pouco tolo hoje ...

insira a descrição da imagem aqui

javascript html css performance favicon Sam
fonte
47
Não é bobagem que ainda não haja uma maneira de combinar .css / .js / .png / .html em um único fluxo otimizado? Você teria pensado que alguém teria que vir para cima com essa idéia até agora
RichardTheKiwi
9
@ Richard relacionado: Respostas multipartes e Google têm uma iniciativa para um novo protocolo web otimizado que resolve isso, eu esqueci o nome ... Edit : É chamado SPDY . Mas isso está longe no futuro, obviamente.
Pekka
9
@ Richard aka cyberkiwi, você pode colocar tudo em um arquivo html com data:valores para imagens e scripts em linha.
zzzzBov
39
btw, nice man esboço :)
Fatih Acet
18
+1 para o :) esboço
Giuliano

Respostas:

140

Uma pequena melhoria na resposta do @ yc é injetar o favicon codificado em base64 de um arquivo JavaScript que normalmente seria usado e armazenado em cache de qualquer maneira, além de suprimir o comportamento padrão do navegador de solicitar favicon.ico, alimentando um URI de dados na metatag relevante .

Essa técnica evita a solicitação http extra e está confirmada para funcionar nas versões recentes do Chrome, Firefox e Opera no Windows 7. No entanto, ela parece não funcionar no Internet Explorer 9, pelo menos.

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

script.js

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];       
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JS would normally be in here too. */

Demonstração: turi.co/up/favicon.html

Marcel
fonte
3
+1 avanço em cache bonito @Marcel. PS Os caracteres no HTTP Headers Responsemeu arquivo .ico são quase do mesmo tamanho do meu ícone !! Como você gosta disso?
6114 Sam
2
@ Sam: notei que a base64 de um equivalente PNG do arquivo favicon.ico do Stack Overflow tinha metade do tamanho. Agradável e compacto.
Marcel
1
eeehm, não sei se entendi o que você quis dizer: 'arquivo tinha metade do tamanho de ...? Arquivo PNG como icon.png? ou você quer dizer que o equivalente a base64 é menor quando o png é formatado em vez do ícone formatado ou gif? curioso. Cheers companheiro!
Sam
1
@ Sam: Eu estava comparando a base64 deste PNG com a base64 deste arquivo ICO . A versão PNG, conforme usada no meu código de exemplo acima, tem metade do tamanho.
Marcel
1
ooh eu vejo, isso faz com que a sua base 64 responda, e o uso geral do formato PNG base64 é a escolha preferida, certo?
Sam
149

Eu acho que, na maior parte do tempo, não resulta em outra solicitação HTTP, pois geralmente são despejadas no cache do navegador após o primeiro acesso.

Isso é realmente mais eficiente do que qualquer uma das "soluções" propostas.

James Anderson
fonte
53
Esta é a única resposta sensata. Este não é um problema que não requer correção.
JoDG
1
James, minha solução é realmente apenas uma possibilidade, mas que eu nunca recomendaria a alguém. Mas parece que a maioria dos navegadores emitirá uma nova solicitação HTTP para o favicon no início de uma nova sessão do navegador. E, nem sempre retorna um 304.
Yahel
4
O navegador ainda fará uma chamada HEAD, mesmo que esteja no cache do navegador, assim você ainda terá a sobrecarga de uma solicitação HTTP.
precisa saber é o seguinte
3
Na verdade, tudo depende do navegador. A maioria deles sempre procura um favicon em alguns locais, mesmo que a página não o mencione e faz uma chamada HEAD a cada atualização.
David Costa
14
O favicon precisa de um cabeçalho expirado longo, como qualquer bom recurso estático. Com isso, até as chamadas HEAD são suprimidas.
Paul Alexander
102

Você pode tentar um URI de dados. Nenhuma solicitação HTTP!

<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">

A menos que suas páginas tenham cache estático, seu favicon não poderá ser armazenado em cache e, dependendo do tamanho da sua imagem favicon, seu código-fonte poderá ficar inchado como resultado.

Os ícones de URI de dados parecem funcionar na maioria dos navegadores modernos; Eu o tenho trabalhando em versões recentes do Chrome, Firefox e Safari em um Mac. Parece não funcionar no Internet Explorer e, possivelmente, em algumas versões do Opera.

Se você está preocupado com o Old IE (e provavelmente não deveria estar hoje em dia), inclua um comentário condicional do IE que carregaria o favicon.ico real da maneira tradicional, pois parece que o Internet Explorer antigo não Favicons de URI de dados de suporte

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. Inclua o arquivo favicon.ico no diretório raiz para cobrir os navegadores que solicitarão de qualquer maneira, pois, para esses navegadores, se eles já estiverem verificando, não importa o que você faça, é melhor não desperdiçar a solicitação HTTP com uma resposta 404 .

Você também pode usar o favicon de outro site popular que provavelmente terá o favicon em cache, como http://google.com/favicon.ico, para que seja exibido no cache.

Como os comentaristas apontaram, apenas porque você pode fazer isso não significa que deveria, pois alguns navegadores solicitarão o favicon.ico, independentemente dos truques que elaboramos. A quantidade de sobrecarga que você economizaria com isso seria minúscula em comparação com a economia que você obteria ao fazer gzip, usar cabeçalhos expirados no futuro para conteúdo estático, reduzir arquivos JavaScript, colocar imagens de fundo em sprites ou URIs de dados , exibindo arquivos estáticos de uma CDN etc.

Yahel
fonte
1
@Pekka: Sim, não é realmente uma solução prática, pois o peso extra de bytes em URI dos dados em páginas não armazenadas em cache provavelmente superaria o peso dessa solicitação de HTTP. Talvez o OP possa injetar o favicon no DOM de forma assíncrona.
Yahel
4
@ Sam Desculpe, entendo o que @yc significa agora, meu erro. Claro que você pode acessar perfeitamente o <link rel>elemento no navegador através do JavaScript, isso deve ser possível. Eu tenho visto até mesmo um jogo programado dessa forma ... no entanto, parece não funcionar no IE, quer, e ele provavelmente não vai impedir que o padrão /favicon.icosolicitação de pesquisa
Pekka
2
@Pekka, entendo. PS isso é um jogo incrível! Envergonha toda a minha tela inteira, já que tudo que você precisa é de 16x16 pixels haha. Esse hiperlink abre algumas possibilidades sobre o que é realmente possível com esse favicon.
Sam
3
No caso de uma declaração de favicon ausente, todos os navegadores solicitarão automaticamente o URL padrão /favicon.icoem uma tentativa cega de localizá-lo. Portanto, se você deixar de fora o favicon <link>(para depois adicioná-lo via Javascript), provavelmente estará piorando as coisas.
Már Örlygsson
2
Basta usar o favicon.ico para armazenar seu gif transparente :) #
markijbema
21

Você pode usar o favicon codificado em base64, como:

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
Dongsheng Cai
fonte
1
Dica: a string codificada em base64 usada nesta resposta é um arquivo PNG e não funcionará com o IE10 ou mais antigo.
Sibbl 01/07/19
2
Caso alguém queira saber, é o pingüim do linux.
Martlark
17

Encontrei uma solução interessante nesta página . É alemão, mas você poderá entender o código.

Você coloca os dados base64 do ícone em uma folha de estilo externa, para que sejam armazenados em cache. Na cabeça do seu site, você precisa definir o favicon com um ID e o favicon é definido como background-imagena folha de estilo para esse ID.

link#icon {
    background-image:url("data:image/x-icon;base64,<base64_image_data>");
}

e o html

<html>
    <head>
        <link id="icon" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        ...
    </head>
    <body>
        ...
    </body>
</html>
Felix Geenen
fonte
8
Uma pessoa com reputação 74.947 disse em algum lugar nesta página: "Você não pode!" ... Então outra pessoa com menos de 50 reputação disse: "Você pode!" Isso significa que a busca por soluções e a inovação concreta não têm vínculos ou relações com reputação adquirida? ... Bem, então isso é incrível!
Sam
4
Acabei de confirmar que esta solução não funciona - pelo menos não no Chrome 10 e Firefox 3.6 no Windows #
11781
13
Acabei de confirmar que esta solução funciona - pelo menos no Chrome 10.0.648 no W7 de 64 bits e no FF 4.0 no W7 de 64 bits
Sam
4
LOL, confirmei que as duas declarações acima parecem contraditórias, apesar dos números de versão ligeiramente diferentes, duvido que o comportamento do Chrome tenha mudado muito. O Firefox talvez tenha mudado de 3,6 para 4, mas o improvável Chrome 10 mudou muito em uma atualização menor.
dyasta
Posso confirmar que isso funciona no Chrome 83 e Firefox ESR 68 no Ubuntu 20.04, e posso confirmar que não funciona para impedir o acerto no /favicon.ico. Portanto, você obtém a imagem, mas não impede a conexão SSL extra. Como esse era o objetivo, isso é um fracasso.
Wil
14

Bom argumento e boa ideia, mas impossível. Um favicon precisa ser um recurso único e separado. Não há como combiná-lo com outro arquivo de imagem.

Pekka
fonte
1
Talvez eu sou cego, mas o único lugar que eu estou vendo o favicon Google Search está em um sprite: google.com/search?q=foo
Yahel
4
@yc google.com/favicon.ico é o lugar onde os navegadores irá procurá-lo automaticamente
Pekka
3
@yc você não é cego, provou-se digno de uma resposta muito criativa lá em cima ... como Pekka já apontou, /favicon.icoé onde os navegadores procurarão automaticamente. Agora vem a notícia realmente ruim: se o favicon NÃO existir, significa uma penalidade de erro 404 que também causará um pequeno atraso !! Parece que não há como escapar dessa masmorra favicon. Eles são tão pequena, mas oh tão poderoso ... caramba :)
Sam
Veja minha resposta stackoverflow.com/questions/5199902/… para a maneira correta de acelerar a maneira correta.
Matt Joiner
8
Deve-se notar que isso deve, realisticamente, ser uma solicitação única, praticamente para sempre. Como em todo o resto, temporizadores de cache longos e 301s retornados pelo servidor farão com que o pedido do favicon seja um ponto discutível (a menos que não exista - caramba!).
22611 Kevin Peno
9

Isso realmente importa?

Muitos navegadores carregam o favicon como uma prioridade baixa, para que ele não bloqueie o carregamento da página, então sim, é uma solicitação extra, mas não está em nenhum caminho crítico.

A solução aceita é horrível, pois até que o JS seja recuperado e executado, todos os elementos DOM abaixo serão impedidos de renderizar e não reduz o número de solicitações!

Andy Davies
fonte
8

A solução adequada é usar o pipelining HTTP .

O pipelining HTTP é uma técnica na qual várias solicitações HTTP são gravadas em um único soquete sem aguardar as respostas correspondentes. O pipelining é suportado apenas no HTTP / 1.1, não no 1.0.

É necessário que os servidores o suportem, mas não necessariamente participem.

O pipelining HTTP requer que o cliente e o servidor o suportem. Servidores em conformidade com HTTP / 1.1 são necessários para suportar o pipelining. Isso não significa que os servidores são obrigados a enviar respostas ao pipeline, mas que eles não devem falhar se um cliente optar por solicitações de pipeline.

Muitos clientes de navegador não fazem isso, quando deveriam.

O pipelining HTTP está desativado na maioria dos navegadores.

  • O Opera tem o pipelining ativado por padrão. Ele usa heurística para controlar o nível de pipelining empregado, dependendo do servidor conectado.
  • O Internet Explorer 8 não envia solicitações de pipeline, devido a preocupações com proxies de bugs e bloqueio de linha de frente.
  • Os navegadores Mozilla (como Mozilla Firefox, SeaMonkey e Camino) suportam pipelining, no entanto, estão desativados por padrão. Ele usa algumas heurísticas, especialmente para desativar o pipelining para servidores IIS.
  • O Konqueror 2.0 suporta pipelining, mas está desativado por padrão.
  • O Google Chrome não suporta pipelining.

Eu recomendo que você tente ativar o pipelining no Firefox e tente lá, ou apenas use o Opera (tremor).

Matt Joiner
fonte
7
Pipelining uma otimização feita na camada de transporte. Ainda envolve uma ida e volta HTTP separada para o favicon, que é o que a pergunta faz.
Már Örlygsson 17/03/11
@ Már Örlygsson que não está correto. Uma viagem de ida e volta significa que o cliente deve fazer uma solicitação e aguardar o processamento da solicitação e a resposta a ser baixada. Pipelining significa que a solicitação já será enviada enquanto aguarda a conclusão da solicitação anterior, portanto, enquanto as mesmas etapas estão acontecendo, o atraso que ela causará não será o mesmo ... #
Peter Peter
1
Sam não pode ativar o pipelining em todos os navegadores de seus visitantes, portanto, nesse sentido, essa solução não fará o site carregar mais rápido - exceto ele pessoalmente.
Már Örlygsson
3
@ Már Örlygsson e seus promotores: Isso não é feito na camada de transporte. Nos modelos do mundo real, tudo isso é feito na camada de aplicativos. Teoricamente, o pipelining deve estar na camada da sessão.
Matt Joiner
4
Não discutirei essas semânticas com você. O fato ainda é que Sam não pode "usar o pipelining" (por mais elegante que seja) para acelerar o carregamento do site para seus visitantes, pois o suporte para os jogadores é A) irregular quando você se indica, e B) aceita cada usuário individual.
Már Örlygsson
6

Não é realmente uma resposta para a pergunta, mas simplesmente para complementar as respostas dadas por Marcel e yahelc . Ofereço uma solução elegante para a questão do favicon 404.

Como alguns aplicativos e navegadores e outros enfeites procuram um favicon.com e se o ícone não for encontrado na raiz do site, você pode simplesmente responder à solicitação com o cabeçalho da resposta 204 .

Exemplos do Apache:

Apache opção um (e o meu favorito), um liner simples no seu .htacces ou .conf:

Redirect 204 /favicon.ico

Apache opção dois:

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

Para uma leitura mais aprofundada, há uma boa postagem de blog de Stoyan Stefanov em http://www.phpied.com/204-no-content/

Anthony Hatzopoulos
fonte
Sim, mas como a solicitação está sendo feita e o favicon geralmente é usado de maneira significativa, acho que vale a pena fornecer o ícone em vez de uma resposta vazia. Comprimindo o ícone via gzip vai buscá-la a um único tamanho de pacote TCP qualquer maneira, muitas vezes
Andy Davies
5

É uma ótima idéia, mas se o Google não tiver feito isso em sua página inicial, aposto que não pode (atualmente) ser feito

cusimar9
fonte
13
O Google é ótimo, mas pensar assim parece contraproducente e sufocante. Sempre existem maneiras novas, melhores e muito possíveis de fazer as coisas, e você não precisa trabalhar para que um líder do setor as encontre.
Erro de sintaxe
9
Obviamente, o Google recebe as suas ideias de SO, e não o contrário;)
user123444555621
3
Boa resposta, se o google pudesse tornar sua página mais rápida, eles o fariam.
David d C e Freitas
5

Sinto muito, mas você não pode combinar o favicon com outro recurso.

Isso significa que você tem basicamente duas opções:

  1. Se você se sentir confortável com o fato de seu site não possuir um favicon - basta hrefapontar para um recurso que não é ícone que já está sendo carregado (por exemplo, uma folha de estilo, arquivo de script ou mesmo algum recurso que se beneficia de ser pré-buscado .)
    (Meus breves testes indicam que isso funciona na maioria dos navegadores principais, se não em todos.)

  2. Aceite a solicitação HTTP extra e verifique se o arquivo favicon possui cabeçalhos agressivos de controle de cache HTTP definidos.
    (Se você tem outros sites sob seu controle, pode até solicitá-los a pré-carregar furtivamente o favicon desse site - junto com outros recursos estáticos.)

PS Soluções criativas que não funcionarão :

  • O truque estranho de CSS data-uri (vinculado pelo comentarista Felix Geenen) não funciona .
  • Usar o Javascript para executar uma injeção atrasada do <link>elemento favicon (como sugerido pelo usuário @yc) provavelmente piorará as coisas - resultando em duas solicitações HTTP.
Már Örlygsson
fonte
1
outras soluções que não funcionam: vários ícones em um .ico e usar o ico em uma tag de imagem na esperança de exibir outra imagem lá, além de como favicon. Catting juntos o favicon com outro arquivo.
markijbema
3

Você pode usar PNG de 8 bits em vez do formato ICO para obter uma pegada de dados ainda menor. A única coisa que você precisa alterar é usar o cabeçalho do tipo MIME "data: image / png" em vez de "data: image / x-icon":

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

O atributo "type" pode ser "image / png" ou "image / x-icon", ambos funcionam para mim.

Você pode converter ICO para png de 8 bits usando o gimp ou converter:

convert favicon.ico -depth 8 -strip favicon.png

e codifique o binário PNG na cadeia base64 usando o comando base64:

base64 favicon.png
andrej
fonte
2

Aqui está a maneira mais fácil:

<!DOCTYPE html><html><head> 
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>

Que ícone representa? Responda e vote abaixo!

rjobidon
fonte
1
O ícone da maçã?
styfle
2

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 .svgformato.

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" />
Rounin
fonte