El cambio de favicon del sitio web de forma dinámica

https://stackoverflow.com/questions/260857

06-07-2019
|

Pregunta

Tengo una aplicación web que la marca de acuerdo con el usuario que actualmente ha iniciado la sesión.Me gustaría cambiar el favicon de la página el logotipo de la etiqueta privada, pero soy incapaz de encontrar cualquier código o cualquiera de los ejemplos de cómo hacer esto.Alguien ha hecho esto con éxito antes?

Estoy imaginando tener una docena de iconos en una carpeta, y la referencia a la que favicon.archivo ico para utilizar sólo es generado dinámicamente junto con la página HTML.Los pensamientos?

Solución

¿Por qué no?

(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 debería ser genial con él.

editado para sobrescribir correctamente los iconos existentes

Otros consejos

Aquí hay un código que funciona en Firefox, Opera y Chrome (a diferencia de cualquier otra respuesta publicada aquí). Aquí hay una demostración de código que también funciona en IE11 . El siguiente ejemplo podría no funcionar en Safari o 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);
}

Luego lo usaría de la siguiente manera:

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

Bifurcar o ver una demostración .

Si tiene el siguiente fragmento de HTML:

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

Puedes cambiar el favicon usando Javascript cambiando el elemento HREF en este enlace, por ejemplo (suponiendo que estés usando JQuery):

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

También puede crear un elemento Canvas y configurar HREF como ToDataURL() del lienzo, de manera muy similar a Defensor de favicon hace.

Versión jQuery:

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

o incluso mejor:

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

Versión Vanilla JS:

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

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

Un enfoque más moderno:

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

Puedes usarlo así:

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

El favicon se declara en la etiqueta de la cabeza con algo como:

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

Debería poder simplemente pasar el nombre del ícono que desea a lo largo de los datos de la vista y colocarlo en la etiqueta principal.

Aquí hay un código que uso para agregar soporte dinámico de favicon a Opera, Firefox y Chrome. Sin embargo, no pude hacer que IE o Safari funcionaran. Básicamente, Chrome permite favicons dinámicos, pero solo los actualiza cuando la ubicación de la página (o un iframe , etc.) cambia hasta donde puedo decir:

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

Para cambiar los favicons, simplemente vaya a favicon.change (" ICON URL ") usando lo anterior.

(créditos a http://softwareas.com/dynamic-favicons por el código en que basé esto en.)

Usaría el enfoque de Greg y haría un controlador personalizado para favicon.ico Aquí hay un controlador (simplificado) que funciona:

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

Luego puede usar ese controlador en la sección httpHandlers de la configuración web en IIS6 o usar la función 'Asignaciones de controladores' en IIS7.

La única forma de hacer que esto funcione para IE es configurar su servidor web para que trate las solicitudes de * .ico para que llame al lenguaje de script del lado del servidor (PHP, .NET, etc.). También configure * .ico para redirigir a un solo script y hacer que este script entregue el archivo favicon correcto. Estoy seguro de que todavía habrá algunos problemas interesantes con la memoria caché si desea poder rebotar de un lado a otro en el mismo navegador entre diferentes favicons.

Hay una solución de línea única para quienes usan jQuery:

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

Según WikiPedia , puede especificar qué archivo favicon cargar con el enlace en la sección head , con un parámetro de rel = " icon " .

Por ejemplo:

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

Me imagino que si quisieras escribir contenido dinámico para esa llamada, tendrías acceso a cookies para poder recuperar la información de tu sesión de esa manera y presentar el contenido apropiado.

Puede fallar los formatos de archivo (se dice que IE solo admite su formato .ICO, mientras que la mayoría de los demás admite imágenes PNG y GIF) y posiblemente problemas de almacenamiento en caché, tanto en el navegador como a través de servidores proxy. Esto se debería a la versión original de favicon, específicamente, para marcar un marcador con el mini-logotipo de un sitio.

Sí totalmente posible

Use una cadena de consulta después del favicon.ico (y otros enlaces de archivos - ver el enlace de respuesta a continuación)
Simplemente asegúrese de que el servidor responda al " someUserId " con el archivo de imagen correcto (que podrían ser reglas de enrutamiento estáticas , o dinámico código del lado del servidor).

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

Luego, sea cual sea el lenguaje / marco del lado del servidor que use, debería poder encontrar fácilmente el archivo basado en el ID de usuario y servirlo en respuesta a esa solicitud .

Pero para hacer favicons correctamente (en realidad es un realmente tema complejo ) vea la respuesta aquí < a href = "https://stackoverflow.com/a/45301651/661584"> https://stackoverflow.com/a/45301651/661584

Mucho más fácil que resolver todos los detalles usted mismo.

Disfruta.

O si quieres un emoticón :)

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());

Accesorios para https://koddsson.com/posts/emoji-favicon/

Utilizo favico.js en mis proyectos.

Permite cambiar el favicon a una gama de formas predefinidas y también personalizadas.

Internamente utiliza canvas para renderizar y base64 URL de datos para la codificación de iconos.

La biblioteca también tiene buenas características: insignias de iconos y animaciones; supuestamente, incluso puede transmitir el video de la cámara web al icono :)

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow