Logos and images

Add brand marks

Oink uses assets/icons/logo.svg as its default brand mark. Override it with params.logo, or set params.wordmark when the header should show a complete wordmark instead of an icon followed by the site title:

params:
  logo: icons/product.svg
  wordmark: images/product-wordmark.svg

Both parameters can name a Hugo asset or a public path. Prefer assets/ for theme-processed files and static/ when a file must be copied unchanged. Keep the source SVG tightly cropped so the header, sidebar, and footer can size it consistently.

For brand typography, dimensions, and project SCSS, see Look and feel.

Use icons

Oink bundles Font Awesome Free and serves its fonts locally. Set a page’s icon in front matter to give the page and its navigation entry a stable visual cue:

---
title: Deployment
---

Use an icon available in the bundled free set. The exact vendored version is recorded in the theme’s VENDOR.json. Menu-specific icon behavior is covered in Navigation and menus.

Add favicons

Oink does not impose a product favicon. Instead, it discovers conventionally named files in the consumer site’s static/ directory and adds the matching <link> elements to every page.

Square numbered variants are emitted in ascending size order. A practical baseline is favicon.ico, favicon.svg, and apple-touch-icon.png.

For a web app manifest or other head metadata, add markup in layouts/_partials/hooks/head-end.html. To change discovery itself, override layouts/_partials/favicons.html and keep URLs subpath-safe with relURL.

Generate favicons

Generate the files with a reviewed graphics workflow such as ImageMagick, favicon.io, or RealFaviconGenerator. Oink’s production build does not depend on Node.js or a favicon generator; Hugo only publishes the files already present in static/.

Add images

Put images beside a page when they belong to that page bundle. This keeps the source and its media together and lets Hugo process the resource. Use regular Markdown for simple images or the imgproc shortcode when you need resize, crop, or display options.

Landing-page covers

The blocks/cover shortcode selects the first page resource whose filename contains background. For raster images, Oink creates responsive 1920x1080 and 960x540 variants. Use image_anchor to control the crop and height to choose auto, min, med, max, or full:

{{% blocks/cover
  title="Welcome to Oink"
  image_anchor="center"
  height="min"
%}}
Documentation that gets out of the way.
{{% /blocks/cover %}}

Static images

Put files in static/ when they must retain a fixed public path and do not need Hugo image processing. Reference them with a root-relative URL, and verify that the same URL works when the site is built with its production baseURL. See Adding static content for the trade-offs.