Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like 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:

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

<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.

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :