javascript - link - Cambio de sitio web favicon dinámicamente

favicon html w3schools

Question

Tengo una aplicación web que se marca de acuerdo con el usuario que está conectado actualmente. Me gustaría cambiar el icono de la página para que sea el logotipo de la etiqueta privada, pero no puedo encontrar ningún código ni ningún ejemplo de cómo para hacer esto. ¿Alguien ha hecho esto con éxito antes?

Imagino que tengo una docena de íconos en una carpeta, y la referencia a la cual usar el archivo favicon.ico se genera de manera dinámica junto con la página HTML. ¿Pensamientos?

Answer 1

Aquí hay algunos códigos que funcionan en Firefox, Opera y Chrome (a diferencia de todas las demás respuestas publicadas aquí). Aquí hay una demostración de código diferente 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ías de la siguiente manera:

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

Bifurcarse o ver una demo .

Answer 2

Aquí hay algunos códigos que uso para agregar soporte de favicon dinámico a Opera, Firefox y Chrome. Sin embargo, no pude hacer funcionar IE o Safari. Básicamente, Chrome permite favicons dinámicos, pero solo los actualiza cuando la ubicación de la página (o un iframe etc.) cambia tanto como 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, solo ve a favicon.change("ICON URL") usando lo anterior.

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

Answer 3

De acuerdo con WikiPedia , puede especificar qué archivo de favicon cargar con la etiqueta de link en la sección de head , con un parámetro de rel="icon" .

Por ejemplo:

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

Supongo que si desea escribir algún contenido dinámico para esa llamada, tendría acceso a las cookies para que pueda recuperar la información de su sesión de esa manera y presentar el contenido apropiado.

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

Answer 4

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 pasar el nombre del ícono que desea a lo largo de los datos de la vista y colocarlo en la etiqueta de la cabeza.

Answer 5

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

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

Answer 6

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

Answer 7

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..com/favicon.ico'';
    document.getElementsByTagName(''head'')[0].appendChild(link);
})();

Firefox debería estar bien con eso.

editado para sobrescribir correctamente los iconos existentes

Answer 8

Si tiene el siguiente fragmento de código HTML:

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

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

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

También puede crear un elemento Canvas y establecer el HREF como ToDataURL () del canvas, como lo hace Favicon Defender .

Answer 9

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..com/favicon.ico")

Answer 10

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 controlador'' en IIS7.

Answer 11

Uso favico.js en mis proyectos :)

Answer 12

Si totalmente posible

• Use una cadena de consulta después de favicon.ico (y otros enlaces de archivos - vea 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ía ser reglas de enrutamiento estático o código del lado del servidor dinámico ).

p.ej

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

Entonces, sea ​​cual sea el lenguaje / marco 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 tema realmente complejo), consulte la respuesta aquí .com/a/45301651/661584

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

Disfrutar.

Answer 13

Versión jQuery:

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

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