How to set the size of the linked resource in HTML5 ?
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" >w3wiki</ 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 = "Beginnerimage.png" type = "image/png" sizes = "any" /> </ head > < body style = "text-align: center" > < h2 style = "color: green" >w3wiki</ 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.
Contact Us