All language subtitles for 004 Icon and Metadata Files_en

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.