This tutorial will teach you how to change the favicon size in HTML. This is especially helpful in having different sizes of favicon images for different resolutions of screen. We can add different sizes of favicon images to HTML to achieve the related favicon size of the screen.
Please use the comment area to ask any questions you may have regarding the tutorial. Furthermore, please read the instruction and make an effort to grasp how it will function if you are unfamiliar with changing the favicon’s size in HTML.
Program to change the favicon size
<!DOCTYPE html> <html lang="en">
<html lang=”en”>. This tag opens the HTML document and indicates the language of the content by setting the language attribute to “en” (English).
Heading Snippet
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Speedy</title>
<link rel="icon" type="image/png" sizes="16x16" href="codespeedy-favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="codespeedy-favicon-32x32.png">
<link rel="icon" type="image/png" sizes="512x512" href="codespeedy-android-512x512.png">
</head>
Among its many crucial duties, the ” element connects to stylesheets, scripts, and other resources in addition to initializing the character set ” tag.The tag can be used to close it.
‘CodeSpeedy’ was the title I gave our project.
We can adjust the favicon image to the appropriate size by using the ” tag.
In our project, I linked three desktop resolution-level favicon images and two android resolution-level favicon images.
Body Snippet
<body>
<h3>Welcome to Code Speedy</h3>
</body>
In the body, I added the heading of the website only, as the main functionality of our project is the favicon size.
Output
The below figures show the suitable favicon images for desktop and android.
Desktop View
Mobile View
