Como ter favicon / ícone definido quando o bookmarklet é arrastado para a barra de ferramentas?

Eu fiz para mim um bookmarklet e funciona muito bem, mas quando adicionado a uma barra de ferramentas no Opera ou Firefox, ele apenas assume o ícone de marcador padrão para o navegador (um globo e uma estrela, respectivamente). Meu site tem um favicon, e a janela, guia e até mesmo o favorito [site] usam o favicon que eu especifiquei. Só não meu bookmarklet.

Como posso codificar meu site ou bookmarklet para que o bookmarklet também obtenha o favicon?

Estou ciente das várias técnicas manuais de hackeamento que os usuários podem usar para definir o favicon após o fato, mas essas são soluções indesejáveis.

Um bookmarklet usa o javascript://esquema e, portanto, não tem um domínio a partir do qual um favicon possa ser carregado.

Portanto, atualmente não há como fornecer um favicon para um bookmarklet. Pense nisso assim: lembra-se de toda a sandbox do Javascript - onde o Javascript não pode acessar nada fora do domínio da página da web onde está sendo executado? Bem, um bookmarklet que precisa ser vinculado a qualquer domínio da página atual que você está assistindo não pode ser vinculado a um favicon em seu próprio site.

Atualização: De acordo com a resposta de Hans Schmucker, existe a possibilidade de criar um bookmarklet que, quando carregado pelo navegador no menu de favoritos, irá gerar um documento HTML que possui um favicon. O raciocínio pode funcionar, mas ainda não vi algo assim em ação e meus testes deram negativo.

Veja como você pode fazer isso:

1. Arraste seu bookmarklet para a Barra de favoritos.
2. Ao lado dele, crie um favorito de um site cujo favicon você deseja usar para o seu bookmarklet.
3. Abra o Gerenciador de favoritos, clique no menu suspenso Organizar e selecione Exportar, salve seus favoritos como um arquivo html.
4. Abra esse arquivo html no editor de texto.
5. Encontre o favorito que você acabou de criar, digamos, seu favorito do Gmail, você deve ter um código html para ele, que se parece com este:

<DT><A HREF="http://mail.google.com/mail/u/0/#inbox" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">Gmail</A>

6. Copie toda a tag ICON
7. No mesmo arquivo, encontre o bookmarklet que você criou e insira a tag ICON que você copiou em sua tag bookmarklet :

<DT><A HREF="javascript:(function(){... bookmarklet JS code...})();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jdWQzUoCYRiFnxl/0plso0IKX7mqXWCLIlq0qEW4d19Qi6BLCELwEgpvQbyAVrroCrSNUJFGAyrkEEEMNs5PCxtRHGsZneX7nedwzgd/LQngObfnykIQOj9Disd/BFxdZ3hVwtE0Mje3kuw9OJqGWSji1BtzYafeGHk0jTdzCIA8aXANA/O6hFWuzMBWuYJ5XcI1DF6MAY8fxmxAYHdnZK7WMAtFXF3H1XXMQhGrWsN2XR5WM/QGn2MmOBkQOj5CFoJhuTKe5DUzbJvW1jbWZhbqd/4BAIGDfSQhGH7XBehLMlruEGlFzEyTZy6AvL5G+PICWQja6iJaPu8L+zbw9B4MYpyeEB4MkF7782z+AZ1OD0WNkk4vA7AUi/HUav8eYNsOnW6XZCJBJLIwvieTcVQ1SrN5j2XbUwFTf9DpdkmnUlOwJ0VRyGY3UBVl7px/qi+cdYQvZvKCUwAAAABJRU5ErkJggg==">MyBookmarklet</A>

8. Salve este arquivo
9. Retorne ao Gerenciador de favoritos do Chrom, clique novamente em Organizar e selecione Importar
10. Importe o arquivo HTML que você acabou de editar, seu bookmarklet agora tem um favicon .

Basicamente, o procedimento é obter o atributo ICON de uma tag de favorito e inseri-lo na tag de bookmarklet

Isso não está certo: um bookmarklet não tem domínio, mas tem um local (que é o próprio bookmarklet) e você pode atribuir um ícone a ele. Depois disso, é uma questão de como o navegador salva os ícones (o Firefox salva o ícone de um favorito permanentemente, você pode não ter tanta sorte com outros navegadores).

