How can you add favicons in SvelteKit?

Adding your own favicon in SvelteKit is pretty simple. First, check the src/app.html file. By default, it includes a link tag in the head section with rel set to icon. The href on this tag, by default, is favicon.png. In this case, replace the favicon.png file in the static folder of your project with your own favicon file. If you want to use a different file format or just change the file name, this is fine too. Just copy the new file to your static folder, then update that href to match.

What goes in the SvelteKit static folder?

The static folder in a SvelteKit project is for any files which you do not need Vite or SvelteKit to process. Typically, you will place your favicon and robots.txt files in here. Also, if you have a PWA manifest.json file, you can drop that here too. Visitors will be able to access any files here on your published site. So static/my-file.txt will be available at https://example.com/my-file.txt.

Should you use a PNG file or ICO for your SvelteKit favicon?

Traditionally, favicons were .ico files. Modern browsers can use PNG, JPG and SVG files instead, and you only need a .ico file to provide support for users with quite old versions of Internet Explorer. This is great news, as creating .ico files takes a little more work, and you will typically already have a PNG or JPG logo available.

SvelteKit Favicon: How to add a Favicon # SvelteKit Favicon: How to add a Favicon #

SvelteKit Favicon: How to add a Favicon #

Updated 2 years ago

4 minute read

Gunning Fog Index: 6 2 comments

Content by Rodney

🖼 SvelteKit Favicon #

What is the SvelteKit favicon? Favicons aren't unique to SvelteKit, they are just the little icon which appears in the browser, on the tab itself showing your site or brand logo. They are useful to help users quickly see which tab is which when they have many tabs open. In this video, we see it only takes a moment to add a favicon to your SvelteKit app. All you need to follow along is your logo in a PNG file. You can use a .ico file instead, though they are really only needed if you must have backwards compatibility with very old versions of Internet Explorer. In the video, we create a skeleton app from scratch, though the process is similar if you are adding a favicon to an existing project. If you're reading to push pack, then let's get going!

📹 SvelteKit Favicon: Video #

Please enable JavaScript to watch the video 📼

SvelteKit Favicon

🖥 Code #

Spin up a Skeleton SvelteKit App #

    pnpm create svelte@latest sveltekit-favicon && cd $_
pnpm install
pnpm run dev

Spin up a Skeleton SvelteKit App from the terminal.

Update Dev and Preview Server Ports #

package.json

svelte

    1 {
2   "name": "~TODO~",
3   "version": "0.0.1",
4   "scripts": {
5     "dev": "svelte-kit dev -p 3030",
6     "build": "svelte-kit build",
7     "preview": "svelte-kit preview -p 3030",
8     "lint": "prettier --check --plugin=prettier-plugin-svelte . && eslint --ignore-path .gitignore .",
9     "format": "prettier --write --plugin=prettier-plugin-svelte ."
10   },
11   // TRUNCATED...
12 }

Update Dev and Preview Server Ports.

🗳 Poll #

What is your preferred package manager?

🔗 Links #

How to create a Progressive Web App (PWA) in SvelteKit ,
Twitter handle: @askRodney .

🏁 SvelteKit Favicon: Summary #

How can you add favicons in SvelteKit? #: Adding your own favicon in SvelteKit is pretty simple. First, check the src/app.html file. By default, it includes a link tag in the head section with rel set to icon. The href on this tag, by default, is favicon.png. In this case, replace the favicon.png file in the static folder of your project with your own favicon file. If you want to use a different file format or just change the file name, this is fine too. Just copy the new file to your static folder, then update that href to match.
What goes in the SvelteKit static folder? #: The static folder in a SvelteKit project is for any files which you do not need Vite or SvelteKit to process. Typically, you will place your favicon and robots.txt files in here. Also, if you have a PWA manifest.json file, you can drop that here too. Visitors will be able to access any files here on your published site. So static/my-file.txt will be available at https://example.com/my-file.txt.
Should you use a PNG file or ICO for your SvelteKit favicon? #: Traditionally, favicons were .ico files. Modern browsers can use PNG, JPG and SVG files instead, and you only need a .ico file to provide support for users with quite old versions of Internet Explorer. This is great news, as creating .ico files takes a little more work, and you will typically already have a PNG or JPG logo available.

🙏🏽 SvelteKit Favicon: Feedback #

If you have found this video useful, see links below for related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Here’s a video on how you can add a favicon to your ❤️ SvelteKit app.

Hope you find it useful!

#askRodney #SvelteKit #SvelteJS https://t.co/5CWaSN21on
— Rodney (@askRodney) May 24, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.