How to Customize Your SvelteKit Website: Icons, Favicons, and Deployment

Published:

4 minute view time

How to Customize Your SvelteKit Website: Icons, Favicons, and Deployment

YouTube version of this Post

Customize Site

This guide largely builds off of the Quick Start Guide . If you haven't seen that, start there and then come back to this part.

Make your Brand Icon

Keep it simple. Use 1-3 colors and a few shapes. Don't include text in the icon. This will result in better viewing from a distance because it will often be used in small areas such as a browser tab.

Use the Contibase Image Generator to generate an icon image. You can try something like "Make a simple, flat SVG icon for my site about ________. Keep it very simple. A flat SVG with 1-3 colors and 1-3 shapes. Use a white background."

Crop into a square icon image with slim padding. Download the image.

Turn your Icon Image into an SVG

Switch to the Contibase Image to SVG tool and convert to a SVG. Alternatively, if you are graphically skilled you can draw over the image and create the SVG yourself in a tool like Affinity Designer .
Make icon in Affinity Designer
Export your design as an SVG. In the export options select "flatten" if its unchecked. And check viewbox. Optimize your SVG code using SVG Optimizer . Delete any backgrounds and add a new, clean one in the editor.

Generate Favicons

Go to the Favicon Generator . Paste your <svg>...</svg> code in. (Make sure there is a <rect> background with an id starting with "bg-"). Type your brand name and generate the favicons. This also generates other useful media such as thumbnails and useful icon images.
Contibase Favicon Generator

Download your favicons. Drag all files into the /static folder and overwrite the defaults.

Fix app.html and Website Logo

Back in your project in VS Code, update
src/lib/components/Logo/index.svelte
to use your new logo. Paste the generated component from the favicon generator.

Go to your app.html and paste the generated version from the Favicon Generator.

Go to
src/routes/+layout.svelte
. Scroll down to the <style> CSS and find :root { --primary-c: var(--c10); --primary-h: var(--h18); } and change the number in "--primary-h: var(--h18);" to a number 0-24 that matches your brands primary hue.
Logo/index.svelte file code

Add Icon and Full Logo to Contibase

Go to contibase.com/settings and click branding. Use the favicon.webp file for the icon. The for the full logo use full_logo.webp. This will be used at the top of emails you send when toggled on in the page.

Project Structure & Stack

Your site uses SvelteKit along with the Sveltekit-UI component library. At this point you'll need to get into the coding side of things a bit. Use your resources and chip away a little progress each day. Ask AI for help with any questions. Keep in mind some AI likes to use old svelte, so make sure to use svelte 5 (the latest version as of 2025) if you start using AI.
It's kind of experimental at the moment, but for building your components this tool, SvelteKit-UI Code Generator , may help you get an idea for how I like structuring my code. The concept is inspired from Object-Oriented Programming, talks by Alan Kay, and other things over time.

Building "managers" for each component with logic encapsulated within, exposing state and methods, leads to a clean code structure where all logic can be assembled into one parent manager at the root of each +page.svelte. The manager is instantiated on page load in the <script> tag and is passed as a manager prop into the HTML. This avoids "prop drilling" and deeply nested bindings.

You are free to write code in any way you find appealing. You are in charge. I am just sharing the way I've found to make the most sense.

Publish Your Live Website

If you havent already, create an account on Vercel . If you already bought your domain on Vercel, even better. You can also transfer your domain purchased elsewhere to Vercel. I just like things as simple as possible and find keeping everything on Vercel to be best.

In Vercel connect to your Github account and set your "main" branch to be used in production. Connect your domain name to this deployment. Anytime you push to main you will automatically trigger a build and you will see on your live website a couple minutes later pending no errors.

Vercel Analytics is already configured in the code but you'll need to toggle on that feature in your Vercel Dashboard. You'll also want to copy the environment variables we used in the .env file and paste them in the Vercel project settings in the Environment variables page.

Vercel project

Check Final Example Tutorial Code

The live version of the code from this tutorial project can be found at Live Github Code . It includes changes beyond this stage of the tutorial. The live site is survivorsnuff.com .
Working live website