1
00:00:02,070 --> 00:00:05,410
So now we got our first websites deployed.

2
00:00:05,410 --> 00:00:08,470
To conclude this course section,

3
00:00:08,470 --> 00:00:11,010
there are two more topics I wanna dive in.

4
00:00:11,010 --> 00:00:14,920
And the first topic is about favicons.

5
00:00:14,920 --> 00:00:17,540
Now what are favicons?

6
00:00:17,540 --> 00:00:21,490
You might recall that may be early in the course

7
00:00:21,490 --> 00:00:25,490
you saw an error message, regarding a missing favicon.

8
00:00:25,490 --> 00:00:28,800
To be precise, you can see such an error message,

9
00:00:28,800 --> 00:00:30,020
in the developer tools.

10
00:00:30,020 --> 00:00:33,240
If you go to the console, or network tab,

11
00:00:33,240 --> 00:00:36,980
and you then go to your locally running website.

12
00:00:36,980 --> 00:00:39,160
So the site that is hosted,

13
00:00:39,160 --> 00:00:43,100
that is served by this life server extension.

14
00:00:43,100 --> 00:00:45,610
And you then reload this,

15
00:00:45,610 --> 00:00:48,680
by right clicking on the reload icon here, in Chrome,

16
00:00:48,680 --> 00:00:51,590
and choosing empty cache and hard reload

17
00:00:51,590 --> 00:00:53,310
on your local website.

18
00:00:53,310 --> 00:00:54,700
And if you do that,

19
00:00:54,700 --> 00:00:57,570
then you should see this error message,

20
00:00:57,570 --> 00:01:02,570
that it basically fails to load a favicon.ico file.

21
00:01:03,170 --> 00:01:05,300
You also can see this in the network tab,

22
00:01:05,300 --> 00:01:09,250
which shows outgoing network traffic of the website.

23
00:01:09,250 --> 00:01:12,610
There you see that it loaded the CSS files

24
00:01:12,610 --> 00:01:15,220
and some funds from Google funds and so on,

25
00:01:15,220 --> 00:01:19,820
but that then, it also failed to load, that's why it's red,

26
00:01:19,820 --> 00:01:22,683
this favicon.ico file.

27
00:01:23,930 --> 00:01:27,703
Now what's up with this favicon.ico file?

28
00:01:28,630 --> 00:01:30,540
Well, this is a special file,

29
00:01:30,540 --> 00:01:33,640
the browser tries to load automatically.

30
00:01:33,640 --> 00:01:36,510
That's why we have this request in the first place,

31
00:01:36,510 --> 00:01:38,570
because in our website code,

32
00:01:38,570 --> 00:01:41,600
we're actually never looking for such a file.

33
00:01:41,600 --> 00:01:45,650
We're not including any image, or linking to any file

34
00:01:45,650 --> 00:01:48,190
that would have this strange name.

35
00:01:48,190 --> 00:01:51,560
Instead, that's a default file the browser is looking for.

36
00:01:51,560 --> 00:01:55,160
And a favicon is simply a little icon

37
00:01:55,160 --> 00:01:57,040
that's used by the browser,

38
00:01:57,040 --> 00:02:00,570
to display it next to the site name.

39
00:02:00,570 --> 00:02:01,640
For example, here,

40
00:02:01,640 --> 00:02:04,790
we got this globe next to the file name,

41
00:02:04,790 --> 00:02:07,000
which has Chrome's default icon,

42
00:02:07,000 --> 00:02:09,889
if no more specific icon was found.

43
00:02:09,889 --> 00:02:12,680
We can see a more specific icon in action here

44
00:02:12,680 --> 00:02:14,430
for Netlify Drop.

45
00:02:14,430 --> 00:02:17,330
This here, this green diamond,

46
00:02:17,330 --> 00:02:20,390
is the favicon of Netlify.

47
00:02:20,390 --> 00:02:24,220
It's basically their logo in a simplified form.

48
00:02:24,220 --> 00:02:27,700
And you can choose any icon as a favicon,

49
00:02:27,700 --> 00:02:29,890
that should be loaded for your website,

50
00:02:29,890 --> 00:02:32,133
when it's being served by a server.

51
00:02:33,190 --> 00:02:34,820
Now, if you don't have one,

52
00:02:34,820 --> 00:02:37,690
as we have it here, we don't have an icon yet.

53
00:02:37,690 --> 00:02:38,830
That's no problem.

54
00:02:38,830 --> 00:02:41,490
The site works and everything is all right.

55
00:02:41,490 --> 00:02:44,400
But if you do want to have your custom icon here,

56
00:02:44,400 --> 00:02:48,980
all you have to do is add such a favicon to your website.

57
00:02:48,980 --> 00:02:53,130
And that's the first thing I wanna do together with you now.

58
00:02:53,130 --> 00:02:55,020
To generate a favicon,

59
00:02:55,020 --> 00:02:57,600
you can search for Favicon Generator.

60
00:02:57,600 --> 00:03:00,740
And you will find pages that do that for you.

61
00:03:00,740 --> 00:03:04,610
Now, you can try any of these pages, I'll pick

62
00:03:04,610 --> 00:03:06,190
a random one here, basically.

63
00:03:06,190 --> 00:03:11,170
And these pages then give you ways of generating favicons.

64
00:03:11,170 --> 00:03:15,210
Often by allowing you to upload a JPEG, or PNG file,

65
00:03:15,210 --> 00:03:16,290
or any other image,

66
00:03:16,290 --> 00:03:19,760
and then spitting out a finished favicon.

