Динамическая иконка сайта (favicon)

Простейший способ создать динамически изменяемую фавиконку сайта при помощи javascript

Добавляем саму иконку в <head>:

<link id="favicon" rel="icon" href="favicon.png" type="image/png" sizes="16x16">

Скрипт для рисования иконки. В примере в качестве иконки рисуется кружок.

const favicon = document.getElementById('favicon');
const cv = document.createElement('canvas');
const ct = cv.getContext('2d');

cv.width = 16;
cv.height = 16;

function changeFav(color = '#f00') {
    ct.fillStyle = color; 
    ct.beginPath();
    ct.arc(8,8,7,0,Math.PI * 2);
    ct.fill();

    favicon.href = cv.toDataURL('image/png');
}

changeFav();

Поблагодарить через СберБанк:

4274320107381801

Остались вопросы или есть пожелания, замечания — пишите в комментарии: