1
00:00:00,390 --> 00:00:06,300
So the first difference that you'll notice between our site and their site is that even in the tab bar,

2
00:00:06,360 --> 00:00:13,140
you can see that we've got this little new file icon here which is kind of devoid of any design,

3
00:00:13,530 --> 00:00:16,170
but he's got this cute little icon over here.

4
00:00:16,290 --> 00:00:18,630
So how do we get hold of one of those?

5
00:00:19,230 --> 00:00:23,160
Well, this is called a favicon or a favorite icon.

6
00:00:23,700 --> 00:00:30,150
And the reason it's called that is because back in the olden days when people were still using shock

7
00:00:30,150 --> 00:00:38,400
horror Internet Explorer 5, the favicon or the favorite icon was an icon that would show

8
00:00:38,400 --> 00:00:43,170
up in your browser bar if you were on a website that you had favorited.

9
00:00:44,130 --> 00:00:51,150
And a  cool side effect of that is that if you were the web developer, you can see how many times did people

10
00:00:51,150 --> 00:00:55,290
request to display your favicon

11
00:00:55,680 --> 00:01:01,740
and that would give you an estimate of how many people had bookmarked or favorited your website.

12
00:01:01,950 --> 00:01:07,410
But now that doesn't work anymore, because the browsers will try to display the favicon for all web

13
00:01:07,410 --> 00:01:09,780
sites, whether if you favorited it or not.

14
00:01:10,320 --> 00:01:13,680
But it's a nice little touch, and this is something that we want to implement.

15
00:01:14,160 --> 00:01:21,120
Now, if you want to do this, just head over to favicon.cc and here you can create a brand new

16
00:01:21,120 --> 00:01:21,750
favicon.

17
00:01:21,990 --> 00:01:29,160
Now you can either import an image, maybe of yourself, and it will try to turn it into a very coarse

18
00:01:29,160 --> 00:01:29,730
drawing,

19
00:01:30,060 --> 00:01:31,740
or you can just simply draw it yourself.

20
00:01:31,800 --> 00:01:39,360
So I'm just going to draw one myself, and I'm just going to draw a capital A as best as I can, which

21
00:01:39,360 --> 00:01:40,740
is not that well.

22
00:01:47,420 --> 00:01:48,790
All right, so here's my favicon.

23
00:01:49,190 --> 00:01:56,270
And you can see that this is what it would look like when it's being used, so you can go ahead and

24
00:01:56,270 --> 00:01:59,330
refine it however you want to make it look nice.

25
00:01:59,690 --> 00:02:02,840
And this is where you really unleash your creative talents,

26
00:02:02,840 --> 00:02:07,460
and because I don't have many, then this is what I'm going to go with.

27
00:02:07,640 --> 00:02:14,720
So now we can download our favicon, which is in a special format for favicons which is the ico

28
00:02:14,720 --> 00:02:16,100
or an icon format.

29
00:02:16,430 --> 00:02:22,760
And then I'm going to pull up the folder where I've got my CSS - My Site that contains my index.html

30
00:02:22,770 --> 00:02:30,650
and my CSS folders, and I'm just going to click and drag this newly downloaded favicon into

31
00:02:30,650 --> 00:02:31,520
the same folder.

32
00:02:31,940 --> 00:02:36,170
And now, if you head into Atom, you'll be able to see it in the Project Navigator as well.

33
00:02:36,740 --> 00:02:40,970
And in order to incorporate it to our website, we're going to create a new link.

34
00:02:41,510 --> 00:02:43,280
But this link has a different relationship.

35
00:02:43,280 --> 00:02:50,210
It's not the stylesheet in this case, it's actually just the icon, and the icon is located at the

36
00:02:50,210 --> 00:02:53,960
same hierarchical level as our index.html.

37
00:02:54,440 --> 00:02:59,530
We just have to put its name down, so the file is called favicon.ico.

38
00:02:59,810 --> 00:03:07,100
So now if we hit save and we go over to our browser and go to our site and hit refresh, then you'll

39
00:03:07,100 --> 00:03:13,280
see that it now has a pretty little favicon that shows up, which is pretty neat right? Now

40
00:03:13,280 --> 00:03:19,220
if after doing all of that, you still don't see your favicon, try changing the href of your

41
00:03:19,220 --> 00:03:21,860
favicon link to this instead.

42
00:03:21,890 --> 00:03:27,740
Add the "?v=2" because it might be that your browser has cached a previous version

43
00:03:28,040 --> 00:03:30,920
or is just trying to create a default one that it's placed there.

44
00:03:31,250 --> 00:03:34,760
So if you change this, it should allow your favicon to show up.

45
00:03:35,270 --> 00:03:41,300
Now, if we take a look at Sean's site, you can see that it's got a whole bunch of distinct sections

46
00:03:41,300 --> 00:03:42,680
which we can scroll through.

47
00:03:43,070 --> 00:03:45,740
So how can we do this for our web site?

48
00:03:46,160 --> 00:03:51,230
Certainly not by using anything that we've done so far because we haven't been able to do any sort of

49
00:03:51,230 --> 00:03:54,870
positioning or layout with our previous CV website.

50
00:03:55,460 --> 00:04:01,310
So in the next lesson, I'm going to show you how we can create these blocks inside our website that

51
00:04:01,310 --> 00:04:04,220
we can style and make it look something like this.

52
00:04:04,520 --> 00:04:08,750
So you'll have that to look forward to, and I'll see you on the next lesson.