HTMLLinkElement.sizes — Eigenschaft · JavaScript-Referenz

Signatur

HTMLLinkElement.sizes

Beschreibung

Die Eigenschaft sizes spiegelt das HTML-Attribut sizes eines <link>-Elements wider. Sie gibt an, in welchen Pixelgrößen die verlinkte Ressource Symbole enthält. Sinnvoll ist das nur bei rel="icon" (und dem nicht standardisierten rel="apple-touch-icon"). Der Browser kann so das passende Favicon wählen, ohne alle Dateien herunterzuladen.

Der Wert ist eine live-DOMTokenList. Jeder Eintrag hat entweder die Form BREITExHÖHE (z. B. 32x32, das x darf auch groß geschrieben werden) oder ist das Schlüsselwort any. any steht für beliebig skalierbare Formate wie SVG. Mehrere Größen werden durch Leerzeichen getrennt, etwa bei einer .ico-Datei mit mehreren Auflösungen.

„Schreibgeschützt“ heißt hier nur, dass du der Eigenschaft kein anderes Objekt zuweisen kannst. Die Liste selbst änderst du über add(), remove(), toggle() oder value. Eine direkte Zuweisung eines Strings (link.sizes = "16x16") wird über [PutForwards=value] an sizes.value weitergereicht.

Typische Einsätze: in einer Web-App prüfen, welche Favicon-Größen vorhanden sind, Symbole dynamisch austauschen (z. B. ein Badge für ungelesene Nachrichten) oder Seiten-Metadaten auswerten.

Rückgabewert

Typ

DOMTokenList

Beschreibung

Live-Liste der Größenangaben aus dem sizes-Attribut. Fehlt das Attribut, ist die Liste leer (length === 0, value === "").

Beispiele

Größen aller Favicons auslesen (mit Fallback)

// HTML:
// <link rel="icon" href="/favicon.ico" sizes="16x16 32x32">
// <link rel="icon" href="/icon.svg" sizes="any" type="image/svg+xml">

const getSizes = (link) =>
  link.sizes instanceof DOMTokenList
    ? [...link.sizes]
    : (link.getAttribute('sizes') ?? '').split(/\s+/).filter(Boolean);

for (const link of document.querySelectorAll('link[rel~="icon"]')) {
  console.log(link.href, getSizes(link));
}

https://example.com/favicon.ico ["16x16", "32x32"] https://example.com/icon.svg ["any"]

Das größte verfügbare Icon finden

const pickLargestIcon = () => {
  let best = null;
  let bestSize = 0;
  for (const link of document.querySelectorAll('link[rel~="icon"]')) {
    const tokens = (link.getAttribute('sizes') ?? '').split(/\s+/).filter(Boolean);
    for (const token of tokens) {
      if (token.toLowerCase() === 'any') return link.href; // skalierbar gewinnt
      const [w] = token.toLowerCase().split('x').map(Number);
      if (w > bestSize) {
        bestSize = w;
        best = link.href;
      }
    }
  }
  return best;
};

console.log(pickLargestIcon());

https://example.com/icon.svg

Neues Favicon dynamisch mit Größe anlegen

const link = document.createElement('link');
link.rel = 'icon';
link.href = '/icons/badge-32.png';
link.type = 'image/png';

if (link.sizes instanceof DOMTokenList) {
  link.sizes.add('32x32');
} else {
  link.setAttribute('sizes', '32x32');
}

document.head.append(link);
console.log(link.getAttribute('sizes'));

32x32

// Wichtig · Fallstricke

Browser-Unterstützung: Die IDL-Eigenschaft ist nicht in allen Browsern umgesetzt. Manche Engines geben undefined zurück, obwohl das HTML-Attribut ausgewertet wird. Prüfe deshalb mit link.sizes instanceof DOMTokenList und greif sonst auf getAttribute('sizes') zurück.
Nur für Icons sinnvoll: Bei anderen rel-Werten (z. B. stylesheet) ignoriert der Browser das Attribut.
Keine Validierung: DOMTokenList prüft die Einträge nicht. supports() wirft für sizes einen TypeError, weil es keine festen „unterstützten Tokens“ gibt. Falsche Angaben wie 32*32 werden stillschweigend übernommen.
Die Größen sind nur ein Hinweis. Der Browser lädt die Datei nicht, um sie zu prüfen. Stimmen Angabe und tatsächliche Bildgröße nicht überein, wird das Icon eventuell unscharf skaliert.
Die Liste ist live: Änderungen am Attribut sind sofort in der Eigenschaft sichtbar und umgekehrt.

Siehe auch

HTMLLinkElement DOMTokenList HTMLLinkElement.rel HTMLLinkElement.relList HTMLLinkElement.href Element.getAttribute() HTMLFontElement.size