Extra Tips for Your Eleventy Site

Small but important touches that make this CodeStitch starter look professional, perform well, and feel polished. Each section links to a full step-by-step guide.

Step 1

Favicon

A favicon is the small icon in browser tabs, bookmarks, and home-screen shortcuts. This starter already ships a full favicon set in src/assets/favicons/ and links it in base.html, so making it yours is mostly just swapping files:

Generate a complete set from a square source image (512×512 or larger, or an SVG) with a tool like realfavicongenerator.net or favicon.io.
Drop the generated files into src/assets/favicons/, keeping the same filenames so the existing links keep working.
Nothing else to configure, the whole src/assets folder is already passthrough-copied, and the links already live in <head>:

src/_includes/layouts/base.html

<link rel="icon" type="image/svg+xml" href="/assets/favicons/favicon.svg" />
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-96x96.png" />
<link rel="shortcut icon" href="/assets/favicons/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png" />
<link rel="manifest" href="/assets/favicons/site.webmanifest" />

Because addPassthroughCopy("./src/assets") copies the folder with its path intact, src/assets/favicons/favicon.svg is served at /assets/favicons/favicon.svg in the public build, and a single SVG can even recolor itself for dark mode.

Read the full favicon guide

Step 2

SVG Logo

SVG logos are scalable and lightweight. You can:

Add the SVG as an image file and copy it using addPassthroughCopy:

layout

<img src="/assets/logo.svg" alt="Site Logo" width="120">

Or inline the SVG directly in your layout for styling and animations:

inline svg

<svg width="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="currentColor" />
</svg>

Read the full SVG logo guide

Step 3

Page Speed

Eleventy renders your pages to static HTML with no client-side JavaScript by default, so this starter is fast before you touch anything. The kit also pre-wires the pieces that keep it that way:

Ships 0 KB of JavaScript by default, add a small, deferred <script> only where you truly need interactivity.
Route every image through the built-in {% image %} shortcode (powered by @11ty/eleventy-img) for responsive WebP with dimensions baked in.
Fonts are self-hosted in src/assets/fonts, no render-blocking third-party requests.
Your LESS is compiled through PostCSS, with autoprefixer on every build and cssnano minification in production.

Audit the production build with Google PageSpeed Insights or the Lighthouse tab in Chrome DevTools, the dev server is unoptimized and always looks slower.

Read the full page speed guide

Quick Tips

Swap the kit's favicon set in src/assets/favicons/, it's already linked in base.html.

Use SVG logos for sharp, scalable, styleable graphics.

Static HTML with zero JS by default means the fastest load times.

Audit the production build with PageSpeed Insights, the dev server always looks slower.