Wie wird das Favicon / Symbol festgelegt, wenn das Lesezeichen in die Symbolleiste gezogen wird?

Ich habe mir ein Lesezeichen gemacht und es funktioniert einwandfrei, aber wenn es einer Symbolleiste in Opera oder Firefox hinzugefügt wird, wird nur das Standard-Lesezeichensymbol für den Browser (ein Globus bzw. ein Stern) verwendet. Meine Site hat ein Favicon, und das Fenster, die Registerkarte und sogar das Lesezeichen [Site] verwenden das von mir angegebene Favicon. Nur nicht mein Lesezeichen.

Wie kann ich meine Site oder mein Lesezeichen so codieren, dass das Lesezeichen auch das Favicon erhält?

Mir sind verschiedene manuelle Hackery-Techniken bekannt, mit denen Benutzer das Favicon nachträglich festlegen können, aber dies sind unerwünschte Lösungen.

Ein Lesezeichen verwendet das javascript://Schema und verfügt daher nicht über eine Domäne, aus der ein Favicon geladen werden kann.

Derzeit können Sie also kein Favicon für ein Lesezeichen bereitstellen. Stellen Sie sich das so vor: Erinnern Sie sich an die ganze Javascript-Sandbox - wo Javascript möglicherweise nicht auf etwas außerhalb der Domäne der Webseite zugreift, auf der es ausgeführt wird? Nun, ein Lesezeichen, das für die aktuelle Seite, die Sie gerade ansehen, an eine beliebige Domain gebunden sein muss, kann nicht auch an ein Favicon auf Ihrer eigenen Website gebunden werden.

Update: Nach der Antwort von Hans Schmucker besteht die Möglichkeit, ein Lesezeichen zu erstellen, das beim Laden durch den Browser in das Lesezeichenmenü ein HTML-Dokument mit einem Favicon generiert. Die Argumentation scheint zu funktionieren, aber ich habe so etwas noch nicht in Aktion gesehen und meine Tests sind negativ ausgefallen.

So können Sie das machen:

1. Ziehen Sie Ihr Lesezeichen in die Lesezeichenleiste.
2. Erstellen Sie daneben ein Lesezeichen für eine Site, deren Favicon Sie für Ihr Lesezeichen verwenden möchten.
3. Öffnen Sie den Lesezeichen-Manager, klicken Sie auf die Dropdown-Liste Organisieren und wählen Sie Exportieren. Speichern Sie Ihre Lesezeichen als HTML-Datei.
4. Öffnen Sie diese HTML-Datei im Texteditor.
5. Suchen Sie das Lesezeichen, das Sie gerade erstellt haben, beispielsweise das Google Mail-Lesezeichen. Sie sollten einen HTML-Code dafür haben, der folgendermaßen aussieht:

<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. Kopieren Sie das gesamte ICON-Tag
7. Suchen Sie in derselben Datei das von Ihnen erstellte Lesezeichen und fügen Sie das von Ihnen kopierte ICON-Tag in Ihr Lesezeichen- Tag ein:

<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. Speichern Sie diese Datei
9. Kehren Sie zum Chrom Bookmarks Manager zurück, klicken Sie erneut auf Organisieren und wählen Sie Importieren
10. Importieren Sie die gerade bearbeitete HTML-Datei. Ihr Lesezeichen verfügt jetzt über ein Favicon .

Grundsätzlich besteht das Verfahren darin, das ICON-Attribut eines Lesezeichen- Tags abzurufen und in das Lesezeichen- Tag einzufügen

Das ist nicht ganz richtig: Ein Lesezeichen hat keine Domain, aber einen Speicherort (das ist das Lesezeichen selbst), und Sie können diesem ein Symbol zuweisen. Danach kommt es darauf an, wie der Browser Symbole speichert (Firefox speichert das Symbol eines Lesezeichens dauerhaft, Sie haben möglicherweise nicht so viel Glück mit anderen Browsern).

PS Security spielt nicht einmal hinein, Symbole können von überall her kommen. Es gibt keine Einschränkung.

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

Nachdem ich die Website von tapper [ware] und Restafarian gelesen habe, ist hier die einfachste Lösung, die ich finden könnte:

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

Funktioniert hervorragend in Chrome und FF, aber FF4 ist der einzige Browser, der das Symbol in der Lesezeichenleiste speichert. So sieht es aus: http://cl.ly/5WNR

Hier ist eine schöne Technik, die fast macht, was Sie wollen

Funktioniert hervorragend auf meinem Mac✅, aber ich konnte es unter Windows 7⃣ nicht zum Laufen bringen

Verwenden Sie "Emoji" 🈳. Es sind Unicode-Zeichen, die zufällig auch wie bunte Symbole aussehen. Sie können nur aus einer vordefinierten Liste von Bildern auswählen, aber eigentlich ist es nicht schlecht, wenn Sie dem Benutzer nur etwas zum Anschauen geben möchten, um ihn daran zu erinnern, was das Lesezeichen tut.

Zum Beispiel mache ich ein Lesezeichen "Sicherheitsschlüssel". Also benutze ich 🔑 in meinem Lesezeichennamen! 😃😊

Im Grunde sehen Sie das Bild in der Lesezeichenleiste

Verwenden Sie diese Website, um ein Emoji zu finden, das für Ihr Lesezeichen geeignet ist: http://emojipedia.org/symbols/

Auf Vorschlag von Wizek können Sie Ihren Code in eine Daten- URL einfügen.

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>