PS Security nem sequer entra nele, os ícones podem vir de qualquer lugar. Não há restrição.

Consulte http://www.tapper-ware.net/blog/?p=97

Depois de ler o site Tapper [ware] e Restafarian, aqui está a solução mais simples que eu poderia sugerir:

<a href="javascript:

var title = window.location.href;

if (title.indexOf('http://yourwebsite/bookmarklet/') == 0) {
    '<head><link rel=\'shortcut icon\' href=\'favicon.ico\'></head>Bookmarklet';
} else {
    (function(){document.body.appendChild(document.createElement('script')).src='http://yourwebsite/bookmarklet.js';})();
}">Click Me!</a>

Funciona muito bem no Chrome e FF, mas o FF4 é o único navegador que salvará o ícone na barra de favoritos. É assim que se parece: http://cl.ly/5WNR

Aqui está uma boa técnica que quase faz o que você quer.🙅

Funciona muito bem no meu Mac✅, mas não consegui fazê-lo funcionar no Windows 7⃣.❌

Use "Emoji" 🈳. Eles são caracteres Unicode, que por acaso também se parecem com ícones coloridos. Você só pode escolher de uma lista predefinida de imagens, mas na verdade não é ruim💩 se tudo o que você está tentando fazer é dar ao usuário algo para olhar👓 para lembrá-lo do que o bookmarklet faz.

Por exemplo, estou criando um bookmarklet de "chave de segurança "📖. Então eu uso 🔑 no nome do meu bookmarklet! 😃😊

Basicamente, você vê a imagem🎑 na barra de favoritos 😝

Use este site para ajudá-lo a encontrar um Emoji que funcione para o seu bookmarklet: http://emojipedia.org/symbols/

Com base na sugestão de Wizek, você pode colocar seu código em um data-uri.

data:text/html;charset=utf-8,
<html>
<link rel="shortcut icon" href="https://stackoverflow.com/favicon.ico">
<script type="text/javascript">
    alert('It works!')
</script></html>

E salve tudo isso como um marcador. ( Experimente! Arraste o código para a barra de guias)

Infelizmente, isso só funciona para alguns casos (mais abaixo).

Como funciona:

(Pelo menos no Chrome) É semelhante a um bookmarklet usando o formato javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"como outras soluções sugeriram. Nesse caso, o html da página em que você está será substituído pelo html do bookmarklet, mas o local permanece o mesmo e o próprio bookmarklet ainda não terá um local, então o Chrome não pode salvar um favicon para ele.

Em contraste, com um marcador data-uri vamos para a outra página , ela tem seu próprio local e o navegador pode salvar um favicon para ela. Pense nisso como "Hospedar um site no seu navegador", que você poderá acessar em outros computadores se sincronizar seus favoritos. Você também pode usar uma imagem base64 para o favicon em vez de um url se quiser manter tudo local.

Tem limitações.

• Ao clicar nele, ele sai da página atual e carrega a página nos dados . Portanto, você não poderá usá-lo para bookmarlets que interagem com a página atual, apenas para códigos que podem ser executados em uma página diferente.

• Não use // para comentários. Uma vez que tudo será salvo em uma linha, coloque-os em / ** / e não se esqueça dos seus pontos e vírgulas

• No FF, ele salvou o favicon, mas não consegui configurá-lo para sempre abrir janelas pop-up se eu quiser usar window.open () porque não me permite salvar um comportamento padrão para urls de dados

Como um exemplo:

Usando essa técnica, criei um pequeno Bookmarklet com gerador de ícones. Você pode arrastar esse código para a barra de URL (ou salvá-lo como um favorito) para usá-lo. É uma página simples com uma área de entrada para o código e para um ícone e, em seguida, gera um bookmarklet com o ícone

data:text/html;charset=utf-8,<html><head>
    <title>Bookmarklet With Icon Generator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <link rel="shortcut icon" href="https://www.freefavicon.com/freefavicons/objects/plain-thumbs-up-152-237293.png">
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h2>Write your javascript  and specify a favicon, then drag the button to your bookmarks bar</div>
                </h2>
        <a id="bookmarkbutton" href='' ondragend='this.click()' draggable="true" class="btn btn-primary btn-lg" role="button"> 
            Drag me to your bookmarks bar! </a><br /><br />
        <div> 
            <label for="fav_href">Favicon:</label>
            <input id="fav_href" value='https://stackoverflow.com/favicon.ico' style='width:100%'></input> </div><br />
        <div>
            <label for='ta'>Write your JavaScript below</label>
            <textarea id="ta" style="width:100%;height:50%">
