All language subtitles for 042 What Are Favicons_.en_US

So the first difference that you'll notice between our site and their site is that even in the tab bar

you can see that we've got this little new file icon here which is kind of devoid of any design but he's

got this cute little icon over here.

So how do we get hold of one of those.

Well this is called a favicon or a favorite icon.

And the reason it's called that is because back in the olden days when people were still using, shock horror,

Internet Explorer number 5, the favicon, or the favorite icon, was an icon that would show up in your

browser bar

if you were on a web site that you had favorited, and a quick side effect of that is that if you were

the web developer you can see how many times did people request to display your favicon and that would

give you an estimate of how many people had booked marked or favorited your web site.

But now that doesn't work anymore because the browsers will try to display the favicon for all web

sites whether you favorited it or not.

But it's a nice touch.

And this is something that we want to implement.

Now if you want to do this just head over to favicon.cc, and here you can create a brand new favicon.

Now you can either import an image maybe of yourself and it will try to turn it into a very coarse

drawing or you can just simply draw it yourself.

So I'm just going to draw one myself and I'm just going to draw a capital A as best as I can which is

not that

well.

All right.

So here's my favicon, and you can see that this is what it would look like when it's being used.

So you can go ahead and refine it however you want to make it look nice.

And this is where you really unleash your creative talents. Because I don't have many then this is what

I'm going to go with.

So now we can download our favicon, which is in a special format for favicons which is the ico or an

icon format.

And then I'm going to pull up the folder where I've got my CSS - My Site that contains my index.html

and my css folders.

And I'm just going to click and drag this newly downloaded favicon into the same folder.

And now if you head into Atom you'll be able to see it in the project navigator as well.

And in order to incorporate it to our web site we're going to create a new link but this link has a

different relationship it's not the stylesheet in this case it's actually just the icon and the icon

is located at the same hierarchical level as our index.html.

We just have to put its name down so the file is called favicon.ico.

So now if we hit save and we go over to our browser and go to our site and hit refresh then you'll see

that it now has a pretty little favicon that shows up which is pretty neat, right? Now if we take a

look at Sean's site you can see that it's got a whole bunch of distinct sections which we can scroll

through.

So how can we do this for our web site.

Certainly not by using anything that we've done so far because we haven't been able to do any sort of

positioning or layout with our previous CV web site.

So in the next lesson I'm going to show you how we can create these blocks inside our web site that

we can style and make it look something like this.

So you'll have that to look forward to and I'll see you on the next lesson.