Làm thế nào để tạo một favicon trong javascript?

Question

Tôi muốn thêm favicon vào trang web để có thể xác định tab của trang đó. Tôi không muốn favicon là một tập tin, mặc dù. Cách tốt nhất để tạo một cái trong Javascript là gì?

Lý do

• Một file favicon đòi hỏi một yêu cầu HTTP bổ sung làm tăng thời gian tải trang.
• Thay đổi máy chủ web có thể thay đổi việc phân phối nội dung tĩnh sang một kiểu thời trang khác gây ra chứng đau đầu.

PS: Tôi đã trình bày a solution as an answer cho điều này, nhưng tôi tự hỏi nếu có cách nào tốt hơn.

Answer 1

Nếu đơn giản, hình thức dựa trên đồ họa đủ, người ta có thể sử dụng HTML5 Canvas để tạo ra một favicon. Đã có những nỗ lực thành công để modify a favicon image after loading it. Tương tự, người ta có thể tạo một favicon hoàn toàn bằng javascript bằng cách sử dụng API canvas cơ bản. Ví dụ sau tạo và đặt một favicon màu xám với một hình vuông màu xanh lá cây trên đó:

<script> 
    var canvas = document.createElement('canvas'); 
    canvas.width = 16; 
    canvas.height = 16; 
    var ctx = canvas.getContext('2d'); 
    ctx.fillStyle = "#aaa"; 
    ctx.fillRect(0, 0, 16, 16); 
    ctx.fillStyle = "#afa"; 
    ctx.fillRect(4, 4, 8, 8);    
    var link = document.createElement('link'); 
    link.type = 'image/x-icon'; 
    link.rel = 'shortcut icon'; 
    link.href = canvas.toDataURL("image/x-icon"); 
    document.getElementsByTagName('head')[0].appendChild(link); 
</script> 

Đối với phiên bản hiện lỗi thời Internet Explorer (< 9) người ta cần một cách giải quyết như Explorer Canvas. Xem official instructions về cách thực hiện điều đó.