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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
27 May, 2021
Like Article
Save Article