Introduzione
Una favicon non deve essere necessariamente statica. In applicazioni web come dashboard, chat, client email o strumenti di monitoraggio, l’icona della scheda può comunicare informazioni utili anche quando la pagina non è attiva. Per esempio, può mostrare il numero di notifiche non lette, indicare che un’operazione è in corso oppure segnalare la presenza di un errore.
Questo approccio non sostituisce i normali tag link per la favicon, ma li completa con una piccola logica JavaScript. L’icona viene generata tramite un elemento canvas e assegnata dinamicamente all’attributo href di un collegamento con rel="icon".
Il metodo è particolarmente utile quando l’interfaccia deve attirare l’attenzione dell’utente senza ricorrere a notifiche invasive. È comunque importante usarlo con moderazione: aggiornamenti troppo frequenti possono creare confusione e aumentare il lavoro del browser.
Codice completo
<!-- Inserire questo elemento nella sezione <head> del documento -->
<link id="dynamic-favicon" rel="icon" type="image/png" href="/favicon.png">
<!-- Contenuto visibile della pagina -->
<button id="add-notification" type="button">
Simula una nuova notifica
</button>
<button id="clear-notifications" type="button">
Azzera notifiche
</button>
<p>
Notifiche non lette:
<strong id="notification-count">0</strong>
</p>
<script>
const faviconLink = document.querySelector("#dynamic-favicon");
const notificationCount = document.querySelector("#notification-count");
const addButton = document.querySelector("#add-notification");
const clearButton = document.querySelector("#clear-notifications");
let unreadNotifications = 0;
function updateFavicon(count) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
// Una favicon standard usa spesso una dimensione di 32 x 32 pixel.
canvas.width = 32;
canvas.height = 32;
// Sfondo principale dell´icona.
context.fillStyle = "#2563eb";
context.fillRect(0, 0, canvas.width, canvas.height);
// Mostra la sigla del sito quando non ci sono notifiche.
context.fillStyle = "#ffffff";
context.font = "bold 18px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("S", 16, 16);
if (count > 0) {
// Badge rosso nell´angolo superiore destro.
context.fillStyle = "#dc2626";
context.beginPath();
context.arc(24, 8, 8, 0, Math.PI * 2);
context.fill();
// Il testo viene abbreviato se il numero è troppo grande.
const badgeText = count > 9 ? "9+" : String(count);
context.fillStyle = "#ffffff";
context.font = "bold 10px Arial";
context.fillText(badgeText, 24, 8);
}
// Converte il canvas in un´immagine utilizzabile come favicon.
faviconLink.href = canvas.toDataURL("image/png");
}
function renderNotificationCount() {
notificationCount.textContent = unreadNotifications;
updateFavicon(unreadNotifications);
// Aggiorna anche il titolo, utile per utenti e tecnologie assistive.
document.title = unreadNotifications > 0
? `(${unreadNotifications}) Dashboard`
: "Dashboard";
}
addButton.addEventListener("click", () => {
unreadNotifications += 1;
renderNotificationCount();
});
clearButton.addEventListener("click", () => {
unreadNotifications = 0;
renderNotificationCount();
});
// Disegna subito l´icona iniziale.
renderNotificationCount();
</script>Spiegazione
Il collegamento alla favicon
L’elemento con identificatore dynamic-favicon rappresenta il punto di collegamento tra il documento HTML e lo script. Inizialmente può puntare a una favicon statica, ad esempio /favicon.png. In questo modo il browser dispone già di un’immagine valida nel caso in cui JavaScript sia disabilitato o venga caricato in ritardo.
Lo script modifica la proprietà href dello stesso elemento. Il metodo toDataURL() trasforma il contenuto del canvas in una stringa contenente un’immagine PNG codificata. Il browser può quindi utilizzare quella stringa come nuova icona della scheda.
Disegnare il badge
Il canvas viene impostato a 32 × 32 pixel, una dimensione adeguata per una favicon semplice. Prima viene disegnato uno sfondo blu e poi una lettera centrale. Se il valore delle notifiche è maggiore di zero, lo script aggiunge un cerchio rosso e una cifra bianca.
Il valore viene limitato a 9+ quando supera nove notifiche. In una favicon lo spazio disponibile è molto ridotto: visualizzare numeri composti da molte cifre renderebbe il badge illeggibile.
Sincronizzare più indicatori
La funzione renderNotificationCount() aggiorna contemporaneamente il numero mostrato nella pagina, la favicon e il titolo del documento. Questa ridondanza è importante: non tutti gli utenti osservano la favicon con la stessa attenzione e alcuni dispositivi possono visualizzarla in modo diverso.
L’aggiornamento del titolo, per esempio, permette di leggere il numero delle notifiche anche nella barra delle schede. Inoltre, un contenuto testuale è più accessibile rispetto a un’informazione comunicata esclusivamente tramite colore o grafica.
Best practice
- Mantieni una favicon statica di fallback: inserisci sempre un percorso iniziale verso un file reale, come /favicon.png.
- Non usare soltanto il colore: combina il badge colorato con un numero nel titolo o con un testo visibile nella pagina.
- Limita gli aggiornamenti: cambia l’icona solo quando lo stato cambia realmente, evitando timer molto frequenti.
- Usa dimensioni semplici: una favicon è piccola; dettagli sottili, testo lungo e forme complesse diventano difficili da distinguere.
- Prevedi il contrasto: scegli colori sufficientemente contrastati per temi chiari e scuri.
- Gestisci gli errori del canvas: verifica che getContext("2d") restituisca un contesto valido prima di disegnare.
- Non sostituire le notifiche importanti: una favicon dinamica è un indicatore secondario e non dovrebbe essere l’unico modo per comunicare un errore o un messaggio urgente.
- Considera la privacy: evita di mostrare nella favicon informazioni sensibili o identificabili, soprattutto su computer condivisi.
In un progetto reale puoi memorizzare il numero delle notifiche in localStorage, riceverlo tramite WebSocket oppure aggiornarlo dopo una richiesta fetch(). La funzione updateFavicon() rimane riutilizzabile indipendentemente dalla sorgente del dato.
Riepilogo
Una favicon dinamica può trasformare l’icona della scheda in un piccolo indicatore di stato. La tecnica consiste nel creare un’immagine tramite canvas, convertirla con toDataURL() e assegnarla all’attributo href di un elemento link rel="icon".
Per ottenere un risultato professionale è consigliabile partire da una favicon statica, aggiornare anche il titolo e il contenuto testuale della pagina, limitare la frequenza dei cambiamenti e mantenere un design leggibile alle dimensioni ridotte. In questo modo l’icona diventa un supporto utile, senza compromettere accessibilità e usabilità.