Favicons

A favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser’s address bar, page tabs and bookmarks menu. It can also be included in search results for your website.

Settings#

You can set icon and svgIcon in config/_default/params.toml:

# SEO (@hyas/seo)
[seo]
  [seo.favicons]
    icon = "favicon.png" # (required)
    svgIcon = "favicon.svg" # (optional)

Add the files — “favicon.png” and “favicon.svg” in the example above — to your projects’ /assets/ directory. Make sure the icon file — “favicon.png” in the example above — is at least 512x512 pixels.

Generated meta tags#

Hyas SEO generates a favicon.ico, apple-touch-icon.png, favicon-192x192.png, and favicon-512x512.png file from the icon file you set in params.toml. The generated files are copied to your projects’ public directory.

Hyas SEO generates the following meta tags — for example:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link
  rel="apple-touch-icon"
  href="/apple-touch-icon.png"
  sizes="180x180"
  type="image/png"
>
<link
  rel="icon"
  href="/favicon-192x192.png"
  sizes="192x192"
  type="image/png"
>
<link
  rel="icon"
  href="/favicon-512x512.png"
  sizes="512x512"
  type="image/png"
>
<link rel="manifest" href="/manifest.webmanifest">

Hyas SEO also generates a manifest.webmanifest file — for example:

{
  "name": "My Docs",
  "short_name": "My Docs",
  "lang": "en",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

Resources#

• How to Favicon in 2024: Six files that fit most needs