Und speichern Sie das alles als Lesezeichen. ( Probieren Sie es aus! Ziehen Sie den Code in Ihre Registerkartenleiste.)

Leider funktioniert es nur in bestimmten Fällen (mehr unten).

Wie es funktioniert:

(Zumindest in Chrome) Es ähnelt einem Lesezeichen, das das Format verwendet, das javascript: "<html>...your html code here, including a javascript tag that will run when loaded...</html>"andere Lösungen vorgeschlagen haben. In diesem Fall wird der HTML-Code der Seite, auf der Sie sich befinden , durch den HTML-Code aus dem Lesezeichen ersetzt, der Speicherort bleibt jedoch unverändert und das Lesezeichen selbst hat immer noch keinen Speicherort, sodass Chrome kein Favicon dafür speichern kann.

Im Gegensatz dazu gehen wir mit einem Daten-Uri-Lesezeichen auf die andere Seite , es hat einen eigenen Speicherort und der Browser kann ein Favicon dafür speichern. Stellen Sie sich das als "Hosten einer Website in Ihrem Browser" vor, auf die Sie auf anderen Computern zugreifen können, wenn Sie Ihre Lesezeichen synchronisieren. Sie können anstelle einer URL auch ein base64-Image für das Favicon verwenden, wenn Sie alles lokal halten möchten.

Es hat Einschränkungen.

• Wenn Sie darauf klicken, verlässt es die aktuelle Seite und lädt die Seite in die Daten . Daher können Sie es nicht für Bookmarlets verwenden, die mit der aktuellen Seite interagieren, sondern nur für Code, den Sie auf einer anderen Seite ausführen können.

• Verwenden Sie // nicht für Kommentare. Da alles in einer Zeile gespeichert wird, wickeln Sie sie in / ** / ein und vergessen Sie Ihre Semikolons nicht

• In FF wurde das Favicon gespeichert, aber ich konnte es nicht so einstellen, dass Popup-Fenster immer geöffnet werden, wenn ich window.open () verwenden möchte, da ich damit kein Standardverhalten für Daten-URLs speichern kann

Als Beispiel:

Mit dieser Technik habe ich ein kleines Lesezeichen mit Symbolgenerator erstellt. Sie können diesen Code in Ihre URL-Leiste ziehen (oder als Lesezeichen speichern), um ihn zu verwenden. Es ist eine einfache Seite mit einem Eingabebereich für Code und für ein Symbol, und anschließend wird ein Lesezeichen mit dem Symbol erstellt

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>

Ein weiteres Beispiel: Lesezeichen zum Öffnen des Facebook Messenger in einem eigenen kleinen Fenster (funktioniert möglicherweise nicht, wenn Ihr Browser standardmäßig Popups blockiert)

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>

Weitere Chrome-Problemumgehungen zum Abrufen von Lesezeichen-Symbolen:

• Exportieren Sie die Lesezeichenleiste, bearbeiten Sie sie und importieren Sie sie erneut, wie in dieser Antwort beschrieben. Https://superuser.com/questions/212722/how-can-i-add-a-favicon-to-a-bookmarklet-in- Google Chrome

• Das Lesezeichen in eine Erweiterung verwandeln. Es wird kein Lesezeichen mehr sein, aber es wird dieselbe Funktion haben. Hier ist eine einfache Website, die dies für Sie erledigt: http://sandbox.self.li/bookmarklet-to-extension/. Ändern Sie dann einfach die Symboldatei in die gewünschte Datei. Der Nachteil dabei ist, dass Erweiterungen RAM verbrauchen (etwa 10 MB für einfache?). Wenn Sie viel und wenig RAM haben, ist dies möglicherweise nicht die Lösung für Sie. Außerdem haben Sie keinen Text wie in einem Lesezeichen, sondern nur das Symbol.

Es ist möglich, Favicon mit Javascript und Canvas zuzuweisen und zu modifizieren (siehe das erstaunliche Favicon-Spiel Defender of the Favicon ). Der Quellcode des Spiels hilft Ihnen dabei (er basiert im Wesentlichen auf der Verwendung der Funktion toDataUrl () auf der Leinwand, wie in Zeile 554 der Quelle gezeigt).

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

Was passiert, wenn ein Bookmarlet, das das Favicon auf diese Weise einstellt, angeklickt oder gespeichert wird? Ich weiß es nicht, aber es könnte schön sein, es zu versuchen. Browser kann es speichern?

Ich denke, dass ein möglicher Weg darin besteht, Unicode-Zeichen im Lesezeichenanker wie Ihr Symbol zu verwenden:

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

Wenn Sie alle möglichen Symbole durchsuchen, finden Sie möglicherweise das Zeichen, das dem gewünschten Symbol ähnlicher ist

Dies ist also noch keine vollständige Lösung, kann aber ein Schritt in eine Arbeitsrichtung sein.

data:data:Zu meiner Überraschung funktioniert die Codierung eines Symbols in einem -uri-codierten HTML-Code.

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

Da dies ist <html>, können wir rennen<script type="javascript"> dort hineinlaufen.

Für einige Lesezeichen ist dies möglicherweise bereits mehr als ausreichend. Für andere, die die aktuelle Seite ändern oder zumindest einige Informationen erhalten möchten, bevor sie einen neuen Tab öffnen, ist das noch ein Pech. Ich werde diese Antwort aktualisieren, wenn ich einen Weg finde, dies zu tun.