it-swarm.com.de

Das Website-Favicon wird dynamisch geändert

Ich habe eine Webanwendung, deren Marke dem aktuell angemeldeten Benutzer entspricht. Ich möchte das Favicon der Seite in das Logo der Eigenmarke ändern, kann jedoch keinen Code oder Beispiele dafür finden um dies zu tun. Hat das schon jemand erfolgreich gemacht?

Ich stelle mir vor, ein Dutzend Symbole in einem Ordner zu haben, und der Verweis auf die zu verwendende Datei favicon.ico wird nur dynamisch zusammen mit der HTML-Seite generiert. Gedanken?

308
SqlRyan

Warum nicht?

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

Firefox sollte damit cool sein.

bearbeitet, um vorhandene Symbole ordnungsgemäß zu überschreiben

351
keparo

Hier ist ein Code, der in Firefox, Opera und Chrome (im Gegensatz zu allen anderen hier veröffentlichten Antworten) funktioniert. Hier ist ein anderes Demo-Code, der in IE11 funktioniert . Das folgende Beispiel funktioniert möglicherweise nicht in Safari oder Internet Explorer.

/*!
 * Dynamically changing favicons with JavaScript
 * Works in all A-grade browsers except Safari and Internet Explorer
 * Demo: http://mathiasbynens.be/demo/dynamic-favicons
 */

// HTML5™, baby! http://mathiasbynens.be/notes/document-head
document.head = document.head || document.getElementsByTagName('head')[0];

function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon');
 link.id = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {
  document.head.removeChild(oldLink);
 }
 document.head.appendChild(link);
}

Sie würden es dann wie folgt verwenden:

var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
 changeFavicon('http://www.google.com/favicon.ico');
};

Fork away oder Demo ansehen .

83
Mathias Bynens

Wenn Sie das folgende HTML-Snippet haben:

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

Sie können das Favicon mit Javascript ändern, indem Sie beispielsweise das HREF-Element auf diesem Link ändern (vorausgesetzt, Sie verwenden JQuery):

$("#favicon").attr("href","favicon2.png");

Sie können auch ein Canvas-Element erstellen und die HREF als ToDataURL () der Zeichenfläche festlegen, ähnlich wie dies beim Favicon Defender der Fall ist.

42
fserb

jQuery Version:

$("link[rel='shortcut icon']").attr("href", "favicon.ico");

oder noch besser:

$("link[rel*='icon']").attr("href", "favicon.ico");

Vanilla JS-Version:

document.querySelector("link[rel='shortcut icon']").href = "favicon.ico";

document.querySelector("link[rel*='icon']").href = "favicon.ico";
32
vorillaz

Ein moderner Ansatz:

const changeFavicon = link => {
  let $favicon = document.querySelector('link[rel="icon"]')
  // If a <link rel="icon"> element already exists,
  // change its href to the given link.
  if ($favicon !== null) {
    $favicon.href = link
  // Otherwise, create a new element and append it to <head>.
  } else {
    $favicon = document.createElement("link")
    $favicon.rel = "icon"
    $favicon.href = link
    document.head.appendChild($favicon)
  }
}

Sie können es dann wie folgt verwenden:

changeFavicon("http://www.stackoverflow.com/favicon.ico")
13

Das Favicon wird im head-Tag mit so etwas wie deklariert:

<link rel="shortcut icon" type="image/ico" href="favicon.ico">

Sie sollten in der Lage sein, den Namen des gewünschten Symbols in den Ansichtsdaten einfach weiterzugeben und in die Kopfmarke zu werfen.

10
Jeff Sheldon

Hier ist ein Code, den ich verwende, um Opera, Firefox und Chrome um dynamische Favicon-Unterstützung zu erweitern. Ich konnte IE oder Safari nicht zum Laufen bringen. Grundsätzlich Chrome ermöglicht dynamische Favoriten, aktualisiert sie jedoch nur, wenn der Speicherort der Seite (oder ein iframe etc drin) ändert sich soweit ich das beurteilen kann:

var IE = navigator.userAgent.indexOf("MSIE")!=-1
var favicon = {
    change: function(iconURL) {
        if (arguments.length == 2) {
            document.title = optionalDocTitle}
        this.addLink(iconURL, "icon")
        this.addLink(iconURL, "shortcut icon")

        // Google Chrome HACK - whenever an IFrame changes location 
        // (even to about:blank), it updates the favicon for some reason
        // It doesn't work on Safari at all though :-(
        if (!IE) { // Disable the IE "click" sound
            if (!window.__IFrame) {
                __IFrame = document.createElement('iframe')
                var s = __IFrame.style
                s.height = s.width = s.left = s.top = s.border = 0
                s.position = 'absolute'
                s.visibility = 'hidden'
                document.body.appendChild(__IFrame)}
            __IFrame.src = 'about:blank'}},

    addLink: function(iconURL, relValue) {
        var link = document.createElement("link")
        link.type = "image/x-icon"
        link.rel = relValue
        link.href = iconURL
        this.removeLinkIfExists(relValue)
        this.docHead.appendChild(link)},

    removeLinkIfExists: function(relValue) {
        var links = this.docHead.getElementsByTagName("link");
        for (var i=0; i<links.length; i++) {
            var link = links[i]
            if (link.type == "image/x-icon" && link.rel == relValue) {
                this.docHead.removeChild(link)
                return}}}, // Assuming only one match at most.

    docHead: document.getElementsByTagName("head")[0]}

