We're now setting an appropriate
title on each page.
The Home page uses the default one.
Now, there's another small thing
that's missing in our website,
and that is an icon.
At the moment the browser just
shows a generic icon,
while in the other two tabs
you can see the custom icons for
Udemy and Next.js for example.
In fact, you may also have noticed that,
when we load this page
in the console we see a Not Found error,
because the browser tries to load
"favicon.ico" by default,
but there is no such file in our website.
So, let's see how to set a custom
icon in our Next.js app.
If you look at this lecture's Resources,
you'll find a file called "icon.png",
that's a small image.
Let's go and download it.
Now, we want to save it directly in our project,
inside the "app" folder.
So, let's save it there.
Next.js will automatically
use that "icon.png" file.
In fact, you can see that
the browser is already displaying the new icon.
But let me show you how this works in more detail.
Inside the "app" folder we now
have this "icon.png" file.
This is a 32x32 image,
that I've created from the "alien monster" emoji.
Feel free to create your own icon if you like,
by the way.
But the App Router will automatically
detect that file in our project,
and generate the right HTML tag.
If we look at the document "head",
there is now a "link" tag,
with all the right attributes,
and "icon.png" as the "href".
So, once again, Next.js makes our life easy,
by taking care of all the details automatically.
All we have to do is put a small
image in the right place.
Now, "icon.png" is just one of many files
automatically recognized by the
App Router as "Metadata Files".
We can find the full list in
this documentation page.
In addition to the Favicon, you
can provide other images,
like the "apple-icon", that will
be used on iPhones for example.
Another file we can add to our "app" folder
is "robots.txt".
This is normally a simple text file with
instructions for search engines.
For example, you can use it to tell web crawlers
not to index your "/private" pages.
But the advantage of having this
inside the "app" folder,
rather than in the "public" folder,
where you can put any static asset,
is that you can also generate the
file contents dynamically.
You can write a "robots.js" file instead,
with some code that will dynamically
generate the right content.
More than for the "robots.txt",
this feature can be useful to
generate a "sitemap.xml".
This is another file used for SEO,
but in this one you list all the available pages,
to make it easier for search
engines to index them.
You can also have images for
OpenGraph and Twitter cards.
These will be used to show a preview of each page
when you share links to your
website on social networks.
You can either put image files directly
inside each route folder,
or you can generate images dynamically using code.
So we could provide a different "opengraph-image"
for each review page in our website for example.
For the moment, in our application
we'll only keep the "icon.png".
But be aware that you can have
all these other files as well,
if you need them for your own projects.