Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the favicon size in CSS rather than HTML attributes?
A favicon is a small icon visible on the web browser tab, just before the page title. It is generally a logo with a smaller size representing your website's brand.
Setting Favicon Size
You cannot set the favicon size using CSS properties. The web standards do not support controlling favicon dimensions through CSS. Instead, you must specify the size using HTML attributes in the <link> element.
Syntax
<link rel="icon" type="image/png" href="path/to/favicon.png" sizes="widthxheight">
Example: Adding Favicon with Size Attribute
The following example shows how to properly add a favicon with specified dimensions using HTML attributes −
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Check the browser tab for the favicon icon.</p>
</body>
</html>
The favicon appears in the browser tab next to the page title "My Website". The browser automatically selects the appropriate size based on the device and display requirements.
Multiple Favicon Sizes
You can provide multiple favicon sizes for different devices and contexts −
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Conclusion
Favicon sizes must be controlled through HTML attributes, not CSS. Use the sizes attribute in the <link> element to specify dimensions, and provide multiple sizes for optimal display across different devices.
3K+ Views