Um die Favoriten zu ändern, gehen Sie einfach zu favicon.change("ICON URL").

(Dank an http://softwareas.com/dynamic-favicons für den Code, auf dem ich dies basiert habe.)

9
cryo

Ich würde Gregs Ansatz verwenden und einen benutzerdefinierten Handler für favicon.ico erstellen. Hier ist ein (vereinfachter) Handler, der funktioniert:

using System;
using System.IO;
using System.Web;

namespace FaviconOverrider
{
    public class IcoHandler : IHttpHandler
    {
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/x-icon";
        byte[] imageData = imageToByteArray(context.Server.MapPath("/ear.ico"));
        context.Response.BinaryWrite(imageData);
    }

    public bool IsReusable
    {
        get { return true; }
    }

    public byte[] imageToByteArray(string imagePath)
    {
        byte[] imageByteArray;
        using (FileStream fs = new FileStream(imagePath, FileMode.Open, FileAccess.Read))
        {
        imageByteArray = new byte[fs.Length];
        fs.Read(imageByteArray, 0, imageByteArray.Length);
        }

        return imageByteArray;
    }
    }
}

Anschließend können Sie diesen Handler im Abschnitt httpHandlers der Webkonfiguration in IIS6 verwenden oder die Funktion 'Handlerzuordnungen' in IIS7 verwenden.

5
Dan

Es gibt eine einzeilige Lösung für Benutzer von jQuery:

$("link[rel*='icon']").prop("href",'https://www.stackoverflow.com/favicon.ico');
3
Pepelegal

Die einzige Möglichkeit, diese Funktion für IE) zu aktivieren, besteht darin, Ihren Webserver so einzurichten, dass Anforderungen behandelt werden, mit denen * .ico Ihre serverseitige Skriptsprache (PHP, .NET usw.) aufruft. .ico, um zu einem einzelnen Skript umzuleiten und dieses Skript die richtige Favicon-Datei bereitstellen zu lassen. Ich bin mir sicher, dass es noch einige interessante Probleme mit dem Cache geben wird, wenn Sie in der Lage sein möchten, im selben Browser zwischen verschiedenen hin und her zu springen favicons.

3
Greg

Gemäß WikiPedia können Sie angeben, welche Favicon-Datei geladen werden soll. Verwenden Sie dazu das Tag link im Abschnitt head mit dem Parameter rel="icon".

Zum Beispiel:

 <link rel="icon" type="image/png" href="/path/image.png">

Ich stelle mir vor, wenn Sie einen dynamischen Inhalt für diesen Anruf schreiben möchten, haben Sie Zugriff auf Cookies, damit Sie Ihre Sitzungsinformationen auf diese Weise abrufen und entsprechenden Inhalt präsentieren können.

Es kann vorkommen, dass Dateiformate (der IE unterstützt angeblich nur das .ICO-Format, während die meisten anderen PNG- und GIF-Bilder unterstützen) und möglicherweise Probleme beim Zwischenspeichern auftreten, sowohl im Browser als auch über Proxys. Dies liegt an der ursprünglichen Erwähnung von Favicon, insbesondere zum Markieren eines Lesezeichens mit dem Mini-Logo einer Site.

2
staticsan

Oder wenn du ein Emoticon willst :)

var canvas = document.createElement("canvas");
canvas.height = 64;
canvas.width = 64;

var ctx = canvas.getContext("2d");
ctx.font = "64px serif";
ctx.fillText("☠️", 0, 64); 

$("link[rel*='icon']").prop("href", canvas.toDataURL());

Requisiten an https://koddsson.com/posts/emoji-favicon/

2
max4ever

Ja völlig möglich

  • Benutze einen Querystring nach der favicon.ico (und anderen Dateilinks - siehe Antwortlink unten)
  • Stellen Sie einfach sicher, dass der Server auf die "someUserId" mit der richtigen Image-Datei antwortet (dies können statische Routing-Regeln oder dynamische sein. serverseitiger Code).

z.B.

<link rel="shortcut icon" href="/favicon.ico?userId=someUserId">

Dann sollte welche serverseitige Sprache/Framework auch immer Sie verwenden, in der Lage sein, die Datei basierend auf der Benutzer-ID leicht zu finden und sie in Antwort auf diese Anfrage bereitzustellen =.

Aber um Favicons richtig zu machen (es ist eigentlich ein wirklichkomplexes Thema ) finden Sie die Antwort hier https://stackoverflow.com/a/45301651/661584

Viel einfacher als alle Details selbst herauszufinden.

Genießen.

2
MemeDeveloper