Notification.icon — Eigenschaft · JavaScript-Referenz

Signatur

Notification.prototype.icon

Beschreibung

Die Eigenschaft icon einer Notification-Instanz liefert die URL des Bildes, das der Browser bzw. das Betriebssystem neben Titel und Text der Benachrichtigung anzeigt. Die Eigenschaft ist schreibgeschützt. Der Wert wird ausschließlich über die Option icon im Notification()-Konstruktor oder in ServiceWorkerRegistration.showNotification() gesetzt.

Relative Angaben löst der Browser gegen die Basis-URL des Dokuments bzw. des Service Workers auf. Deshalb gibt icon in der Regel eine absolute URL zurück, auch wenn Sie im Konstruktor nur einen relativen Pfad wie /img/logo.png angegeben haben. Wurde kein Symbol übergeben, ist der Wert ein leerer String.

In der Praxis brauchen Sie die Eigenschaft vor allem beim Protokollieren und Debuggen. Außerdem können Sie damit in einem click-Handler oder bei getNotifications() im Service Worker herausfinden, welches Symbol eine bereits angezeigte Benachrichtigung hat, etwa um sie nach Typ zu unterscheiden.

Rückgabewert

Typ

string

Beschreibung

Die aufgelöste, absolute URL des Symbols oder ein leerer String "", wenn keine icon-Option angegeben wurde.

Beispiele

Symbol beim Erzeugen setzen und auslesen

const zeigeHinweis = async () => {
  const erlaubnis = await Notification.requestPermission();
  if (erlaubnis !== 'granted') return;

  const n = new Notification('Neue Nachricht', {
    body: 'Anna hat dir geschrieben.',
    icon: '/img/chat-icon.png' // relativer Pfad
  });

  // Die URL wird gegen die Seiten-URL aufgelöst
  console.log(n.icon);
};

zeigeHinweis();

https://example.com/img/chat-icon.png

Benachrichtigung ohne Symbol

if (Notification.permission === 'granted') {
  const n = new Notification('Backup abgeschlossen');
  console.log(JSON.stringify(n.icon)); // leerer String
  console.log(n.icon || 'kein Symbol gesetzt');
}

"" kein Symbol gesetzt

Im Service Worker nach Symbol filtern

// sw.js – nur Benachrichtigungen mit dem Warn-Symbol schließen
self.addEventListener('message', async (event) => {
  if (event.data !== 'warnungen-entfernen') return;

  const alle = await self.registration.getNotifications();
  alle
    .filter((n) => n.icon.endsWith('/img/warnung.png'))
    .forEach((n) => n.close());
});

Symbol im click-Handler protokollieren

const n = new Notification('Update verfügbar', {
  icon: 'https://cdn.example.com/icons/update-192.png',
  tag: 'app-update'
});

n.addEventListener('click', (e) => {
  const quelle = e.target;
  console.log(`Geklickt: ${quelle.title} (Symbol: ${quelle.icon})`);
  window.focus();
  quelle.close();
});

Geklickt: Update verfügbar (Symbol: https://cdn.example.com/icons/update-192.png)

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie n.icon = '...' bleibt wirkungslos und wirft im Strict Mode einen TypeError. Um das Symbol zu ändern, erzeugen Sie eine neue Benachrichtigung mit demselben tag. Sie ersetzt dann die alte.
Browser-Unterstützung: Chromium-Browser und Firefox unterstützen die Eigenschaft. Safari (macOS) stellt icon nicht bereit und zeigt immer das Symbol des Browsers bzw. der Web-App an. Unter macOS ignorieren außerdem manche Browser das Symbol in der systemeigenen Mitteilungszentrale oder zeigen es nur klein an.
Nur sichere Kontexte: Die Notifications API funktioniert nur über HTTPS (oder localhost) und nur, wenn die Nutzerin oder der Nutzer die Berechtigung erteilt hat.
Bildformat und Größe: Empfohlen sind quadratische PNGs mit etwa 192×192 Pixeln. Das Bild muss erreichbar sein. Bei Ressourcen von fremden Domains können CORS- oder CSP-Regeln (img-src) dazu führen, dass kein Symbol erscheint. Die Eigenschaft enthält trotzdem die URL.
Verwechseln Sie icon nicht mit badge (kleines einfarbiges Symbol, z. B. in der Android-Statusleiste) oder image (großes Inhaltsbild).

Siehe auch

Notification new Notification() Notification.badge Notification.image NetworkInformation.type