वेबसाइट favicon को गतिशील रूप से बदलना

Question

मेरे पास एक वेब एप्लिकेशन है जो उस उपयोगकर्ता के अनुसार ब्रांडेड है जो वर्तमान में लॉग इन है। मैं निजी लेबल का लोगो होने के लिए पृष्ठ के फ़ेविकॉन को बदलना चाहूंगा, लेकिन मैं किसी भी कोड या किसी भी उदाहरण का पता लगाने में असमर्थ हूं यह करने के लिए। क्या किसी ने इससे पहले सफलतापूर्वक किया है?

मैं एक फ़ोल्डर में एक दर्जन आइकन होने का चित्रण कर रहा हूं, और जिस संदर्भ का उपयोग करने के लिए favicon.ico फ़ाइल है वह बस HTML पेज के साथ गतिशील रूप से उत्पन्न होता है। विचार?

Comments

वहाँ एक है आर्केड खेल एक फ़ेविकॉन में।

— कोरी ट्रेगर

ध्यान दें कि Chrome का गतिशील फ़ेविकॉन कार्यान्वयन छोटी गाड़ी है और बहुत अधिक CPU का उपयोग करता है। देखें code.google.com/p/chromium/issues/detail?id=121333

— brillout

आर्केड गेम के लिए लिंक बदल गया। यह सही है।

— तुलसी

Stackoverflow.com/questions/6296574/… कैसे कैनवास के साथ एक टेम्पलेट छवि के शीर्ष पर ड्राइंग द्वारा फ़ेविकॉन को अद्यतन करने के लिए देखें ।

— संभालें

स्वीकार किए गए उत्तर में दिए गए कोड उदाहरण में छोटा बग। मेरे पास उत्तरों पर टिप्पणी करने के लिए पर्याप्त प्रतिष्ठा स्कोर नहीं है, इसलिए इसके बजाय यहां लिखना है। अंतिम पंक्ति में कोष्ठक स्वैप किया गया है:} ()); पढ़ना चाहिए })(); यह अच्छा होगा कि कोड उदाहरण अपडेट हो जाए क्योंकि यह सबसे अधिक संभावना है कि दूसरों द्वारा कॉपी और पेस्ट किया जाए।

— गोरान डब्ल्यू

Answer 1

क्यों नहीं?

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

फ़ायरफ़ॉक्स को इससे ठंडा होना चाहिए।

मौजूदा आइकन को ठीक से अधिलेखित करने के लिए संपादित किया गया

Comments

मैं सोच रहा हूँ कि यह वही है जो मैं देख रहा हूँ, लेकिन मुझे डेटाबेस से उपयुक्त HREF कैसे मिलेगा। मुझे लगता है कि मुझे जावास्क्रिप्ट से एक सर्वर लुकअप करना होगा, लेकिन मैं नहीं चाहता कि यह बहुत जटिल हो। पारितोषिक के लिए धन्यवाद।

— SqlRyan

चूंकि यह IE में वैसे भी काम नहीं करता है, आप विशेषता shortcutसे हटा सकते हैं rel। shortcutएक अवैध IE- मालिकाना लिंक संबंध है!

— मथियास बीनेंस

आप बस किसी मौजूदा फ़ेविकॉन लिंक को आसानी से देख सकते हैं और इसे अपडेट कर सकते हैं या बदल सकते हैं।

— केपरो

Google इस url का उपयोग करके आपको साइट का फ़ेविकॉन दे सकता है, जो आप चाहते हैं कि डोमेन के साथ stackoverflow.com को प्रतिस्थापित करें: s2.googleusercontent.com/s2/favicons?domain=stackoverflow.com

— kiran

क्रोम काम में जावास्क्रिप्ट कंसोल में इसे दर्ज करना चाहिए? मैं इसे विभिन्न साइटों पर फेविकॉन को बदलने के लिए नहीं पा सकता।

— powerj1984

Answer 2

यहाँ कुछ कोड है जो फ़ायरफ़ॉक्स, ओपेरा और क्रोम में काम करता है (यहाँ पोस्ट किए गए हर दूसरे उत्तर के विपरीत)। यहां कोड का एक अलग डेमो है जो IE11 में भी काम करता है। निम्नलिखित उदाहरण सफारी या इंटरनेट एक्सप्लोरर में काम नहीं कर सकता है।

