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

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

3
00:00:14,130 --> 00:00:16,280
got this cute little icon over here.
3

4
00:00:16,350 --> 00:00:19,000
So how do we get hold of one of those.
4

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

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

7
00:00:30,600 --> 00:00:39,330
Internet Explorer number 5, the favicon, or the favorite icon, was an icon that would show up in your
7

8
00:00:39,330 --> 00:00:40,370
browser bar
8

9
00:00:40,650 --> 00:00:47,790
if you were on a web site that you had favorited, and a quick side effect of that is that if you were
9

10
00:00:47,790 --> 00:00:56,370
the web developer you can see how many times did people request to display your favicon and that would
10

11
00:00:56,370 --> 00:01:01,850
give you an estimate of how many people had booked marked or favorited your web site.
11

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

13
00:01:07,440 --> 00:01:10,040
sites whether you favorited it or not.
13

14
00:01:10,380 --> 00:01:11,750
But it's a nice touch.
14

15
00:01:11,790 --> 00:01:14,070
And this is something that we want to implement.
15

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

17
00:01:21,480 --> 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
17

18
00:01:29,190 --> 00:01:31,860
drawing or you can just simply draw it yourself.
18

19
00:01:31,860 --> 00:01:39,630
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 is
19

20
00:01:39,630 --> 00:01:40,090
not that 
20

21
00:01:40,350 --> 00:01:40,790
well.
21

22
00:01:47,480 --> 00:01:47,750
All right.
22

23
00:01:47,760 --> 00:01:55,260
So here's my favicon, and you can see that this is what it would look like when it's being used.
23

24
00:01:55,260 --> 00:01:59,790
So you can go ahead and refine it however you want to make it look nice.
24

25
00:01:59,790 --> 00:02:05,760
And this is where you really unleash your creative talents. Because I don't have many then this is what
25

26
00:02:05,790 --> 00:02:07,600
I'm going to go with.
26

27
00:02:07,710 --> 00:02:15,060
So now we can download our favicon, which is in a special format for favicons which is the ico or an
27

28
00:02:15,120 --> 00:02:16,500
icon format.
28

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

30
00:02:22,800 --> 00:02:24,820
and my css folders.
30

31
00:02:24,960 --> 00:02:32,000
And I'm just going to click and drag this newly downloaded favicon into the same folder.
31

32
00:02:32,020 --> 00:02:36,570
And now if you head into Atom you'll be able to see it in the project navigator as well.
32

33
00:02:36,840 --> 00:02:42,270
And in order to incorporate it to our web site we're going to create a new link but this link has a
33

34
00:02:42,270 --> 00:02:48,600
different relationship it's not the stylesheet in this case it's actually just the icon and the icon
34

35
00:02:48,600 --> 00:02:54,150
is located at the same hierarchical level as our index.html.
35

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

37
00:02:59,850 --> 00:03:07,680
So now if we hit save and we go over to our browser and go to our site and hit refresh then you'll see
37

38
00:03:07,680 --> 00:03:13,680
that it now has a pretty little favicon that shows up which is pretty neat, right? Now if we take a
38

39
00:03:13,680 --> 00:03:19,860
look at Sean's site you can see that it's got a whole bunch of distinct sections which we can scroll
39

40
00:03:19,860 --> 00:03:20,580
through.
40

41
00:03:20,610 --> 00:03:23,630
So how can we do this for our web site.
41

42
00:03:23,700 --> 00:03:28,710
Certainly not by using anything that we've done so far because we haven't been able to do any sort of
42

43
00:03:28,710 --> 00:03:32,970
positioning or layout with our previous CV web site.
43

44
00:03:33,030 --> 00:03:38,820
So in the next lesson I'm going to show you how we can create these blocks inside our web site that
44

45
00:03:38,820 --> 00:03:41,920
we can style and make it look something like this.
45

46
00:03:42,060 --> 00:03:46,420
So you'll have that to look forward to and I'll see you on the next lesson.