MAIS AMOR POR FAVOR

SvelteKit Favicon: How to add a Favicon

SvelteKit Favicon

SvelteKit Favicon: How to add a Favicon

SHARE:

πŸ–ΌοΈ 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

SvelteKit Favicon

πŸ–₯ Code

Spin up a Skeleton SvelteKit App

pnpm init [email protected] sveltekit-favicon && cd $_
pnpm install
pnpm run dev
Spin up a Skeleton SvelteKit App from the termainl.

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-search-dir=. . && eslint --ignore-path .gitignore .",
9 "format": "prettier --write --plugin-search-dir=. ."
10 },
11 ...
Update Dev and Preview Server Ports.

πŸ—³οΈ Poll

What is your prefered package manager?
Voting reveals latest results.

πŸ™πŸ½ 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.

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 Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.