Анімація фавікона JS
<html>
<head>
<meta charset="utf-8">
<title>Анімація favicon</title>
<link id="icon" rel="icon" href="" type="image/png">
</head>
<body>
<p>Анімація favicon за допомогою декількох зображеннь.</p>
<script>var index=0, arr_icon=['img0.png','img1.png', 'img2.png','img3.png'], link=document.getElementById('icon');
function animateIcon(){
index++;
if(index>=arr_icon.length)index=0;
link.href='./'+arr_icon[index];
setTimeout(animateIcon,500);
}
animateIcon();</script>
</body>
</html>Можна зробити анімацію фавікона і через canvas - метод - canvas.toDataURL().:
<html>
<head>
<meta charset="utf-8">
<title>Приклад анімації favicon</title>
<link id="icon" rel="icon" href="" type="image/png">
</head>
<body>
<p>Анімація favicon за допомогою canvas.</p>
<script>var canvas=document.createElement('canvas'), link=document.getElementById('icon'), arrayText=['JS','','J','a','v','a','s','c','r','i','p','t'],index=0;
canvas.width=54;
canvas.height=54;
var ctx=canvas.getContext('2d');
ctx.font='42px Arial';
ctx.textBaseline = 'middle';
ctx.textAlign='center';
function canvasIcon(){
index++;
if(index>=arrayText.length)index=0;
ctx.fillStyle='#3d3e3d';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle='red';
//малюємо на полотні текст
ctx.fillText(arrayText[index],25,30);
link.href=canvas.toDataURL();
setTimeout(canvasIcon, 500)
}
canvasIcon();</script>
</body>
</html>