Instructor: Let's now add the meta description
that we were missing
and we're also gonna add something called a favicon.
And starting with the meta description
it's basically a short summary of our website's content
and it's also the text that will appear for each
of the search results in Google and other research engines.
So to add that to our page
we once again use the meta element.
So meta again stands for metadata
which is essentially data that describes other data.
And so this is the official way of adding metadata to html.
So here we need to specify name
and then description
and then the content.
And so the content attribute here is where that summary
of our content basically goes.
So let's say that Omnifood is an AI-powered
food subscription that will make you eat healthy again,
365 days per year.
So we could have copied this text also from
from multiple places on our page, but I'm just
writing it out here, that's probably a bit quicker.
So it's tailored to your personal tastes
and nutritional needs.
All right
so this is the text that will appear in search engines.
So that's quite important.
And now let's actually also finally give
our page a proper title.
So just Omnifood is a little bit poor here.
So like this, it doesn't look really nice, right?
So usually a page has something like a divider like this
like a dash or a colon or this vertical dash.
And so let's do the same here.
So I will add a dash using an HTML entity called M dash.
And maybe we already did that before.
And so this one looks like this.
So it's simply just a bigger dash than just writing this.
So let's say as a nice headline here, Never cook again.
And so indeed that looks a little bit nicer here.
Now another thing that we are missing is something
that all other pages also have usually
which is this icon here.
So you see that each of these pages here has its own icon
and this icon is called the favicon.
And so let's now create our own here for our page.
So replacing basically that default icon here
which looks really bad.
So never just do that.
Never leave this default icon without adding your own one.
All right.
Now here in our content, so in our images
we already have this favicon right here.
However, this one is huge.
So 512 pixels and it is 15 kilobytes.
Now it is this big
because we actually need multiple versions basically
of this icon.
So we need this icon here to be big for Android devices.
And then we need some smaller versions
for displaying it in the browser
as a favicon and also for something else on iOS.
But first, let's start with the favicon for browsers.
So I'm gonna open the folder
that we are currently working in.
So that's this one here.
And then I'm gonna open this image here like this.
So on the Mac
it is very easy to resize the images,
while on Windows I'm not sure how it works.
So if you're on Windows, you probably need to
download some application that you can use to resize images.
Okay, and if you don't want to do that
you can simply take the final images
out of the final course files.
All right, I will just do that here very quickly.
And actually we should copy it first.
So you see it's already called favicon.png
but let me copy that here so I can keep the original.
So again, markup, and once again, if you are on Windows
you can just download some other software
or you can simply take the final files.
So I will resize this one to maybe 64 pixels.
And so then you see it's only three kilobyte
so that's a lot better.
All right, and let's close this and come back here
and we will then use this one here in a minute.
So somewhere here in the header, again
let's now add that favicon.
So we could probably do that anywhere
but I like to do it here after the metatext.
So basically close to the styles
because to include the favicon
we actually also use the link element.
So link again, but now the rel attribute here is icon
and then also the href property.
And so here basically defining the path
to that favicon file.
So that's at image.favicon.png.
Then let's close this.
And of course outside here.
Okay, and that should be it.
And indeed there is our favicon.
And so this looks a lot better than before.
Now it gives or page a really nice and important touch here.
So if you see now the other tabs here open, besides this
then this one looks just like any other regular website
right? So really, really cool.
But actually we are not done here yet.
So we are done with the browser part
but there are actually ways of adding a website basically
as a favorite to iOS devices and also to Android devices.
So I'm not sure if you have ever done that
and how many users do this, but there is actually an option
on both these operating systems that we can basically
add a website to the home screen.
And so for that, we will need to provide a special icon.
So let's do that and starting with iOS.
So here rel is Apple Touch icon
and then as always the href.
And so let's now create that icon.
So we have this one.
Let's copy it again because we will need it again actually.
So let's call this Apple Touch Icon.
And then let's also do the ones for Android.
So on Android we need actually two.
So let me copy it again.
So copy paste.
And also we need to change the dimension here.
So markup, and this should be 180.
So that's kind of a hard rule here for the Apple one.
And then for Android, we need one
with 192 and one with 512.
So let's call this one favicon 192 and favicon 512.
So this one is already 512, right?
And so we just need to resize this one to be 192.
All right, and you might think
that all this is a lot of work and not really necessary
but if you want to make your website perfect for all users
then you need to do this.
And like real design studios
they of course go through all these steps.
So it's nice
that you know already how things like this work.
So Apple Touch Icon, and again
we will not really be able to test this now because well
we don't have an iPhone handy here on the screen right.
Now for the Android devices
it actually works a little bit differently.
So for Android, we will need to create a brand
new file right here basically in the home folder.
And that file is going to be called manifest.webmanifest.
And so this is kind of a file extension that is used
for Android to recognize a different favicons, basically.
So here, let's just write this.
So simply copy what I'm doing here.
So icons, then colon, and then the square brackets
and then creating another object
which is what this is called.
So then source.
And of course you will not know all of this by heart.
So this is something that you copy from somewhere.
And even right now I am copying this from somewhere else.
So I don't know this by heart
obviously that would be a little bit too much.
So anyway, for the source
we have to move into our image folder.
Here we don't need this slash actually.
And then I think it was called favicon192.png.
And yeah, so VS code recognizes it immediately.
Then we also need to specify the type
which is image/png and also the sizes.
So 192 by 192.
Okay, so that's the first one.
And now let's simply copy this line, add a comma here.
And now the other one is the 512.
And so 512 times 512.
All right, so that's it for this one.
And now here we just need to reference that.
So adding another link, element rel is now manifest
and the href is well manifest.webmanifest.
And there we go.
That's it.
Well, except for closing, this one here.
Yeah, but now that is correct.
And so with this
we added the right favicons basically for all platforms.
So this one here works for the browser.
This one here works for adding the website
as an icon to the iOS home screen.
And then the manifest here works
for doing the same, but on Android now, right?
And so we're almost almost done here
building and optimizing our page.
Now all we have to do next is to optimize our images
in the next lecture.