a

Câu hỏi Thay đổi favicon trang web động


Tôi có một ứng dụng web được gắn nhãn theo người dùng hiện đang đăng nhập. Tôi muốn thay đổi favicon của trang thành biểu tượng của nhãn riêng tư, nhưng tôi không thể tìm thấy bất kỳ mã nào hoặc bất kỳ ví dụ nào về cách thức để làm điều này. Có ai đã làm điều này thành công trước đây không?

Tôi đang hình dung có một tá biểu tượng trong một thư mục và tham chiếu đến tệp favicon.ico nào được sử dụng chỉ được tạo động cùng với trang HTML. Suy nghĩ?


268
2017-11-04 04:11


gốc


Đây là một game arcade trong một favicon. - Corey Trager
Lưu ý rằng triển khai favicon động của Chrome là lỗi và sử dụng quá nhiều CPU. Xem code.google.com/p/chromium/issues/detail?id=121333 - brillout
Liên kết cho trò chơi điện tử đã thay đổi. Điều này là đúng. - Basil
Xem stackoverflow.com/questions/6296574/… về cách tự động cập nhật favicon bằng cách vẽ lên trên cùng của hình ảnh mẫu bằng canvas. - handle
Lỗi nhỏ trong ví dụ mã được cung cấp trong câu trả lời được chấp nhận. Tôi không có đủ điểm danh tiếng để bình luận về câu trả lời, do đó viết ở đây để thay thế. Dòng cuối cùng có các dấu ngoặc đơn được hoán đổi:} ()); nên đọc })(); Nó sẽ được tốt đẹp mà các ví dụ mã sẽ được cập nhật kể từ khi nó rất có thể sao chép và dán bởi những người khác. - Goran W


Các câu trả lời:


Tại sao không?

(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 nên được mát mẻ với nó.

đã chỉnh sửa để ghi đè đúng biểu tượng hiện có


290
2017-11-04 04:21



Tôi nghĩ rằng điều này là gần với những gì tôi đang tìm kiếm, nhưng làm thế nào tôi sẽ nhận được HREF thích hợp từ cơ sở dữ liệu. Tôi cho rằng tôi sẽ phải thực hiện tra cứu máy chủ từ javascript, nhưng tôi không muốn nó quá phức tạp. Cảm ơn vì tiền hỗ trợ. - SqlRyan
Vì điều này không hoạt động trong IE, bạn có thể xóa shortcut từ rel thuộc tính. shortcut là mối quan hệ liên kết độc quyền với IE! - Mathias Bynens
Bạn có thể dễ dàng tìm kiếm một liên kết favicon hiện có và cập nhật nó hoặc thay thế nó. - keparo
Google có thể cung cấp cho bạn một favicon của trang web bằng cách sử dụng url này, thay thế stackoverflow.com bằng tên miền bạn muốn: s2.googleusercontent.com/s2/favicons?domain=stackoverflow.com - kirb
Nên nhập điều này trong bảng điều khiển Javascript trong Chrome có hoạt động không? Tôi không thể làm cho nó thay đổi favicon trên các trang web khác nhau theo cách đó. - powerj1984


Dưới đây là một số mã hoạt động trong Firefox, Opera và Chrome (không giống như mọi câu trả lời khác được đăng ở đây). Đây là một sự khác biệt giới thiệu mã hoạt động trong IE11 quá. Ví dụ sau có thể không hoạt động trong Safari hoặc 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);
}

Sau đó bạn sẽ sử dụng nó như sau:

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

Bỏ đi hoặc là xem bản trình diễn.


71
2018-06-08 07:46



Các Lỗi Chrome đã được khắc phục trong Chrome 6 (phát hành ngày 10 tháng 9), do đó, việc hack Chrome không thực sự cần thiết nữa - trên thực tế, tôi khuyên bạn không nên sử dụng nó vì nó phá vỡ nút chuyển tiếp. - josh3736
Lỗi Chrome có thể đã được khắc phục, nhưng nó lại bị hỏng trong 14.0.835.187. - danorton
Các bản giới thiệu không hoạt động với Chrome 21 / WinXP. - Hugo
Bản trình diễn không hoạt động đối với tôi trong Chrome 26 / Win7. document.head || document.head = document.getElementsByTagName('head')[0];  Uncaught ReferenceError: Invalid left-hand side in assignment - Patrick
Điều này làm việc trong tất cả các trình duyệt hiện được hỗ trợ (IE 11, Edge, FF và Chrome) không thể kiểm tra bằng safari - Aaron


Nếu bạn có đoạn mã HTML sau:

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

Bạn có thể thay đổi favicon bằng cách sử dụng Javascript bằng cách thay đổi phần tử HREF trên liên kết này, ví dụ (giả sử bạn đang sử dụng JQuery):

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

Bạn cũng có thể tạo phần tử Canvas và đặt HREF thành ToDataURL () của canvas, giống như Hậu vệ Favicon làm.


39
2017-11-04 04:22



phương pháp này không hoạt động trong Mozilla Firefox
Tôi nghĩ rằng khi JS chạy, trình duyệt sẽ đã thấy liên kết và cố tải favicon.png. Điều này có thể cần phải được thực hiện phía máy chủ. - cHao


Phiên bản jQuery:

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

hoặc thậm chí tốt hơn:

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

Phiên bản Vanilla JS:

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

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

30
2018-06-14 19:49



Không hoạt động trên Firefox 31. - pkExec
@pkExec Sự kết hợp của câu trả lời này và câu trả lời của keparo ở trên (câu trả lời đã chọn) khiến nó hoạt động ở cả ff và chrome cho tôi. - MrShmee


Dưới đây là một số mã tôi sử dụng để thêm hỗ trợ favicon động cho Opera, Firefox và Chrome. Tôi không thể nhận được IE hoặc Safari làm việc mặc dù. Về cơ bản, Chrome cho phép các favicon động nhưng chỉ cập nhật chúng khi vị trí của trang (hoặc một iframe vv trong đó) thay đổi theo như tôi có thể nói:

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

Để thay đổi favicon, chỉ cần đi favicon.change("ICON URL") bằng cách sử dụng ở trên.

(các khoản tín dụng để http://softwareas.com/dynamic-favicons cho mã tôi dựa trên này.)


9
2018-05-27 09:10



Các Lỗi Chrome đã được khắc phục trong Chrome 6 (phát hành ngày 10 tháng 9), do đó, việc hack Chrome không thực sự cần thiết nữa - trên thực tế, tôi khuyên bạn không nên sử dụng nó vì nó phá vỡ nút chuyển tiếp. - josh3736
Chrome vẫn có lỗi tương tự, mặc dù trong các trường hợp hơi khác so với lỗi cụ thể được ghi nhận. code.google.com/p/chromium/issues/detail?id=99549 - danorton


Các favicon được khai báo trong thẻ head với một cái gì đó như:

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

Bạn sẽ có thể chỉ cần chuyển tên của biểu tượng mà bạn muốn cùng trong dữ liệu chế độ xem và ném nó vào thẻ đầu.


9
2017-11-04 04:20



IIRC, tuy nhiên, một số trình duyệt (Tôi đang tìm kiếm theo hướng của bạn, IE) không thực sự tôn trọng điều này đôi khi. - Matthew Schinckel
(Tôi thấy rằng tôi có kết quả tốt hơn chỉ có tệp biểu tượng ở đúng vị trí, thay vì liên kết rõ ràng). - Matthew Schinckel


Một cách tiếp cận hiện đại hơn:

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

Sau đó bạn có thể sử dụng nó như thế này:

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

9
2018-03-12 16:43