Notes
Web
HTML

HTML

Boilerplate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#111" media="(prefers-color-scheme: dark)">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
 
    <title>Unique page title - My Site</title>
 
    <link rel="stylesheet" href="/css/styles.css" />
 
    <meta name="description" content="Page description" />
    <meta property="og:title" content="Unique page title - My Site" />
    <meta property="og:description" content="Page description" />
    <meta property="og:image" content="https://www.mywebsite.com/image.jpg" />
    <meta property="og:image:alt" content="Image description" />
    <meta property="og:locale" content="en_GB" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="og:url" content="https://www.mywebsite.com/page" />
    <link rel="canonical" href="https://www.mywebsite.com/page" />
 
    <link rel="icon" href="/favicon.ico" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/my.webmanifest" />
    <meta name="theme-color" content="#FF00FF" />
  </head>
 
  <body>
    <!-- Content -->
    <script src="/js/script.js" type="module"></script>
  </body>
</html>

Sources

Snippets

Different icons for light/dark mode.

<link rel="icon" media="(prefers-color-scheme: dark)" href="/icons/dark.png" />
<link
  rel="icon"
  media="(prefers-color-scheme: light)"
  href="/icons/light.png"
/>
CSSIcons