HTML sizes attribute

sizes attribute defines the size of favicons or shortcut icons for visual media. The favicon can be seen in the tab bar.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="files/logo.png" sizes="32x32" type="image/png">
</head>
<body>
 <p>The icon can be seen in the tab bar of actual page and not in the editor.</p>
<body>
</html>
Try </>

icon is the value of rel attribute in the <link> element. <link> links the current document to the external resources.

sizes attribute value

There are two possible values.

  • any value means the icon is scalable (size of original bitmap image). It means the browser can use any size of icon.

  • The value of sizes attribute is width before x (uppercase or lowercase). Then the height is written followed by x. For example ,(40x40).

for multiple icons

  • 'x' must be present between width and height. width and height are in pixels (device pixels).

  • If multiple icons are present then the browser selects one icon according to the type, media, and sizes attributes.

  • If appropriate multiple icons are available (having the same type, same media), then the browser uses the last icon in the tree order.

  • If multiple icons are present and the first icon is inappropriate (unsupported format of icon) then the browser should select the next one.



Was this article helpful?

 

Email:

Message:

Get the newsletter