1
00:00:00,000 --> 00:00:09,181
[MUSIC]

2
00:00:09,181 --> 00:00:10,880
Hey, what's up, Dustin here.

3
00:00:10,880 --> 00:00:13,825
Today I wanna go over something quick and
fun.

4
00:00:13,825 --> 00:00:15,393
The favicon.

5
00:00:15,393 --> 00:00:17,869
If you're unfamiliar with what this is,

6
00:00:17,869 --> 00:00:22,056
it's basically the little icon you
see in your tabs on most websites.

7
00:00:22,056 --> 00:00:24,466
This is the one for Team Treehouse.

8
00:00:24,466 --> 00:00:25,887
React has one.

9
00:00:25,887 --> 00:00:30,773
There's one for the MDN docs and
even W3 schools has an icon.

10
00:00:30,773 --> 00:00:32,649
It's pretty simple to add to a website and

11
00:00:32,649 --> 00:00:34,693
today I'll walk you
through setting one up.

12
00:00:34,693 --> 00:00:37,094
So let's get started.

13
00:00:37,094 --> 00:00:41,696
In my text editor, I have a project
open for a weather app that I created.

14
00:00:41,696 --> 00:00:45,150
The only files in here that
we're going to need to worry

15
00:00:45,150 --> 00:00:48,615
about are the index.html file and
the images folder.

16
00:00:48,615 --> 00:00:54,365
Inside of the images folder,
I have one file and it's favicon.png.

17
00:00:54,365 --> 00:00:57,037
You can name this file
anything you'd like, but

18
00:00:57,037 --> 00:01:00,113
it's usually best practice
to just name this favicon.

19
00:01:00,113 --> 00:01:04,324
And this image is a 32 by 32 image.

20
00:01:04,324 --> 00:01:08,305
In our index.HTML,
we'll need to link to it.

21
00:01:08,305 --> 00:01:12,675
And if you're using VS Code,
you can just type in link and

22
00:01:12,675 --> 00:01:16,059
then come down here and
search for favicon.

23
00:01:16,059 --> 00:01:21,839
In the href value, just give it
a path to your images folder and

24
00:01:21,839 --> 00:01:25,076
then your new icon, and hit Save.

25
00:01:25,076 --> 00:01:27,650
Then we can view our
HTML file in the browser.

26
00:01:29,170 --> 00:01:31,616
And there we go, we have a favicon.

27
00:01:31,616 --> 00:01:33,812
It's really, really simple to set up.

28
00:01:33,812 --> 00:01:36,914
I hope this quick guide helped and
I'll see you in the next one.

29
00:01:36,914 --> 00:01:38,240
Until then, happy coding.