Existe uma maneira de adicionar um favicon personalizado a uma aba de aplicativos?

Question

Desde o lançamento do Firefox "5", eu realmente adorei o novo recurso "App Tabs". No entanto, percebi agora que vários sites internos no trabalho não têm favicons. Então, quando eu faço uma aba de apps desses sites, há apenas um ícone de "página em branco" na aba.

Talvez eu não me importasse tanto se houvesse apenas um, mas há pelo menos dois ou três deles. Então, é um pouco chato ter que passar o mouse pelas Guias do Aplicativo para descobrir qual é o quê.

Eu tentei usar o Favicon Picker 2 para alterar os ícones dos favoritos, mas isso só faz exatamente isso - altera o ícone na pasta de marcadores. Ele não altera o favicon exibido ao lado da URL na Barra de Endereços, ou o próximo ao título da página nas guias - sendo a última usada para o ícone da Guia do Aplicativo.

Então, existe um plugin ou outro método do lado do cliente (e, de preferência, "amigável ao usuário Joe") para atribuir um ícone a uma página da Web ou domínio, que será usado na barra de guias?

    

Answer 1

É muito simples personalizar o seu aplicativo favicons.
Porque o favicon guia de aplicativo é gerado pelo marcador apenas ...
(1) instalar isto - link
(2) visualizar seus favoritos, clique com o botão direito e selecione a imagem personalizada desejada. (3) reiniciar o navegador (para nova imagem para "tirar")
Feito.

    

Answer 2

Eu alterei os ícones da minha guia (Firefox 26) usando a seguinte folha de estilo:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

tab[pinned="true"][label*="w3.org"] .tab-icon-image {
    list-style-image: url(https://www.w3.org/favicon.ico);
}
tab[pinned="true"][label^="TU"] .tab-icon-image {
    list-style-image: url(https://www.tue.nl/favicon.ico);
}

Para usar essa folha de estilo, coloque-a em [path to your profile]/chrome/userChrome.css , ou instale um gerenciador de estilo de usuário, como Elegante .

Funciona da seguinte maneira: As abas do Firefox fazem parte de uma árvore de documentos (veja browser.xul ):

<tabs id="tabbrowser-tabs" ...>
    <tab class="tabbrowser-tab" ... pinned="true" ... label="some text" ...>
    ...

O rótulo de uma guia corresponde ao título da guia. No meu exemplo, eu queria adicionar um favicon à guia da lista de discussão do W3. Infelizmente, ele não tem um único título, então eu tive que procurar algo relativamente único que corresponda à guia. Acontece que as páginas relevantes tinham "w3.org" no título, o que resultou na criação de [label*="w3.org"] .
Da mesma forma, o site da minha universidade não tem favicon. Todos os títulos começam com "TU", então usei [label^="TU"] .

Seletores mais comuns: [label$="last words"] , [label="Exact match"] .
Negação: [label*="w3.org"]:not([label$="- Gmail"]) (= selecione guias cujo título contenha "w3.org", a menos que termine com "- Gmail").

Se suas guias fixas nunca mudarem de posição, você também pode tentar algo assim para alterar o ícone da primeira guia:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

tab[pinned="true"]:nth-child(1) .tab-icon-image {
    list-style-image: url(https://www.mozilla.org/favicon.ico);
}