How to set the size of the linked resource in HTML5 ?

Last Updated : 27 May, 2021

Approach: We set the sizes of the linked resource by using the sizes attributes in <link> tag in HTML. It is used to specify the sizes of the icon for visual media, and it only works when set to rel=”icon”. It is a read-only property.

Syntax:

<link sizes="HeightxWidth | any">

Possible values to set the size of the linked resource are as follows:

HeightxWidth It is used to specify one or more sizes of a linked icon. The value of the height and the width are separated by an “x” or “X”.
any: It specifies that the icon is scalable (like an SVG or PNG image).

Example 1:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link id="linkid"
        rel="stylesheet"
        type="text/css"
        href="styles.css"
        sizes="32*32">
</head>
 
<body style="text-align:center;">
    <h2 style="color:green">GeeksforGeeks</h2>
    <b>How to set the size of the linked resource in HTML5?
    </b><br/>
     
<p>Learn tailwind css 
     <a href=
"https://www.geeksforgeeks.org/css-tailwind-introduction/">
      Click here
     </a>
    </p>
 
</body>
 
</html>                 

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="icon"
          href="geeksimage.png"
          type="image/png"
          sizes="any" />
  </head>
 
  <body style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <b>How to set the size of the linked resource in HTML5? </b>
    <br />
     
<p>
      Learn tailwind css
      <a href=
"https://www.geeksforgeeks.org/css-tailwind-introduction/">
        Click here</a>
    </p>
 
  </body>
</html>