1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>decentsoftwa.re</title>
<!--
prevent favicon request, based on answers in
https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests
TODO: create favicon
-->
<link rel="icon" href="data:,">
</head>
<body>
<script>
function createFavicon() {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 32; // Set the size of the icon
canvas.height = 32;
context.fillStyle = 'rgba(0,0,0,0)'; // Background color
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = '15px sans-serif'; // Font and size
// Text color based on color sheme
context.fillStyle = window.matchMedia('(prefers-color-scheme: dark').matches ? 'white' : 'black';
context.fillText('DCT', 0, 24); // Draw the Unicode character
const link = document.createElement('link');
link.rel = 'icon';
link.href = canvas.toDataURL('image/png');
document.head.appendChild(link);
}
createFavicon();
// switch favicon color on dark mode change
window.matchMedia('(prefers-color-scheme: dark').addEventListener('change', (v) => {createFavicon()})
</script>
</body>
</html>
|