Ändern der website-favicon-dynamisch

StackOverflow https://stackoverflow.com/questions/260857

  •  06-07-2019
  •  | 
  •  

Frage

Ich habe eine web-Anwendung, die Marken-nach Angaben der Benutzer, der derzeit angemeldet ist.Ich würde das gerne ändern das favicon der Seite das logo der Eigenmarke, aber ich bin nicht in der Lage zu finden, alle code oder Beispiele dafür, wie dies zu tun.Hat jemand erfolgreich getan, bevor?

Ich bin Malte mit einem Dutzend Symbole in einen Ordner, und der Verweis auf die favicon.ico-Datei ist einfach dynamisch generiert zusammen mit der HTML-Seite.Gedanken?

War es hilfreich?

Lösung

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 es cool sein.

bearbeitet, um richtig vorhandene Symbole überschreiben

Andere Tipps

Hier ist ein Code, der in Firefox, Opera und Google Chrome (im Gegensatz zu jeder anderen Antwort hier gepostet) funktioniert. Hier ist eine andere Demo von Code, der auch in IE11 funktioniert. Das folgende Beispiel ist vielleicht 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 verwenden würde es dann wie folgt: 

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

Gabel weg oder sehen eine Demo .

Wenn Sie die folgende HTML-snippet:

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

Sie können ändern Sie das favicon mit Javascript durch ändern der HREF-element auf diesen link, zum Beispiel (vorausgesetzt, Sie verwenden JQuery):

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

Sie können auch erstellen Sie ein Canvas-element und stellen Sie das HREF-als ToDataURL() von der Leinwand, ähnlich wie die Favicon Defender tut.

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

Ein modernere 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 dann wie folgt verwenden: 

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

Das Favicon ist im Kopf-Tag mit etwas erklärt wie: 

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

Es soll möglich sein, nur den Namen des Symbols übergeben Sie zusammen in den Ansichtsdaten wollen und es in den Kopf-Tag werfen.

Hier ist ein Code, den ich auf dynamische Favicon-Unterstützung hinzufügen verwenden Opera, Firefox und Chrome. Ich konnte nicht IE oder Safari funktioniert aber. Grundsätzlich Chrome ermöglicht dynamische Favicons, sondern nur aktualisiert sie, wenn die Seite Standort (oder ein iframe etc drin) ändert sich, soweit ich sagen 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 Favicons zu ändern, gehen Sie einfach favicon.change("ICON URL") den oben.

(Kredite an http://softwareas.com/dynamic-favicons für den Code basiert ich dieses auf.)

würde ich Gregs Ansatz verwenden und einen benutzerdefinierten Handler für favicon.ico machen Hier ist eine (vereinfachte) -Prozedur, die 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;
    }
    }
}

Dann können Sie diese Prozedur im Httphandlers Abschnitt des Web-Config in IIS6 verwenden oder den 'Handler Mappings' -Funktion in IIS7 verwenden.

Die einzige Möglichkeit, diese Arbeit für IE zu machen ist, dass Sie Web-Server setzen Anfragen zu behandeln, für * ICO Ihre serverseitige Skriptsprache zu nennen (PHP, .NET, etc.). Auch Setup * ICO zu einem einzigen Skript zu umleiten und habe dieses Skript die richtige Favicon-Datei liefern. Ich bin sicher, es geht noch einige interessante Probleme mit Cache sein, wenn Sie in der Lage sein wollen, hin und her in der gleichen Browser zwischen verschiedenen favicons abprallen.

Es gibt eine einzige Linie Lösung für diejenigen, die jQuery verwenden: 

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

Nach WikiPedia , können Sie festlegen, welche Favicon-Datei mit dem link Tag laden in Abschnitt des head, mit einem Parameter von rel="icon".

Zum Beispiel: 

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

Ich stelle mir vor, wenn Sie einige dynamische Inhalte für diesen Anruf schreiben wollte, würden Sie den Zugriff auf Cookies, so dass Sie Ihre Session-Informationen, dass die Art und Weise und Gegenwart geeignete Inhalte abrufen können.

Sie können Foul von Dateiformaten fallen (IE Berichten zufolge unterstützt nur dann ist es ICO-Format, während die meisten anderen PNG und GIF-Bilder unterstützt) und eventuell Caching-Probleme, die beide auf dem Browser und über Proxies. Dies würde aufgrund der ursprünglichen itention von Favicon sein, speziell für die Kennzeichnung ein Lesezeichen mit einer Website Mini-Logo.

Ja durchaus möglich,

  • Verwenden Sie ein Abfragezeichenfolgeflag nach dem favicon.ico (und anderen Dateien Links - siehe Antwort Link unten)
  • Sie einfach sicherstellen, dass der Server auf die „someUserId“ antwortet mit die richtige Image-Datei (das sein könnte statisch Routing-Regeln, oder dynamische Server-Side-Code).

z. 

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

Dann was serverseitige Sprache / framework Sie verwenden sollten leicht zu finden sein können, die Datei auf der Grundlage der userId und dienen bis in Antwort auf diese Anfrage .

Aber favicons richtig (es ist eigentlich ein wirklich komplexes Thema ) zu tun, finden Sie hier die Antwort < a href = "https://stackoverflow.com/a/45301651/661584"> https://stackoverflow.com/a/45301651/661584

Viel viel einfacher als ausarbeitet alle Details selbst.

Genießen.

Oder wenn Sie ein Emoticon wollen:) 

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 zu https://koddsson.com/posts/emoji-favicon/

Ich benutze favico.js in meinen Projekten.

Es ermöglicht das Favicon zu einer Reihe von vordefinierten Formen und auch benutzerdefiniert diejenigen zu ändern.

Intern verwendet es canvas für das Rendering und base64 Daten URL für Symbol-Codierung.

Die Bibliothek hat auch nette Features: Symbol Abzeichen und Animationen; vorgeblich, Sie können sogar die Webcam-Videos in das Symbol streamen:)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top