Alterando o favicon do site dinamicamente

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

  •  06-07-2019
  •  | 
  •  

Pergunta

Eu tenho um aplicativo da web com marca de acordo com o usuário que está conectado no momento.Gostaria de alterar o favicon da página para ser o logotipo da marca própria, mas não consigo encontrar nenhum código ou exemplo de como fazer isso.Alguém já fez isso com sucesso antes?

Estou imaginando ter uma dúzia de ícones em uma pasta, e a referência para qual arquivo favicon.ico usar é gerada dinamicamente junto com a página HTML.Pensamentos?

Foi útil?

Solução

Por que não? 

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

O Firefox deve ser legal com ele.

editado para ícones corretamente substituir existente

Outras dicas

Aqui está um código que funciona no Firefox, Opera e Chrome (ao contrário de qualquer outra resposta postado aqui). Aqui está uma diferente demonstração de código que funciona em IE11 também. O exemplo a seguir pode não funcionar no Safari ou 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);
}

Você, então, usá-lo da seguinte forma: 

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

Fork longe ou ver uma demonstração .

Se você tiver o seguinte snippet HTML:

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

Você pode alterar o favicon usando Javascript alterando o elemento HREF neste link, por exemplo (supondo que você esteja usando JQuery):

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

Você também pode criar um elemento Canvas e definir o HREF como ToDataURL() do canvas, assim como o Defensor de Favicon faz.

jQuery Versão: 

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

ou ainda melhor: 

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

versão Vanilla JS: 

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

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

Uma abordagem mais moderna: 

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

Você pode então usá-lo como este: 

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

O favicon é declarado na marca de cabeça com algo como: 

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

Você deve ser capaz de simplesmente passar o nome do ícone que deseja junto na vista de dados e jogá-lo na marca de cabeça.

Aqui está algum código que eu uso para adicionar suporte favicon dinâmica para Opera, Firefox e Chrome. Eu não poderia começar IE ou Safari trabalhar embora. Basicamente Chrome permite favicons dinâmicos, mas só atualiza-los quando o local da página (ou um iframe etc nele) muda tanto quanto eu posso dizer: 

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 favicons mudança, basta ir favicon.change("ICON URL") usando o acima.

(créditos para http://softwareas.com/dynamic-favicons para o código que eu base este por diante.)

Gostaria de usar a abordagem de Greg e fazer um manipulador personalizado para favicon.ico Aqui está uma (simplificado) manipulador 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;
    }
    }
}

Em seguida, você pode usar esse manipulador na seção httpHandlers da configuração web no IIS6 ou usar o recurso 'Mapeamentos de manipulador' no IIS7.

A única maneira de fazer este trabalho para IE é definir o seu servidor web para pedidos deleite para * .ico para chamar o servidor linguagem de script lado (PHP, NET, etc). Também configuração * .ico para redirecionar para um único script e ter esse script entregar o arquivo favicon correta. Eu tenho certeza que ainda vai ser algumas questões interessantes com cache, se você quer ser capaz de saltar para trás e para frente no mesmo navegador entre diferentes favicons.

Não há uma solução única linha para aqueles que usam jQuery: 

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

De acordo com a WikiPedia , você pode especificar qual arquivo favicon para carregar usando a tag link em seção head, com um parâmetro de rel="icon".

Por exemplo: 

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

Eu imagino se você queria escrever algum conteúdo dinâmico para essa chamada, você teria acesso aos cookies para que você possa recuperar a sua informação de sessão dessa forma e conteúdo presente apropriado.

Você pode colidir com formatos de arquivo (IE supostamente só suporta seu formato .ICO, enquanto a maioria toda a gente suporta imagens PNG e GIF) e, possivelmente, caching problemas, tanto no navegador e através de proxies. Isso seria por causa da itention original favicon, especificamente, para a marcação de um marcador com mini-logotipo de um site.

Sim totalmente possível

  • Use um querystring após o favicon.ico (e outros links de arquivos - veja link resposta abaixo)
  • Basta certificar-se as responde servidor para o "someUserId" com o arquivo de imagem correta (que poderia ser estática regras de roteamento, ou dinâmica código do lado do servidor).

por exemplo. 

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

Em seguida, qualquer servidor linguagem do lado / framework que você usa deve facilmente ser capaz de encontrar o arquivo com base na userId e servi-lo em resposta a esse pedido .

Mas para fazer favicons corretamente (sua realmente um realmente assunto complexo ), por favor veja a resposta aqui < a href = "https://stackoverflow.com/a/45301651/661584"> https://stackoverflow.com/a/45301651/661584

Um monte muito mais fácil que trabalhar todos os detalhes você mesmo.

Aproveite.

Ou se você quiser um emoticon:) 

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

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

Eu uso favico.js em meus projetos.

Ele permite mudar o favicon a uma gama de formas pré-definidas e também personalizados queridos.

Internamente ele usa canvas para renderização e base64 URL de dados para o ícone de codificação.

A biblioteca também tem características interessantes: emblemas ícones e animações; supostamente, você pode até mesmo transmitir o vídeo da webcam para o ícone:)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top