Hugo #

Favicon #

Set up a favicon for your website that is ready for various devices and platforms.

Use the Favicon Generator to create your favicon files

Place the downloaded favicon files in your Hugo project’s static directory

\static
    android-chrome-192x192.png
    android-chrome-512x512.png
    apple-touch-icon.png
    favicon-16x16.png
    favicon-32x32.png
    favicon.ico
    site.webmanifest

Edit the baseof.html file located in your Hugo project’s layouts/_default directory. Insert the following link tags within the <head> section to reference your favicon files

<!-- layouts/_default/baseof.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Existing head content -->

    <!-- Favicon links -->
    <link rel="icon" href="/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
  </head>
  <body>
    <!-- Existing body content -->
  </body>
</html>

Edit the site.webmanifest file in the static directory

// static/site.webmanifest
{
  "name": "My Application",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Google Analytics #

Enable Google Analytics tracking on your Hugo website, allowing you to monitor traffic and user interactions.

Get Your Tracking ID

It should look like G-XXXXXXXXXX.

Edit the baseof.html file to include the Google Analytics script within the <head> section

<!-- layouts/_default/baseof.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Existing head content -->

    <!-- Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-XXXXXXXXXX");
    </script>
    {{ end }}
  </head>
  <body>
    <!-- Existing body content -->
  </body>
</html>