A favicon is an image (usually it is a logo) that represents your website. The favicon usually appears in places such as the browser’s tab, address bar, browser history, bookmark bar, etc.
According to the W3C, the size of the favicon image must be 16×16 pixels or 32×32 pixels, and the image type must be one of PNG, GIF, or ICO.
To add the favicon on a Webpage you have to use the rel=”icon” attribute of the <link> tag.
<link rel="icon" href="./my-logo.png" type="image/png">
rel="icon"– It defines that it is a favicon.
href="..."– The href attribute takes the path of the image file.
type="..."– It is optional, with the help of this attribute you can specify the type or format of the image.
For the Apple iOS Home Screen Icon, you have to add
The declaration of a favicon is always inside the <head> tag.
<!DOCTYPE html> <html> <head> <title>HTML Favicon Example</title> <!-- Favicon --> <link rel="icon" href="./my-favicon.png"> <link rel="apple-touch-icon" href="./my-favicon.png"> <!-- End of the Favicon --> </head> <body> ... </body> </html>