Original subtitles

Let's now add the meta description

that we were missing and we're also going to 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 search 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 a 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 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 that's actually also finally give our page

a proper title.

So just Omnifood, here's 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'll add a dash using an HTML entity called mdash.

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'll 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 a 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 a browser as a favicon,

and also for something else on iOS.

But first let's start with the favicon for browsers.

So I'm going to open the folder

that we are currently working in.

So that's this one here,

and then I'm going to open this image here like this.

So on a 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'll see, it's already called favicon.png,

but let me copy that here so I can keep the original.

So again, mark-up 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'll resize this one to maybe 64 pixels.

And so then you see it's only three kilobytes,

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 meta text.

So basically close to the styles

because to include the favicon icon,

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 our 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 lets 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 the 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 the 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 to this slash, actually.

And then I think it was called favicon-192.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, all 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.