1
00:00:00,510 --> 00:00:00,840
All right.

2
00:00:00,870 --> 00:00:07,000
So in this lesson we're going to add a father Vatican to our Web site.

3
00:00:07,020 --> 00:00:09,480
Now what is a fatty Con.

4
00:00:09,510 --> 00:00:15,520
Well a fat con is that little icon that sits on your browser tab.

5
00:00:15,930 --> 00:00:22,740
And the reason we're going to add this to our Web site is because we have gotten this error before in

6
00:00:22,740 --> 00:00:24,500
the developer console.

7
00:00:24,600 --> 00:00:31,090
So it said failed to load resource the server responded with a status of four or four for this five

8
00:00:31,100 --> 00:00:32,280
icon.

9
00:00:32,310 --> 00:00:39,480
In other words let's make this error go away the first step is going to run your server if you haven't

10
00:00:39,480 --> 00:00:41,830
got it running already that is.

11
00:00:41,970 --> 00:00:49,640
And if you remember the way to get your server running is by changing directory into your project folder.

12
00:00:49,680 --> 00:00:55,860
So with C.D. and then dragging that project folder over and then you can start that server with the

13
00:00:55,890 --> 00:01:03,830
python command Python hyphen M and then HDP dot server.

14
00:01:04,500 --> 00:01:08,750
And for Port we'll simply go with eight thousand.

15
00:01:08,880 --> 00:01:13,200
Once you've got your server running you can take this address here.

16
00:01:13,200 --> 00:01:22,430
This HDP address and then in your browser you can paste it into the address bar and just navigate them.

17
00:01:22,740 --> 00:01:26,600
Also make sure you've got this code up and running.

18
00:01:26,640 --> 00:01:30,840
Now how do we create that five icon in the easiest possible way.

19
00:01:31,320 --> 00:01:35,090
Well you can add any farther con you want any image you want.

20
00:01:35,100 --> 00:01:40,970
The important thing is that you start with a square image ideally once you've picked your image.

21
00:01:41,040 --> 00:01:46,640
Go to a Web site called Father con hyphen generator dot org.

22
00:01:46,710 --> 00:01:50,490
If you just google for have a con generator you'll be the first one that comes up.

23
00:01:51,090 --> 00:01:56,580
And this is where you're going to add your square image for my square image.

24
00:01:56,790 --> 00:01:58,530
I'm just going to pick our company logo.

25
00:01:58,680 --> 00:02:05,690
So I go to downloads and then simply pick out my logo here which is a square image and then what I'm

26
00:02:05,690 --> 00:02:12,030
gonna do is on tick this one here and I'm going to leave this one here check to generate icons for web

27
00:02:12,090 --> 00:02:12,480
Android.

28
00:02:12,510 --> 00:02:18,120
Microsoft I was iPhone iPad and so on so I'm going to hit this button.

29
00:02:18,340 --> 00:02:25,600
And then what happens is this handy little tool here is going to give me a zip file to download and

30
00:02:25,600 --> 00:02:29,630
I can click on this thing and simply download a zip file.

31
00:02:29,950 --> 00:02:35,620
And this is the point where you're going to see the value of using a tool like this.

32
00:02:35,770 --> 00:02:42,250
If I had to my downloads folder and I take a look at what's inside this zip file of the generated icons

33
00:02:42,970 --> 00:02:46,470
what I see is that I didn't just get one icon.

34
00:02:46,630 --> 00:02:51,760
I get loads and loads of different five icons in different resolutions.

35
00:02:51,760 --> 00:02:53,950
So this one here is 36 by 36.

36
00:02:53,950 --> 00:02:55,760
This one's 96 96.

37
00:02:55,840 --> 00:03:01,280
So depending on the platform and depending on where my Web site will be displayed there's always gonna

38
00:03:01,300 --> 00:03:08,800
be the Wright Farrakhan available in the Wright resolution and generating all of this by hand is a little

39
00:03:08,800 --> 00:03:15,010
bit tiresome which is why I quite like using something like the five icon generator in addition to all

40
00:03:15,010 --> 00:03:16,180
these icons.

41
00:03:16,180 --> 00:03:23,470
It's also giving me all the HMO that I need to add in order for these icons to be displayed properly.

42
00:03:23,470 --> 00:03:30,130
Now I know this looks like a huge block of code and quite frankly we're actually not going to use all

43
00:03:30,130 --> 00:03:32,820
of it for this tutorial.

44
00:03:32,980 --> 00:03:38,140
Different platforms have different resolutions so there's different icons for each one and ideally you

45
00:03:38,140 --> 00:03:41,460
would include all of them but we're going to keep our code simple.

46
00:03:41,470 --> 00:03:46,720
We're going to keep our project simple and we're actually just gonna pick out one of these Fava cons

47
00:03:46,960 --> 00:03:53,570
so that our era will go away and we're not bothered by what we're seeing in the developer console anymore.

48
00:03:53,590 --> 00:03:59,090
So what I'd like you to do is I'd simply like you to copy this line right here.

49
00:03:59,140 --> 00:04:02,860
This is the line for these 16 by 16 Farrakhan.

50
00:04:03,250 --> 00:04:05,330
That's in the form of a PMG.

51
00:04:05,350 --> 00:04:12,640
So just go ahead and copy that and then head on over to your index thought HDL file and just below where

52
00:04:12,640 --> 00:04:17,600
we're importing our custom font we're going to paste that in there.

53
00:04:17,650 --> 00:04:20,360
So we've got this bit of H2 mail right here.

54
00:04:20,620 --> 00:04:22,780
And we can even add a little comment here.

55
00:04:22,810 --> 00:04:30,850
So this is a fabrication and I'm going to comment this out by using a keyboard shortcut.

56
00:04:31,030 --> 00:04:34,910
So I'm going to press command slash here on my keyboard.

57
00:04:35,020 --> 00:04:39,340
But if you're in Windows then your shortcut might be a little different.

58
00:04:39,370 --> 00:04:45,520
So I'm going to guess it's going to be control slash if you're on Windows now that I'm linking to my

59
00:04:45,520 --> 00:04:51,370
fav icon in my index that each mail file actually also have to follow through and actually add it to

60
00:04:51,370 --> 00:04:53,170
my project.

61
00:04:53,170 --> 00:05:01,220
In other words I'm going to have to take my fav icon from my extracted zip file here and this is the

62
00:05:01,280 --> 00:05:03,880
16 by 16 PMG.

63
00:05:04,100 --> 00:05:09,390
And when I take it and I'm going to drag and drop it into my Explorer paint him.

64
00:05:09,440 --> 00:05:14,330
And what that will do is it will actually add it to my project.

65
00:05:14,330 --> 00:05:15,390
So there we go.

66
00:05:15,410 --> 00:05:16,700
That's all there is to it.

67
00:05:18,180 --> 00:05:26,360
Now what we can do is save our file here and then back in Chrome we can refresh our site and we should

68
00:05:26,360 --> 00:05:30,450
see the five icon appear here in the browser tab.

69
00:05:30,560 --> 00:05:36,800
And if you open the developer console then you should also not see any more errors here and that's all

70
00:05:36,800 --> 00:05:39,170
there is to it in the next lesson.

71
00:05:39,230 --> 00:05:43,990
We're gonna be moving on to a more complex topic namely how to draw on this canvas here.

72
00:05:44,390 --> 00:05:45,130
I'll see you there.