¿Cómo configurar el ícono / favicon cuando se arrastra el marcador a la barra de herramientas?

Me hice un bookmarklet y funciona muy bien, pero cuando se agrega a una barra de herramientas en Opera o Firefox, simplemente toma el ícono de marcador predeterminado para el navegador (un globo y una estrella, respectivamente). Mi sitio tiene un favicon, y la ventana, pestaña e incluso el marcador de [sitio] usa el favicon que he especificado. Simplemente no es mi marcador.

¿Cómo puedo codificar mi sitio o bookmarklet para que el bookmarklet también obtenga el favicon?

Soy consciente de varias técnicas de piratería manual que los usuarios pueden usar para configurar el favicon después del hecho, pero esas son soluciones indeseables.

Un bookmarklet usa el javascript://esquema y, por lo tanto, no tiene un dominio desde el que se pueda cargar un favicon.

Por lo tanto, actualmente no hay forma de que proporciones un favicon para un bookmarklet. Piénselo así: recuerde todo el asunto del sandbox de Javascript, donde Javascript no puede acceder a nada fuera del dominio de la página web donde se está ejecutando. Bueno, un bookmarklet que debe estar vinculado a cualquier dominio de la página actual que está viendo, no puede estar vinculado también a un favicon en su propio sitio web.

Actualización: de acuerdo con la respuesta de Hans Schmucker, existe la posibilidad de crear un marcador que, cuando el navegador lo carga en el menú de marcadores, generará un documento HTML que tiene un favicon. El razonamiento parece que puede funcionar, pero todavía tengo que ver algo como esto en acción y mis pruebas han resultado negativas.

Así es como puede hacer esto:

1. Arrastre su marcador a la barra de marcadores.
2. Junto a él, cree un marcador de un sitio cuyo favicon desea usar para su marcador.
3. Abra el Administrador de marcadores, haga clic en el menú desplegable Organizar, seleccione Exportar y guarde sus marcadores como archivo html.
4. Abra ese archivo html en el editor de texto.
5. Busque el marcador que acaba de crear, digamos su marcador de Gmail, debe tener un código html para él, que se ve así:

<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. Copiar toda la etiqueta ICON
7. En el mismo archivo, busque el marcador que creó e inserte la etiqueta ICON que copió en su etiqueta del marcador :

<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. Guardar este archivo
9. Vuelve al Administrador de marcadores de Chrom, haz clic de nuevo en Organizar y selecciona Importar.
10. Importe el archivo HTML que acaba de editar, su marcador ahora tiene un favicon .

Básicamente, el procedimiento es obtener el atributo ICON de una etiqueta de marcador e insertarlo en la etiqueta de marcador

Eso no es del todo correcto: un marcador no tiene dominio, pero tiene una ubicación (que es el marcador en sí) y puede asignarle un icono. Después de eso, es una cuestión de cómo el navegador guarda los iconos (Firefox guarda el icono de un marcador de forma permanente, es posible que no tenga tanta suerte con otros navegadores).

PS Security ni siquiera juega con eso, los íconos pueden venir de cualquier parte. No hay ninguna restricción.

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

Después de leer el tapper [ware] y el sitio de Restafarian, aquí está la solución más simple que se me ocurrió:

<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 muy bien en Chrome y FF, pero FF4 es el único navegador que guardará el icono en la barra de marcadores. Así es como se ve: http://cl.ly/5WNR

Esta es una buena técnica que casi hace lo que quieres.

Funciona muy bien en mi Mac✅, pero no pude hacerlo funcionar en Windows 7⃣.❌

Usa "Emoji" 🈳. Son caracteres Unicode, que también parecen iconos de colores. Solo puede elegir de una lista predefinida de imágenes, pero en realidad no está mal💩 si todo lo que está tratando de hacer es darle al usuario algo que mirar👓 para recordarle lo que hace el bookmarklet.

Por ejemplo, estoy creando un bookmarklet📖 de "clave de seguridad". ¡Así que uso 🔑 en el nombre de mi marcador! 😃😊

Básicamente, ves la imagen🎑 en la barra de marcadores 😝

