Now that we added some styling
to our blog website,
I want to cover another small thing
that has to do with the appearance.
And that's the "favicon".
Perhaps you noticed before
that when we load the page
sometimes we get a not found error
for "favicon.ico".
And you can also notice that
the icon shown in the browser tab
is just a generic one,
Because we don't currently have
a custom icon for our website.
So for a start let's go and find
an image that we can use as icon.
And I'll choose one from
this "favicon.io"
which is one of the many
favicon generators you can find out there.
For simplicity I'll just select
one of the emoji icons.
And I know there's one called "Infinity"
that is this infinity symbol.
Feel free to pick a different icon
if you see one you like better.
So I'll download this image,
and this is actually a zip file,
that we can open.
And it contains a few different variants
of the same image,
in different sizes and formats
that can be useful if you want
to support devices like Android and iOS.
But for this example
we're going to use a single image.
Now, the question is:
where should we put that icon
inside our project?
With Next.js we can have a folder
called "public",
and any file we put inside this folder
will be served as it is to the browser.
Let's start with a different example.
We can create a "robots.txt" file,
that, as you probably know,
can be used to tell search engines
which pages they can index.
In our blog website
we want to let all search engines
access all the pages,
so these would be the rules.
Now that we have that file
inside the "public" folder,
we can request "/robots.txt"
in the browser.
and we get exactly the same content
we just wrote in the editor.
So the file is simply returned as it is,
unlike the JavaScript files that we have
inside the "pages" folder,
that are processed and rendered to HTML
before they're returned to the browser.
Ok. Now that we have this "public" folder
we can copy our "favicon" file
inside "public".
And this should now be used
as the icon for our website.
You can see that the icon
is visible in the browser tab.
Ok, so this works because
the browser requests that
"favicon.ico" URL by default.
But we can also explicitly declare
where to load our icon from.
And we want to do that
in our App component,
since it applies to all the pages.
Now, the tag for the icon goes
inside the document "head",
so, if you remember, we can use
the Next "Head" component for that.
And we want a "link" element
with "rel=icon",
which is the "relationship" type,
and then the "href" property
will point to the image file.
In this case it's "/favicon.ico"
because the file is directly inside
the "public" folder,
so it's visible under
the root of our website.
And if we save,
our icon still works.
But we're not limited
to keeping all the files
directly under "public" of course.
We can have sub-folders,
for example create one for "icons".
And if we move our image inside there,
then it will be accessible in the browser
at a different path.
That's why we now get a 404 Not Found
because the file is no longer
at that URL.
It's now under the "/icons" path.
So if we change the "href"
then the icon will work again.
Let me reload, just to show
that the error disappears.
But you could already tell
by looking at the icon in the browser tab.
Just to be clear,
I only moved the icon to a different path
to show you how the "public" folder works.
We could have left the icon
in the default location of course.
But the point is that
you can use this "public" folder
to keep any assets
you want to use in your web pages.
They can be images, fonts, videos,
anything that should be served as it is
you can put it inside here
and reference it from your pages.