How to Customize Your SvelteKit Website: Icons, Favicons, and Deployment
Published:
4 minute view time
YouTube version of this Post
Customize Site
This guide largely builds off of the Quick Start Guide https://www.contibase.com/blog/quick-start-guide. If you haven't seen that, start there and then come back to this part.Link Preview
Quick Start Guide
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 https://www.contibase.com/tools/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."Link Preview
Contibase Image Generator
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 https://www.contibase.com/tools/image-to-svg https://affinity.serif.com/en-us/designer/ 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 Link Preview
Contibase Image to SVG .Link Preview
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 https://www.contibase.com/tools/svg-optimizer. Delete any backgrounds and add a new, clean one in the editor.Link Preview
SVG Optimizer
Generate Favicons
Go to the Favicon Generator https://www.contibase.com/tools/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.Link Preview
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.svelteGo to your app.html and paste the generated version from the Favicon Generator.
Go to
src/routes/+layout.svelteAdd 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 https://svelte.dev/docs/kit/introduction https://www.sveltekit-ui.com along with the Sveltekit-UI Link Preview
SvelteKit 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.Link Preview
Sveltekit-UI
It's kind of experimental at the moment, but for building your components this tool, SvelteKit-UI Code Generator https://www.contibase.com/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. Link Preview
SvelteKit-UI Code Generator
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 https://vercel.com. 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.Link Preview
Vercel
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.
Check Final Example Tutorial Code
The live version of the code from this tutorial project can be found at Live Github Code https://github.com/upppllc/survivorsnuff https://www.survivorsnuff.com. It includes changes beyond this stage of the tutorial. The live site is survivorsnuff.com Link Preview
Live Github Code .Link Preview
survivorsnuff.com
Authentication
Chat Assistant
Output Type:
No Chat History