Favicon-Karussell

Seht hier her, jetzt nach oben auf den Tab und jetzt wieder hier her. Ein blinkendes Emoji-Favicon!? Hexerei! Naja ganz so magisch ist es dann doch nicht, das folgende Snippet war mal wieder das Produkt einer "Was soll ich bloß coden"-Krise. Der Blog-Beitrag von Kristján Oddsson diente als Grundlage – ergänzt habe ich das Ganze lediglich um den dynamischen Aspekt. Dass man damit aber auch durchaus sinnvolle Sachen anstellen kann, wie zum Beispiel Notifications anzeigen, Ladebalken darstellen oder Prozent-Anzeigen durchrattern lassen - das zeigen allerhand Implementierungen im Internet. Beispiele für interaktive Favicons gefällig? Der Google Kalender zeigt in der Webansicht immer den aktuellen Tag im Favicon an, die Statusseite von GitHub gibt über das Favicon farbcodiertes Feedback zum aktuellen System-Status und auch Facebook nutzte mal eine rote Eins bei eingehenden Nachrichten. Es gibt sogar ein ganzes Game auf 16x16 Pixeln – Defender of the Favicon!

function setFavicons(favicons,url) {
	favicons.small.href = url;
	favicons.large.href = url;
}

function favicon() {
	let favicons = {
		'small': document.querySelector("link[rel='icon'][sizes='16x16']"),
		'large': document.querySelector("link[rel='icon'][sizes='32x32']")
	};

	if (favicons) {
		// let clocks= ['🕛','🕐','🕑','🕒','🕓','🕔','🕕','🕖','🕗','🕘','🕙','🕚'];
		let emojis = ['🔴','🟠','🟡','🟢','🔵','🟣','⚫️','⚪️','🟤'];
		let canvas = document.createElement("canvas");
		canvas.width = canvas.height = 60;
		let ctx = canvas.getContext("2d");
		let i = 0;
		let interval = setInterval(function() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				ctx.font = "60px serif";
				ctx.fillText(emojis[i], 0, 53);
				let url = canvas.toDataURL();
				setFavicons(favicons,url);
				i == (emojis.length - 1) ? i = 0 : i++;
		},500);
	}
}
favicon();