How to add favicon to a Hugo page
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.zip and 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.webmanifest in static folder { "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 ...