Skip to content
Related Articles

Related Articles

Improve Article

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=
      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=
        Click here</a>
    </p>
 
  </body>
</html>

Output: Notice the image icon in the top left corner of the web page.

 

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :