1
00:00:03,000 --> 00:00:04,887
Now that we added some styling

2
00:00:04,887 --> 00:00:06,146
to our blog website,

3
00:00:06,708 --> 00:00:08,596
I want to cover another small thing

4
00:00:08,596 --> 00:00:10,483
that has to do with the appearance.

5
00:00:11,036 --> 00:00:12,791
And that's the "favicon".

6
00:00:13,291 --> 00:00:14,940
Perhaps you noticed before

7
00:00:14,940 --> 00:00:16,588
that when we load the page

8
00:00:17,151 --> 00:00:20,293
sometimes we get a not found error

9
00:00:20,293 --> 00:00:21,956
for "favicon.ico".

10
00:00:22,548 --> 00:00:24,594
And you can also notice that

11
00:00:24,594 --> 00:00:27,005
the icon shown in the browser tab

12
00:00:27,579 --> 00:00:28,900
is just a generic one,

13
00:00:29,400 --> 00:00:31,639
Because we don't currently have

14
00:00:31,639 --> 00:00:33,806
a custom icon for our website.

15
00:00:34,379 --> 00:00:36,687
So for a start let's go and find

16
00:00:36,687 --> 00:00:39,068
an image that we can use as icon.

17
00:00:39,068 --> 00:00:40,799
And I'll choose one from

18
00:00:40,799 --> 00:00:42,025
this "favicon.io"

19
00:00:42,025 --> 00:00:43,757
which is one of the many

20
00:00:43,757 --> 00:00:46,787
favicon generators you can find out there.

21
00:00:47,648 --> 00:00:49,843
For simplicity I'll just select

22
00:00:49,843 --> 00:00:51,472
one of the emoji icons.

23
00:00:52,043 --> 00:00:54,150
And I know there's one called "Infinity"

24
00:00:54,650 --> 00:00:56,422
that is this infinity symbol.

25
00:00:57,050 --> 00:00:58,806
Feel free to pick a different icon

26
00:00:58,806 --> 00:01:00,407
if you see one you like better.

27
00:01:00,959 --> 00:01:02,664
So I'll download this image,

28
00:01:03,192 --> 00:01:04,925
and this is actually a zip file,

29
00:01:04,925 --> 00:01:05,845
that we can open.

30
00:01:07,025 --> 00:01:09,431
And it contains a few different variants

31
00:01:09,431 --> 00:01:10,514
of the same image,

32
00:01:10,514 --> 00:01:12,319
in different sizes and formats

33
00:01:12,940 --> 00:01:14,882
that can be useful if you want

34
00:01:14,882 --> 00:01:17,472
to support devices like Android and iOS.

35
00:01:18,037 --> 00:01:19,179
But for this example

36
00:01:19,179 --> 00:01:21,122
we're going to use a single image.

37
00:01:22,037 --> 00:01:23,480
Now, the question is:

38
00:01:23,480 --> 00:01:25,475
where should we put that icon

39
00:01:25,475 --> 00:01:26,781
inside our project?

40
00:01:27,419 --> 00:01:29,691
With Next.js we can have a folder

41
00:01:29,691 --> 00:01:30,793
called "public",

42
00:01:31,362 --> 00:01:34,244
and any file we put inside this folder

43
00:01:34,244 --> 00:01:37,202
will be served as it is to the browser.

44
00:01:37,778 --> 00:01:39,850
Let's start with a different example.

45
00:01:40,350 --> 00:01:43,091
We can create a "robots.txt" file,

46
00:01:43,591 --> 00:01:45,448
that, as you probably know,

47
00:01:45,448 --> 00:01:47,785
can be used to tell search engines

48
00:01:47,785 --> 00:01:49,641
which pages they can index.

49
00:01:50,278 --> 00:01:51,483
In our blog website

50
00:01:51,483 --> 00:01:53,575
we want to let all search engines

51
00:01:54,138 --> 00:01:55,529
access all the pages,

52
00:01:55,529 --> 00:01:57,382
so these would be the rules.

53
00:01:57,948 --> 00:01:59,479
Now that we have that file

54
00:01:59,479 --> 00:02:01,068
inside the "public" folder,

55
00:02:01,626 --> 00:02:03,541
we can request "/robots.txt"

56
00:02:03,541 --> 00:02:04,566
in the browser.

57
00:02:05,134 --> 00:02:07,652
and we get exactly the same content

58
00:02:07,652 --> 00:02:09,667
we just wrote in the editor.

59
00:02:09,667 --> 00:02:12,545
So the file is simply returned as it is,

60
00:02:13,188 --> 00:02:16,035
unlike the JavaScript files that we have

61
00:02:16,035 --> 00:02:17,885
inside the "pages" folder,

62
00:02:17,885 --> 00:02:20,661
that are processed and rendered to HTML