/*!
 * 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);
}

फिर आप इसे इस प्रकार उपयोग करेंगे:

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

कांटा दूर या डेमो देखें ।

Comments

क्रोम बग क्रोम 6 (जारी किया सितं, 10) में तय किया गया था, तो क्रोम हैक अब और वास्तव में आवश्यक नहीं है - वास्तव में, मैं दृढ़ता से इसे प्रयोग नहीं करने का सुझाव था के बाद से यह आगे बटन टूट जाता है।

— josh3736

Chrome बग को ठीक किया जा सकता है, लेकिन यह 14.0.835.187 में फिर से टूट गया है।

— डैनॉर्टन

डेमो क्रोम 21 / WinXP के साथ मेरे लिए काम नहीं कर रहा है।

— ह्यूगो

Chrome 26 / Win7 में डेमो मेरे लिए काम नहीं कर रहा है। document.head || document.head = document.getElementsByTagName('head')[0]; Uncaught ReferenceError: Invalid left-hand side in assignment

— पैट्रिक

यह वर्तमान में समर्थित सभी ब्राउज़रों में काम करता है (IE 11, एज, FF और क्रोम) सफारी के साथ परीक्षण करने में असमर्थ

— आरोन

Answer 3

यदि आपके पास निम्न HTML स्निपेट है:

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

आप उदाहरण के लिए, इस लिंक पर HREF तत्व को बदलकर जावास्क्रिप्ट का उपयोग करके फ़ेविकॉन को बदल सकते हैं (यह मानकर कि आप उपयोग कर रहे हैं):

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

आप कैनवस तत्व भी बना सकते हैं और HREF को कैनवास के ToDataURL () के रूप में सेट कर सकते हैं, जैसे कि फेविकॉन डिफेंडर करता है।

Comments

मुझे लगता है कि जब तक JS चलता है, तब तक ब्राउज़र पहले ही लिंक देख चुका होता है और लोड करने की कोशिश करता है favicon.png। यह सर्वर-साइड किए जाने की आवश्यकता हो सकती है।

— cHao

आप JQuery का उपयोग नहीं करते हैं, तो आप बदल सकते हैं hrefकी विशेषता #faviconका उपयोग करते हुए document.getElementById('favicon').setAttribute('href','favicon2.png') हो सकता है कि आप अपनी पोस्ट @fserb में जोड़ सकते हैं?

— जोहानचोपिन

Answer 4

jQuery संस्करण:

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

या इससे भी बेहतर:

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

वेनिला जेएस संस्करण:

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

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

Comments

@pkExec इस और केपरो के उत्तर (चुना हुआ उत्तर) के संयोजन ने इसे मेरे लिए ff और क्रोम दोनों में काम किया।

— श्रीमती

Answer 5

अधिक आधुनिक दृष्टिकोण:

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

आप इसे इस तरह उपयोग कर सकते हैं:

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

Answer 6

फ़ेविकॉन को हेड टैग में कुछ इस तरह से घोषित किया जाता है:

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

आप केवल उस आइकन का नाम पास करने में सक्षम होना चाहिए जिसे आप दृश्य डेटा में चाहते हैं और उसे हेड टैग में फेंक सकते हैं।

Comments

IIRC, हालांकि, कुछ ब्राउज़र (मैं आपकी दिशा में देख रहा हूं, IE) वास्तव में कभी-कभी इसका सम्मान नहीं करता है।

— मैथ्यू Schinckel

(मैंने पाया कि मेरे पास स्पष्ट लिंक के बजाय सही स्थान पर आइकन फ़ाइल होने के बेहतर परिणाम थे)।

— मैथ्यू Schinckel

Answer 7

यहाँ कुछ कोड का उपयोग मैं ओपरा, फ़ायरफ़ॉक्स और क्रोम में डायनामिक फ़ेविकॉन सपोर्ट जोड़ने के लिए करता हूँ। मैं IE या सफारी हालांकि काम नहीं कर सका। मूल रूप से Chrome डायनामिक फ़ेविकॉन्स की अनुमति देता है, लेकिन यह केवल उन्हें अपडेट करता है जब तक कि पृष्ठ का स्थान (या iframeउसमें आदि) तब तक बदल जाता है जब तक मैं बता सकता हूं:

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

फ़ेविकॉन को बदलने के लिए, बस favicon.change("ICON URL")ऊपर का उपयोग करके जाएं ।

( कोड I पर आधारित इस कोड के लिए http://softwareas.com/dynamic-favicons पर क्रेडिट ।)

Comments

क्रोम बग क्रोम 6 (जारी किया सितं, 10) में तय किया गया था, तो क्रोम हैक अब और वास्तव में आवश्यक नहीं है - वास्तव में, मैं दृढ़ता से इसे प्रयोग नहीं करने का सुझाव था के बाद से यह आगे बटन टूट जाता है।

— josh3736

क्रोम में अभी भी वही बग है, जो विशिष्ट बग की तुलना में थोड़ा अलग परिस्थितियों में है। code.google.com/p/chromium/issues/detail?id=99549

— danorton

Answer 8

मैं ग्रेग के दृष्टिकोण का उपयोग करूँगा और favicon.ico के लिए एक कस्टम हैंडलर बनाऊँगा जो काम करता है एक (सरलीकृत) हैंडलर है:

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

फिर आप उस हैंडलर का उपयोग IIS6 में वेब कॉन्फिगर के httpHandlers अनुभाग में कर सकते हैं या IIS7 में 'हैंडलर मैपिंग' सुविधा का उपयोग कर सकते हैं।

Comments

मैं वास्तव में उत्सुक हूं कि यह क्यों घट गया? यह वास्तव में सबसे अच्छा जवाब है, जो अन्य लोगों को स्क्रिप्टिंग पर भरोसा करते हैं, जो उपलब्ध हो सकता है या नहीं उपलब्ध है।

— 18

@ethermal क्योंकि ऐसा लगता है कि यह सर्वर की तरफ गतिशील है। ओपी क्लाइंट के पक्ष में गतिशीलता के लिए पूछ रहा था।

— एलेक्सिस विल्के

Answer 9

IE के लिए यह काम करने का एकमात्र तरीका आपको अपने सर्वर साइड स्क्रिप्टिंग भाषा (PHP, .NET, आदि) को कॉल करने के लिए * .ico के लिए अनुरोध करने के लिए वेब सर्वर सेट करना है। इसके अलावा एक स्क्रिप्ट को पुनर्निर्देशित करने के लिए * .ico सेटअप करें और इस स्क्रिप्ट को सही फ़ेविकॉन फ़ाइल वितरित करें। मुझे यकीन है कि कैश के साथ अभी भी कुछ दिलचस्प मुद्दे हैं अगर आप अलग फेविकॉन के बीच एक ही ब्राउज़र में आगे और पीछे उछालना चाहते हैं।

Answer 10

JQuery का उपयोग करने वालों के लिए एकल पंक्ति समाधान है:

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

Answer 11

या यदि आप एक इमोटिकॉन चाहते हैं :)

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

Https://koddsson.com/posts/emoji-favicon/ के लिए सहारा

Answer 12

विकीपीडिया के अनुसार , आप निर्दिष्ट कर सकते हैं कि किस फ़ेविकॉन फ़ाइल को एक पैरामीटर के साथ अनुभाग linkमें टैग का उपयोग करके लोड headकरना हैrel="icon" ।

उदाहरण के लिए:

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

मुझे लगता है कि अगर आप उस कॉल के लिए कुछ डायनामिक कंटेंट लिखना चाहते थे, तो आपके पास कुकीज़ तक पहुंच होगी ताकि आप अपने सत्र की जानकारी उस तरह से प्राप्त कर सकें और उपयुक्त सामग्री प्रस्तुत कर सकें।

आप फ़ाइल स्वरूपों के बेईमानी से गिर सकते हैं (IE कथित तौर पर यह केवल .ICO प्रारूप का समर्थन करता है, जबकि अधिकांश अन्य सभी पीएनजी और जीआईएफ छवियों का समर्थन करते हैं) और संभवतः कैशिंग मुद्दों, दोनों ब्राउज़र पर और प्रॉक्सी के माध्यम से। यह फ़ेविकॉन की मूल पुनरावृत्ति के कारण होगा, विशेष रूप से, साइट के मिनी लोगो के साथ एक बुकमार्क को चिह्नित करने के लिए।

Comments

उससे बहुत अधिक। stackoverflow.com/a/ जनरेटर साइट पर faqs / जानकारी आपको आश्चर्यचकित कर देगी - इस विषय के लिए बहुत कुछ है।

— मेमेडेवेलर जूल

9 वर्षों में वेब बहुत बदल जाता है।

— स्टेटिक्सन

Answer 13

हाँ बिलकुल संभव है

• एक querystring का उपयोग करेंFavicon.ico (और अन्य फ़ाइलें लिंक - नीचे उत्तर लिंक देखें) के बाद
• बस सुनिश्चित करें कि सर्वर सही छवि फ़ाइल के साथ "someUserId" का जवाब देता है (जो स्थिर रूटिंग नियम या डायनेमिक सर्वर साइड कोड हो सकता है)।

जैसे

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

फिर जो भी सर्वर साइड भाषा / रूपरेखा आप उपयोग करते हैं, वह आसानी से उपयोगकर्ता के आधार पर फ़ाइल को खोजने में सक्षम होना चाहिए और उस अनुरोध के जवाब में सेवा प्रदान करना चाहिए ।

लेकिन फ़ेविकन्स को ठीक से करने के लिए (वास्तव में वास्तव में एक जटिल विषय है ) इसका जवाब यहां देखें https://stackoverflow.com/a/45301651/661584

बहुत आसान हैअपने आप को सभी विवरणों को काम करने की तुलना में है।

का आनंद लें।

Comments

हाँ, लिंक अच्छा है। मुझे लगता है कि IE में इन उत्तरों के काम न करने का मुख्य कारण यह है कि वे उस डिफ़ॉल्ट आइकन का उपयोग नहीं करते हैं <link>, लेकिन इसके बजाय apple-touch-iconया किसी अन्य संस्करण की तलाश करते हैं।

— एलेक्सिस विल्के

Answer 14

मैं अपनी परियोजनाओं में favico.js का उपयोग करता हूं।

यह फ़ेविकॉन को पूर्वनिर्धारित आकृतियों की एक सीमा तक और कस्टम लोगों को बदलने की अनुमति देता है।

आंतरिक रूप से यह आइकन एन्कोडिंग के canvasलिए रेंडरिंग और base64डेटा URL के लिए उपयोग करता है ।

पुस्तकालय में अच्छी विशेषताएं भी हैं: आइकन बैज और एनिमेशन; कथित तौर पर, आप वेबकैम वीडियो को आइकन में स्ट्रीम भी कर सकते हैं :)

Comments

लिंक और पुस्तकालय बहुत उपयोगी हैं, कृपया विवरण प्रदान करें कि यह कैसे काम करता है ताकि यह प्रश्न के लिए एक मान्य उत्तर बन जाए।

— दीमा टिस्नेक

धन्यवाद @DimaTisnek मैंने अपना जवाब अपडेट कर दिया।

— ऑस्कर नेवरेज

Answer 15

मैं इस सुविधा का उपयोग हर समय साइटों को विकसित करने में करता हूं ... इसलिए मैं एक नज़र में देख सकता हूं कि किस टैब में स्थानीय, देव या उसमें चल रहे ठेस हैं।

अब जब क्रोम एसवीजी फेवीकोन्स का समर्थन करता है तो यह इसे पूरी तरह से आसान बना देता है।

तमंचा लिपि

पर एक हंस है https://gist.github.com/elliz/bb7661d8ed1535c93d03afcd0609360f एक डेमो साइट के लिए अंक मैं पर chucked है कि एक tampermonkey स्क्रिप्ट के लिए https://elliz.github.io/svg-favicon/

मूल कोड

एक और जवाब से इसे अपनाया ... बेहतर किया जा सकता है लेकिन मेरी जरूरतों के लिए काफी अच्छा है।

(function() {
    'use strict';

    // play with https://codepen.io/elliz/full/ygvgay for getting it right
    // viewBox is required but does not need to be 16x16
    const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <circle cx="8" cy="8" r="7.2" fill="gold" stroke="#000" stroke-width="1" />
      <circle cx="8" cy="8" r="3.1" fill="#fff" stroke="#000" stroke-width="1" />
    </svg>
    `;

    var favicon_link_html = document.createElement('link');
    favicon_link_html.rel = 'icon';
    favicon_link_html.href = svgToDataUri(svg);
    favicon_link_html.type = 'image/svg+xml';

    try {
        let favicons = document.querySelectorAll('link[rel~="icon"]');
        favicons.forEach(function(favicon) {
            favicon.parentNode.removeChild(favicon);
        });

        const head = document.getElementsByTagName('head')[0];
        head.insertBefore( favicon_link_html, head.firstChild );
    }
    catch(e) { }

    // functions -------------------------------
    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function svgToDataUri(svg) {
        // these may not all be needed - used to be for uri-encoded svg in old browsers
        var encoded = svg.replace(/\s+/g, " ")
        encoded = replaceAll(encoded, "%", "%25");
        encoded = replaceAll(encoded, "> <", "><"); // normalise spaces elements
        encoded = replaceAll(encoded, "; }", ";}"); // normalise spaces css
        encoded = replaceAll(encoded, "<", "%3c");
        encoded = replaceAll(encoded, ">", "%3e");
        encoded = replaceAll(encoded, "\"", "'"); // normalise quotes ... possible issues with quotes in <text>
        encoded = replaceAll(encoded, "#", "%23"); // needed for ie and firefox
        encoded = replaceAll(encoded, "{", "%7b");
        encoded = replaceAll(encoded, "}", "%7d");
        encoded = replaceAll(encoded, "|", "%7c");
        encoded = replaceAll(encoded, "^", "%5e");
        encoded = replaceAll(encoded, "`", "%60");
        encoded = replaceAll(encoded, "@", "%40");
        var dataUri = 'data:image/svg+xml;charset=UTF-8,' + encoded.trim();
        return dataUri;
    }

})();

बस अपने स्वयं के एसवीजी को पॉप करें (शायद जेक आर्चीबाल्ड के एसवीजीओएमजी के साथ साफ किया गया हो, यदि आप शीर्ष पर) में एक उपकरण का उपयोग कर रहे हैं। सुनिश्चित करें कि यह चौकोर है (व्यूबॉक्स विशेषता का उपयोग करके) और आप जाने के लिए अच्छे हैं।