setTimeout(()=>{            &%2313
    alert('hello world');   /*Use this format for comments, use %2523 instead of hash (number sign)*/ &%2313
    window.history.back();  &%2313
},200);
            </textarea></div>
  </div>
    <script type = "text/javascript">
        fav_href.onchange = ta.onchange = function(){
            bookmarkbutton.href = 'data:text/html;charset=utf-8,<html><head>'+
                '<link rel="shortcut icon" href="'+ fav_href.value +'">'+
                '<script type="text/javascript"> '+ ta.value +'<\/script>';
            };
        ta.onchange();
    </script>
</body>

Outro exemplo: Bookmarklet para abrir o Facebook Messenger em sua própria janela pequena (pode não funcionar se o seu navegador bloquear pop-ups por padrão)

data:text/html;charset=utf-8,
<html>
    <link rel="shortcut icon" href="https://facebook.com/images/messengerdotcom/favicon/favicon.ico">
    <script type="text/javascript">
        url = 'https://www.messenger.com/';
        w = 740; h = 700;
        x = parseInt( screen.availWidth/2 - w/2 );
        y = parseInt( screen.availHeight/2 - h/2 );
        nw = window.open(url,'', 'width='+ w +',height='+ h +',top='+ y +',left='+ x);
        nw.focus();
        setTimeout(()=>{ 
          window.history.back();
          window.close();  
        },200);
    </script>

Outras soluções alternativas do Chrome para obter ícones de bookmarklet:

• Exportando a barra de favoritos, editando-a e importando-a novamente, conforme descrito nesta resposta /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- google-chrome

• Transformando o bookmarklet em uma extensão. Não será mais um bookmarklet, mas terá a mesma função. Aqui está um site simples que faz isso para você http://sandbox.self.li/bookmarklet-to-extension/ e, em seguida, basta alterar o arquivo do ícone para o que você deseja. A desvantagem disso é que as extensões usam até memória RAM (em torno de 10 MB para as simples?), Se você tiver muita e pouca memória RAM, pode não ser a solução para você. Além disso, você não terá texto como em um marcador, apenas o ícone.

É possível atribuir e modificar o favicon do favicon usando javascript e canvas (veja o incrível jogo de favicon Defender of the Favicon ). O código-fonte do jogo irá ajudá-lo a fazer isso (ele basicamente depende do uso da função toDataUrl () no canvas, conforme visto na linha 554 do código-fonte).

// set favicon
if( !stupidBrowser && useIcon )
{
     var    icon=$('favicon');
     (newIcon = icon.cloneNode(true)).setAttribute('href',ctx.canvas.toDataURL());
     icon.parentNode.replaceChild(newIcon,icon);
}

O que acontece quando um bookmarlet que define o favicon dessa forma é clicado ou salvo? Eu não sei, mas poderia ser bom tentar. O navegador pode salvá-lo?

Eu acho que uma maneira possível é usar Unicode char na âncora de bookmarklet como seu ícone:

http://unicode-table.com/en/#cyrillic

peneirando todos os símbolos possíveis você poderá encontrar o caractere que se assemelha mais ao ícone que você deseja

Portanto, esta não é uma solução completa ainda, mas pode ser um passo em direção a uma direção de trabalho.

data:A codificação de um ícone em um data:html codificado com -uri funciona, para minha surpresa.

data:text/html;charset=utf-8, <title>Separator Tab</title><link rel="shortcut icon" href="data:image/png;base64,AAABAAEAEBAAAAEAIAAoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAP+Wlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAAD/lpaW/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/5aWlv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACWlpb/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" /> Separator Tab

Sendo assim <html>, podemos correr <script type="javascript">para lá também.

Para alguns bookmarklets, isso já pode ser mais do que suficiente. Para outros que desejam modificar a página atual ou pelo menos obter algumas informações dela antes de abrir uma nova guia, azar ainda. Atualizarei esta resposta se encontrar uma maneira de fazer isso.