Dynamically change the favicon

Question

This website somehow can display the amount of items in the shopping cart on top of it's tab icon.

(Click "in winkelmand" on any product)

How does it do it?

Answer 1

This website is using base64 image to display as favicon, like this

<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACf0lEQVQ4T2WTu09UURDGf3POXS67d1l87GJMhFCIWqpIgYrFhkpsjIWxIDFCfBX2FGpjBDoTGlGJhYk2/gGa0IiVGmOM/gMk+IB1WYFlcdm995hzboBdneY8Zr7vfHNmRgDM9Alj10aLBIwxaATEHZzb3ltTRpBrH0QawRZgTUS2AyUy7rxljQQ2vokgfkHcy1sg5STuCLR+67PE/xE4MB42PBKFMhFiai4NlxLK+e1eRSEiDQos2IJq+ERigwRtDC1RFaHuwKFoqtLiFGgTok0dMY/6jH0yxFATnyjIkcodAJ1ivbSEWV0gEW4SikfdS5Pp7MHYFNYLrC59t3/QZ2J5HhteQC3Txe4zZyGZhcVv/Hj7En++QOVTgdb2HH7/SYJzp1GLX1n88r6ZoKJTFFWO7vwF2HeEqLDE/PkrZK/fpm1kBDY3KU1OsjbzkODmAPWO2lYVhAhFVSUp6120H+6n5dgQPy/ewqxDdmqK0sQEiZ4egqEhFnp7kVSC9rsnd8oYAqG08kcHlIMusp15Fk5damqu3JMneN3d/BgcdPf+0SxSn+41SilX11ASVJXPss4SfE5QevBim2D/7CzJgQGXQunOHXev9/pI9LjPRFEU11p51I3HSmIP9bkqG09fNylI5vPb6ZSfPUMltS3j8bjNjIq7UHxWdRvL7yrI9BvSw8PsHR+nODbmwrb2lqD1UCYmcC2Jjgnw+KNSLG9mMPfmqH8vYnN3VQDWZmYojI66fe7GwfgTLYFRdmBsQyhqymdDtaGXfIr3XxGtVf4dVoL+LPsud1tEPM6WwE2jsUo8arRS1mlWfnuY5x9R879QlSpeZ5r2fAfpYxn01Q/yFy5wJeuF28oDAAAAAElFTkSuQmCC" type="image/png">

You can use favico.js to achieve dynamic cart badge in favicon. DEMO

This website uses WooCommerce for shopping cart functionality, you can refer following plugin to add dynamic favicon generation based on number of items in cart

Woocomerce Favicon Cart Badge