Utilice este sitio para encontrar un Emoji que funcione para su bookmarklet: http://emojipedia.org/symbols/

Según la sugerencia de Wizek, puede poner su código en un 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>

Y guarde todo eso como marcador. ( Pruébelo, arrastre el código a la barra de pestañas)

Desafortunadamente, solo funciona en ciertos casos (más abajo).

Cómo funciona:

(Al menos en Chrome) Es similar a un bookmarklet que usa el formato javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"que han sugerido otras soluciones. En ese caso, el html de la página en la que se encuentra será reemplazado por el html del bookmarklet, pero la ubicación seguirá siendo la misma y el bookmarklet en sí no tendrá una ubicación, por lo que Chrome no podrá guardar un favicon para él.

Por el contrario, con un marcador de uri de datos vamos a la otra página , tiene su propia ubicación y el navegador puede guardar un favicon para él. Piense en ello como "Alojar un sitio web en su navegador", al que podría acceder en otras computadoras si sincroniza sus marcadores. También puede usar una imagen base64 para el favicon en lugar de una URL si desea mantener todo local.

Tiene limitaciones.

• Cuando hace clic en él, sale de la página actual y carga la página en los datos . Por lo tanto, no podrá usarlo para los marcadores que interactúan con la página actual, solo para el código que puede ejecutar en una página diferente.

• No uses // para comentarios. Dado que todo se guardará en una línea, envuélvalos en / ** / y no olvide sus puntos y comas

• En FF guardó el favicon, pero no pude configurarlo para que siempre abriera ventanas emergentes si quiero usar window.open () porque no me permite guardar un comportamiento predeterminado para las URL de datos

Como ejemplo:

Usando esta técnica creé un pequeño Bookmarklet con Icon Generator. Puede arrastrar este código a su barra de URL (o guardarlo como marcador) para usarlo. Es una página simple con un área de entrada para el código y para un ícono, y luego genera un marcador con el ícono

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>

Otro ejemplo: Bookmarklet para abrir Facebook Messenger en su propia ventana pequeña (puede que no funcione si su navegador bloquea las ventanas emergentes de forma predeterminada)

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>

Otras soluciones de Chrome para obtener íconos de marcadores:

• Exportar la barra de marcadores, editarla e importarla nuevamente, como se describe en esta respuesta /superuser/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- Google Chrome

• Convirtiendo el bookmarklet en una extensión. Ya no será un bookmarklet, pero tendrá la misma función. Aquí hay un sitio web simple que lo hace por usted http://sandbox.self.li/bookmarklet-to-extension/ luego simplemente cambie el archivo de icono a lo que desee. El inconveniente de esto es que las extensiones consumen memoria RAM (¿alrededor de 10 MB para las simples?), Si tiene mucho y poco RAM, puede que no sea la solución para usted. Además, no tendrá texto como en un marcador, solo el ícono.

Es posible asignar y modificar favicon el favicon usando javascript y canvas (ver el increíble juego de favicon Defender of the Favicon ). El código fuente del juego te ayudará a hacer eso (básicamente se basa en el uso de la función toDataUrl () en el lienzo como se ve en la línea 554 de la fuente).

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

¿Qué sucede cuando se hace clic o se guarda un bookmarlet que configura el favicon de esta manera? No lo sé, pero sería bueno intentarlo. ¿El navegador puede guardarlo?

Creo que una forma posible es usar unicode char en el ancla de bookmarklet como su ícono:

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

Examinando todos los símbolos posibles, es posible que encuentre el personaje que se parece más al icono que desea

Por lo tanto, esta no es una solución completa todavía, pero puede ser un paso hacia una dirección de trabajo.

data:la codificación de un icono en un data:html codificado -uri funciona, para mi sorpresa.

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

Dado que esto es así <html>, también podemos correr <script type="javascript">allí.

Para algunos bookmarklets, esto puede ser más que suficiente. Para otros que deseen modificar la página actual o al menos obtener información de ella antes de abrir una nueva pestaña, mala suerte todavía. Actualizaré esta respuesta si encuentro una manera de hacerlo.