What is a favivon
A favicon is a small 16×16 pixel icon that serves as branding for your website. Its main purpose is to help visitors locate your page easier when they have multiple tabs open.
Where to find favicon?
Go to favicon.io to select the suitable one.
Steps
- Go to favicon.io
- Download the
favicon.zipand unzip - Place the files in
/static/image/ - Add the following code to
/layouts/partials/header.html
<link rel="icon" href="/image/favicon.ico" type="/image" />
<link rel="apple-touch-icon" sizes="180x180" href="/image/apple-touch-icon.png">
<link rel="icon" type="image" sizes="32x32" href="/image/favicon-32x32.png">
<link rel="icon" type="image" sizes="16x16" href="/image/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest.json">
- Edit the
site.webmanifestinstaticfolder
{
"name": "",
"short_name": "favicon",
"icons": [
{
"src": "image/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "image/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "image/apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Where to check the final implementation
Go to Favicon checker
Reference
