HTMLLinkElement: sizes property

The read-only sizes property of the {{domxref("HTMLLinkElement")}} interface defines the sizes of the icons for visual media contained in the resource. It reflects the {{HTMLElement("link")}} element's sizes attribute, which takes a list of space-separated sizes, each in the format <width in pixels>x<height in pixels>, or the keyword any.

It is only relevant if the {{domxref("HTMLLinkElement.rel", "rel")}} is icon or a non-standard type like apple-touch-icon.

Value

A {{domxref("DOMTokenList")}} object.

Although the sizes property itself is read-only in the sense that you can't replace the DOMTokenList object, you can still assign to the sizes property directly, which is equivalent to assigning to its {{domxref("DOMTokenList/value", "value")}} property. You can also modify the DOMTokenList object using the {{domxref("DOMTokenList/add", "add()")}}, {{domxref("DOMTokenList/remove", "remove()")}}, {{domxref("DOMTokenList/replace", "replace()")}}, and {{domxref("DOMTokenList/toggle", "toggle()")}} methods.

Examples

html

<link rel="icon" sizes="72x72 114x114" href="smallish.ico" />

const link = document.querySelector("[rel=icon],[rel=apple-touch-icon]");
console.dir(link.sizes); /* output:
  DOMTokenList [ "72x72", "114x114" ]
    0: "72x72"
    1: "114x114"
    length: 2
    value: "72x72 114x114"
  */
console.log(link.sizes.value); // output: '72x72 114x114'
console.log(link.sizes.length); // output: 2'
console.log(link.sizes[0]); // output: '72x72'
console.log(link.sizes[1]); // output: '114x114'

Value

Examples

Specifications

Browser compatibility

See also