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 5, the favicon or the favorite icon was an icon that would show
up in your browser bar if you were on a website that you had favorited.
And a cool 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 bookmarked or favorited your website.
But now that doesn't work anymore, because the browsers will try to display the favicon for all web
sites, whether if you favorited it or not.
But it's a nice little 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,
and 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 website, 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 after doing all of that, you still don't see your favicon, try changing the href of your
favicon link to this instead.
Add the "?v=2" because it might be that your browser has cached a previous version
or is just trying to create a default one that it's placed there.
So if you change this, it should allow your favicon to show up.
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 website.
So in the next lesson, I'm going to show you how we can create these blocks inside our website 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.