Open In App

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

Last Updated : 27 May, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

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>

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

 


Article Tags :

Similar Reads