67
00:03:19,760 --> 00:03:22,563
So here, for example, I'm using favicon.io.

68
00:03:23,420 --> 00:03:25,030
I'll choose the image uploader.

69
00:03:25,030 --> 00:03:28,770
And then here we can drag and drop our image,

70
00:03:28,770 --> 00:03:31,460
which we wanna transform into such a favicon here,

71
00:03:31,460 --> 00:03:34,680
or click onto this box to upload one.

72
00:03:34,680 --> 00:03:38,280
And here I simply choose my challenges trophy JPEG file,

73
00:03:38,280 --> 00:03:40,500
and that's what I upload here.

74
00:03:40,500 --> 00:03:42,180
And then, once that's done,

75
00:03:42,180 --> 00:03:45,370
we can click Download, to download the favicon.

76
00:03:45,370 --> 00:03:48,730
And this gives us a zip file, which we can unzip.

77
00:03:48,730 --> 00:03:50,800
And in this case here, for this site,

78
00:03:50,800 --> 00:03:52,470
if we unzip this folder,

79
00:03:52,470 --> 00:03:54,600
what we get are a couple of files,

80
00:03:54,600 --> 00:03:57,700
which are optimized for different targets, devices

81
00:03:57,700 --> 00:03:59,240
and platforms.

82
00:03:59,240 --> 00:04:01,580
The bare minimum file, which we need is this

83
00:04:01,580 --> 00:04:03,480
favicon.ico file.

84
00:04:03,480 --> 00:04:06,573
And I'll start with this file and copy it here.

85
00:04:07,690 --> 00:04:09,620
And then add it to my project.

86
00:04:09,620 --> 00:04:12,480
And here we can add it in the root level folder,

87
00:04:12,480 --> 00:04:15,440
or maybe into the images folder here.

88
00:04:15,440 --> 00:04:18,260
I did now add this favicon.ico file

89
00:04:18,260 --> 00:04:20,192
here into my images folder.

90
00:04:21,510 --> 00:04:23,760
Now, with it inserted here,

91
00:04:23,760 --> 00:04:26,120
we can include this into our page,

92
00:04:26,120 --> 00:04:28,740
to tell the browser where to find this.

93
00:04:28,740 --> 00:04:31,200
And for this, we go into a HTML file.

94
00:04:31,200 --> 00:04:35,610
And there, we can now add a new type of link here.

95
00:04:35,610 --> 00:04:38,030
So we use this link element again,

96
00:04:38,030 --> 00:04:40,640
but now we're not linking to a style sheet,

97
00:04:40,640 --> 00:04:42,690
but instead, here for a REL,

98
00:04:42,690 --> 00:04:45,630
we use icon instead of style sheet.

99
00:04:45,630 --> 00:04:49,640
And for ref, we now point at the folder where it's placed.

100
00:04:49,640 --> 00:04:53,590
In this case, images/favicon.ico.

101
00:04:53,590 --> 00:04:57,370
And then we add another attribute here, the type attribute,

102
00:04:57,370 --> 00:05:01,140
which we should set equal to image/x-icon,

103
00:05:01,140 --> 00:05:04,190
which simply gives the browser a hint about which file

104
00:05:04,190 --> 00:05:05,460
it will find there,

105
00:05:05,460 --> 00:05:08,640
that it's an image in this special icon format.

106
00:05:08,640 --> 00:05:11,160
That's the identifier for this type of file,

107
00:05:11,160 --> 00:05:14,640
which is the commonly used and standard type of file,

108
00:05:14,640 --> 00:05:16,573
which is being used for favicons.

109
00:05:17,920 --> 00:05:21,150
Now with that, if we now reload this page here locally

110
00:05:21,150 --> 00:05:24,720
on the development server, we can see our icon here.

111
00:05:24,720 --> 00:05:26,370
And if we would now redeployed,

112
00:05:26,370 --> 00:05:28,990
we would also see the icon on the deployed page.

113
00:05:28,990 --> 00:05:30,260
Since we haven't done this yet,

114
00:05:30,260 --> 00:05:32,540
I of course, don't see it here.

115
00:05:32,540 --> 00:05:34,340
By the way, if I go back to this page

116
00:05:34,340 --> 00:05:36,530
where I generated the favicon,

117
00:05:36,530 --> 00:05:38,360
you also see the actual code

118
00:05:38,360 --> 00:05:39,840
that should be included into your

119
00:05:39,840 --> 00:05:41,183
pages here.

120
00:05:43,400 --> 00:05:45,980
And here, you also see that you can include

121
00:05:45,980 --> 00:05:47,721
the other files as well,

122
00:05:47,721 --> 00:05:50,060
to cater for different platforms and

123
00:05:50,060 --> 00:05:50,893
devices.

124
00:05:50,893 --> 00:05:51,820
Feel free to do this,

125
00:05:51,820 --> 00:05:54,550
to optimize your site and it's icon even more,

126
00:05:54,550 --> 00:05:56,810
for different devices and platforms.

127
00:05:56,810 --> 00:05:59,860
The favicon.ico file is to base file,

128
00:05:59,860 --> 00:06:02,170
which you might wanna include on all your pages.

129
00:06:02,170 --> 00:06:04,120
And that is what we did here.

130
00:06:04,120 --> 00:06:07,510
I will now just also grab it, grab this link.

131
00:06:07,510 --> 00:06:10,280
And then also add it to full week HTML,

132
00:06:10,280 --> 00:06:14,083
so that there, we also have this icon added.