63
00:02:20,661 --> 00:02:23,436
before they're returned to the browser.

64
00:02:24,150 --> 00:02:26,707
Ok. Now that we have this "public" folder

65
00:02:27,207 --> 00:02:29,470
we can copy our "favicon" file

66
00:02:29,470 --> 00:02:30,676
inside "public".

67
00:02:31,252 --> 00:02:33,008
And this should now be used

68
00:02:33,008 --> 00:02:34,829
as the icon for our website.

69
00:02:35,395 --> 00:02:36,916
You can see that the icon

70
00:02:36,916 --> 00:02:38,743
is visible in the browser tab.

71
00:02:39,304 --> 00:02:41,366
Ok, so this works because

72
00:02:41,366 --> 00:02:43,429
the browser requests that

73
00:02:43,429 --> 00:02:45,822
"favicon.ico" URL by default.

74
00:02:46,487 --> 00:02:48,995
But we can also explicitly declare

75
00:02:48,995 --> 00:02:51,060
where to load our icon from.

76
00:02:51,633 --> 00:02:53,048
And we want to do that

77
00:02:53,048 --> 00:02:54,399
in our App component,

78
00:02:54,399 --> 00:02:56,585
since it applies to all the pages.

79
00:02:57,213 --> 00:02:59,369
Now, the tag for the icon goes

80
00:02:59,369 --> 00:03:01,309
inside the document "head",

81
00:03:01,881 --> 00:03:03,891
so, if you remember, we can use

82
00:03:03,891 --> 00:03:06,162
the Next "Head" component for that.

83
00:03:06,727 --> 00:03:08,566
And we want a "link" element

84
00:03:09,066 --> 00:03:10,248
with "rel=icon",

85
00:03:10,248 --> 00:03:12,686
which is the "relationship" type,

86
00:03:13,259 --> 00:03:15,228
and then the "href" property

87
00:03:15,228 --> 00:03:17,267
will point to the image file.

88
00:03:17,837 --> 00:03:20,350
In this case it's "/favicon.ico"

89
00:03:20,350 --> 00:03:23,098
because the file is directly inside

90
00:03:23,098 --> 00:03:24,668
the "public" folder,

91
00:03:24,668 --> 00:03:26,317
so it's visible under

92
00:03:26,317 --> 00:03:28,201
the root of our website.

93
00:03:29,015 --> 00:03:30,039
And if we save,

94
00:03:30,039 --> 00:03:31,471
our icon still works.

95
00:03:32,039 --> 00:03:33,422
But we're not limited

96
00:03:33,422 --> 00:03:35,002
to keeping all the files

97
00:03:35,002 --> 00:03:37,240
directly under "public" of course.

98
00:03:37,871 --> 00:03:39,456
We can have sub-folders,

99
00:03:39,456 --> 00:03:41,767
for example create one for "icons".

100
00:03:42,333 --> 00:03:44,356
And if we move our image inside there,

101
00:03:46,033 --> 00:03:48,664
then it will be accessible in the browser

102
00:03:48,664 --> 00:03:49,948
at a different path.

103
00:03:49,948 --> 00:03:52,322
That's why we now get a 404 Not Found

104
00:03:52,950 --> 00:03:54,684
because the file is no longer

105
00:03:54,684 --> 00:03:55,401
at that URL.

106
00:03:55,960 --> 00:03:58,618
It's now under the "/icons" path.

107
00:03:59,118 --> 00:04:00,807
So if we change the "href"

108
00:04:01,584 --> 00:04:03,372
then the icon will work again.

109
00:04:03,872 --> 00:04:05,343
Let me reload, just to show

110
00:04:05,343 --> 00:04:06,760
that the error disappears.

111
00:04:07,314 --> 00:04:08,675
But you could already tell

112
00:04:08,675 --> 00:04:10,872
by looking at the icon in the browser tab.

113
00:04:11,424 --> 00:04:12,594
Just to be clear,

114
00:04:12,594 --> 00:04:15,483
I only moved the icon to a different path

115
00:04:15,483 --> 00:04:18,373
to show you how the "public" folder works.

116
00:04:18,373 --> 00:04:20,230
We could have left the icon

117
00:04:20,230 --> 00:04:22,569
in the default location of course.

118
00:04:22,569 --> 00:04:24,014
But the point is that

119
00:04:24,014 --> 00:04:26,216
you can use this "public" folder

120
00:04:26,216 --> 00:04:27,454
to keep any assets

121
00:04:27,454 --> 00:04:29,793
you want to use in your web pages.

122
00:04:29,793 --> 00:04:32,132
They can be images, fonts, videos,

123
00:04:32,132 --> 00:04:34,815
anything that should be served as it is

124
00:04:34,815 --> 00:04:36,604
you can put it inside here

125
00:04:36,604 --> 00:04:38,874
and reference it from your pages.