I'm following a blog on how to animate favicon. I didn't get it to work, so I've broken it down into several pieces, concluding that the issue is that I'm not updating the favicon with the generated data.
The console tells me that favicon is not defined and the assignment fails.
<!doctype html>
<html lang="en">
<head>
<base href="/">
<!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> -->
<link rel="icon" type="image/png" href="" width=32px>
</head>
<script>
window.onload = function () {
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
if (!!context) {
context.clearRect(0, 0, 32, 32);
context.beginPath();
context.moveTo(0, 0); context.lineTo(0, 32);
context.moveTo(0, 0); context.lineTo(32, 32);
context.stroke();
const data = canvas.toDataURL("image/png");
console.log(data);
favicon.href = data;
}
};</script>
<body>
<canvas width="32" height="32"></canvas>
<app-root>Loading...</app-root>
</body>
</html>
I can see that the data appears in the console (assuming that it's the proper junk of info). However, the next line fails to execute. There's nothing in the blog about how favicon is defined and I wonder if it might be doable only in certain browsers/plattforms?
it needs to be a reference to the favicon link:
<link id=favicon rel="icon" type="image/x-icon" href="favicon.ico">
Create a reference to it in javascript:
const favicon = document.getElementById('favicon');