How to Add a Favicon

[MUSIC] 0:00 Hey, what's up, Dustin here. 0:09 Today I wanna go over something quick and fun. 0:10 The favicon. 0:13 If you're unfamiliar with what this is, 0:15 it's basically the little icon you see in your tabs on most websites. 0:17 This is the one for Team Treehouse. 0:22 React has one. 0:24 There's one for the MDN docs and even W3 schools has an icon. 0:25 It's pretty simple to add to a website and 0:30 today I'll walk you through setting one up. 0:32 So let's get started. 0:34 In my text editor, I have a project open for a weather app that I created. 0:37 The only files in here that we're going to need to worry 0:41 about are the index.html file and the images folder. 0:45 Inside of the images folder, I have one file and it's favicon.png. 0:48 You can name this file anything you'd like, but 0:54 it's usually best practice to just name this favicon. 0:57 And this image is a 32 by 32 image. 1:00 In our index.HTML, we'll need to link to it. 1:04 And if you're using VS Code, you can just type in link and 1:08 then come down here and search for favicon. 1:12 In the href value, just give it a path to your images folder and 1:16 then your new icon, and hit Save. 1:21 Then we can view our HTML file in the browser. 1:25 And there we go, we have a favicon. 1:29 It's really, really simple to set up. 1:31 I hope this quick guide helped and I'll see you in the next one. 1:33 Until then, happy coding. 1:36

You need to sign up for Treehouse in order to set up Workspace

Sign up