1
00:00:03,000 --> 00:00:05,139
We're now setting an appropriate

2
00:00:05,139 --> 00:00:06,409
title on each page.

3
00:00:06,476 --> 00:00:09,363
The Home page uses the default one.

4
00:00:09,363 --> 00:00:11,414
Now, there's another small thing

5
00:00:11,414 --> 00:00:13,337
that's missing in our website,

6
00:00:13,401 --> 00:00:15,267
and that is an icon.

7
00:00:15,267 --> 00:00:17,443
At the moment the browser just

8
00:00:17,443 --> 00:00:18,966
shows a generic icon,

9
00:00:19,038 --> 00:00:21,149
while in the other two tabs

10
00:00:21,149 --> 00:00:23,781
you can see the custom icons for

11
00:00:23,781 --> 00:00:26,249
Udemy and Next.js for example.

12
00:00:26,331 --> 00:00:29,119
In fact, you may also have noticed that,

13
00:00:29,119 --> 00:00:30,652
when we load this page

14
00:00:30,722 --> 00:00:33,831
in the console we see a Not Found error,

15
00:00:33,831 --> 00:00:36,670
because the browser tries to load

16
00:00:36,670 --> 00:00:38,821
"favicon.ico" by default,

17
00:00:38,907 --> 00:00:41,919
but there is no such file in our website.

18
00:00:41,919 --> 00:00:44,748
So, let's see how to set a custom

19
00:00:44,748 --> 00:00:46,806
icon in our Next.js app.

20
00:00:46,892 --> 00:00:49,408
If you look at this lecture's Resources,

21
00:00:49,408 --> 00:00:52,564
you'll find a file called "icon.png",

22
00:00:52,564 --> 00:00:54,356
that's a small image.

23
00:00:54,441 --> 00:00:56,216
Let's go and download it.

24
00:00:56,216 --> 00:00:59,407
Now, we want to save it directly in our project,

25
00:00:59,407 --> 00:01:01,628
inside the "app" folder.

26
00:01:01,628 --> 00:01:03,578
So, let's save it there.

27
00:01:04,408 --> 00:01:06,843
Next.js will automatically

28
00:01:06,843 --> 00:01:09,184
use that "icon.png" file.

29
00:01:09,278 --> 00:01:10,800
In fact, you can see that

30
00:01:10,800 --> 00:01:14,152
the browser is already displaying the new icon.

31
00:01:14,152 --> 00:01:17,618
But let me show you how this works in more detail.

32
00:01:17,618 --> 00:01:20,116
Inside the "app" folder we now

33
00:01:20,116 --> 00:01:22,281
have this "icon.png" file.

34
00:01:22,365 --> 00:01:25,146
This is a 32x32 image,

35
00:01:25,146 --> 00:01:28,855
that I've created from the "alien monster" emoji.

36
00:01:28,855 --> 00:01:31,649
Feel free to create your own icon if you like,

37
00:01:31,649 --> 00:01:32,317
by the way.

38
00:01:32,378 --> 00:01:35,047
But the App Router will automatically

39
00:01:35,047 --> 00:01:37,355
detect that file in our project,

40
00:01:37,428 --> 00:01:40,428
and generate the right HTML tag.

41
00:01:40,428 --> 00:01:42,512
If we look at the document "head",

42
00:01:42,512 --> 00:01:44,867
there is now a "link" tag,

43
00:01:44,867 --> 00:01:47,613
with all the right attributes,

44
00:01:47,613 --> 00:01:50,268
and "icon.png" as the "href".

45
00:01:50,360 --> 00:01:53,997
So, once again, Next.js makes our life easy,

46
00:01:53,997 --> 00:01:56,822
by taking care of all the details automatically.

47
00:01:56,822 --> 00:01:59,331
All we have to do is put a small

48
00:01:59,331 --> 00:02:01,291
image in the right place.

49
00:02:01,370 --> 00:02:05,638
Now, "icon.png" is just one of many files

50
00:02:05,638 --> 00:02:08,308
automatically recognized by the

51
00:02:08,308 --> 00:02:10,979
App Router as "Metadata Files".

52
00:02:11,065 --> 00:02:12,971
We can find the full list in

53
00:02:12,971 --> 00:02:14,604
this documentation page.

54
00:02:14,672 --> 00:02:16,742
In addition to the Favicon, you

55
00:02:16,742 --> 00:02:18,412
can provide other images,

56
00:02:18,479 --> 00:02:20,990
like the "apple-icon", that will

57
00:02:20,990 --> 00:02:23,423
be used on iPhones for example.

58
00:02:23,502 --> 00:02:26,427
Another file we can add to our "app" folder

59
00:02:26,427 --> 00:02:28,751
is "robots.txt".

60
00:02:28,751 --> 00:02:31,880
This is normally a simple text file with

61
00:02:31,880 --> 00:02:34,384
instructions for search engines.

62
00:02:34,462 --> 00:02:38,040
For example, you can use it to tell web crawlers

63
00:02:38,040 --> 00:02:40,954
not to index your "/private" pages.

64
00:02:40,954 --> 00:02:43,133
But the advantage of having this

65
00:02:43,133 --> 00:02:44,768
inside the "app" folder,

66
00:02:44,836 --> 00:02:47,143
rather than in the "public" folder,

67
00:02:47,143 --> 00:02:49,450
where you can put any static asset,

68
00:02:49,516 --> 00:02:51,827
is that you can also generate the

69
00:02:51,827 --> 00:02:53,647
file contents dynamically.

70
00:02:53,717 --> 00:02:57,425
You can write a "robots.js" file instead,

71
00:02:57,425 --> 00:02:59,952
with some code that will dynamically

72
00:02:59,952 --> 00:03:01,847
generate the right content.

73
00:03:01,917 --> 00:03:05,047
More than for the "robots.txt",

74
00:03:05,047 --> 00:03:07,444
this feature can be useful to

75
00:03:07,444 --> 00:03:09,510
generate a "sitemap.xml".

76
00:03:09,592 --> 00:03:12,778
This is another file used for SEO,

77
00:03:12,778 --> 00:03:16,405
but in this one you list all the available pages,

78
00:03:16,405 --> 00:03:18,469
to make it easier for search

79
00:03:18,469 --> 00:03:20,092
engines to index them.

80
00:03:20,165 --> 00:03:22,642
You can also have images for

81
00:03:22,642 --> 00:03:25,118
OpenGraph and Twitter cards.

82
00:03:25,206 --> 00:03:28,964
These will be used to show a preview of each page

83
00:03:28,964 --> 00:03:30,994
when you share links to your

84
00:03:30,994 --> 00:03:32,951
website on social networks.

85
00:03:33,024 --> 00:03:35,917
You can either put image files directly

86
00:03:35,917 --> 00:03:37,772
inside each route folder,

87
00:03:37,846 --> 00:03:42,073
or you can generate images dynamically using code.

88
00:03:42,073 --> 00:03:45,693
So we could provide a different "opengraph-image"

89
00:03:45,693 --> 00:03:49,209
for each review page in our website for example.

90
00:03:49,209 --> 00:03:51,748
For the moment, in our application

91
00:03:51,748 --> 00:03:54,063
we'll only keep the "icon.png".

92
00:03:54,137 --> 00:03:55,915
But be aware that you can have

93
00:03:55,915 --> 00:03:57,693
all these other files as well,

94
00:03:57,753 --> 00:03:59,919
if you need them for your own projects.