Hi, my name is Dan and in this video we're gonna look at  fons or favorite icons or whatever you wanna call them. So they are these, this little icon here  that appears both in this icon and this little tab here. These are the fons  and these are little images that you upload to your server  that the browser then uses both in these tabs  and under bookmarks. Can you see this list here? These are all the little fons  for different websites. So without it, there is nothing.

And it's one of those weird things where it's one  of my most favorite parts  of building a website is making sure the fcon is up there. Most people will never notice them,  but as a web designer, it feels like I've really got a  website when I've got my own fcon. So to build one and there's two things that needs to happen. You need a square version of your logo  or icon that you want up there and then go off  and Google something like Fcon generator. I like this site here. It's called Fcon  Matic okay.com.

Um, it's pretty sight and it works. So what you need to do is have a logo ready for it. Um, and you can see it here. I'm gonna use the good old fashioned, uh, fcon. Not the big fancy new one. I just want the basic one that gets used in these parts.

It says recommended size 32 pixels by 32 pixels. And so you need some basic photo editing program. Um, you can kind of start with anything really. I use Photoshop 'cause I've got it. Um, so in Photoshop here I've got,  I open a version of my logo. I'm gonna make a new file.

Actually I'm gonna do a select  all and then gonna edit copy  and then I'm gonna make a new file. So I've copied it, I'm got a new file. Remember suggested size with 32 pixels by 32 pixels. It's gonna be 72 dots per inch. And make sure it's at RGB. It just 'cause click K and have to zoom in a bit on it  'cause it's pretty damn small.

And I'm gonna paste my little graphic. Now I'm gonna have to zoom out again. Okay, so I'm using control minus on my keyboard to zoom out  and I'm gonna use the edit transform and I'll use scale. Now I'm gonna hold shift down. Okay. And then drag this corner along.

And what I'm looking to do is I'm just looking  to, I'm gonna zoom in again. I'm trying to now get it so  that there's icon sits relatively in the middle there. Perfect. I can click it enter  to get rid of the bounding box. The background layer I do not  need, I want it to be transparent. So I'm gonna select the background layer and click delete.

And that's one half of the task done. I'm gonna go file save as and I'll save it as a jpeg. Actually no, I have to save it as a p and g  'cause I need the transparent background  and I'm gonna save it on my desktop in my dream. Remove exercise files under images  and I'm gonna call this one. Um, you can give it any name. Any name and click okay.

Now the next thing that needs to happen is you need to use  that website where it before. So it needs to change pretty much the naming of it  and to this format called an ICO the moment it's  a PNG. Okay, so we're  Gonna upload our image and we're gonna find it. There's our Anytime. Do any name png? Great.

I'm just gonna ask to download it. I'm gonna stick it, uh, in my,  I'm just gonna put on my desktop  and it's downloaded zip file. I'm gonna open my zip file  there is there, double click them. Open the zip and the bit that I went into this folder,  I want just this guy here. You can mess around with using, um, 16  and 32 if you need to. But just, uh, for the plain basic one,  we just need the Fcon ico  and I'm gonna paste it inside my website.

Under my images. Actually, no, I lie not under images. It needs to go into my root directory. So I'm gonna paste it in here. So all my images will be going into my images folder  except for the favicon. It needs to be in the root.

That's  where the browser goes and looks for it. If I can't find it, it won't look  for it in the images by default. There's ways of forcing it too,  but it's easy just to dump it into the root directory. Now we need to upload it using Dreamweaver and Dreamweaver. Okay. Sometimes, um, you can see here it does update.

It's updated quickly enough. Sometimes though, you need to hit this  refresh to make it update. 'cause sometimes it's gets a folder in the route directory  or on the local directory,  but it doesn't see it straight away. You have to wait for a second or hit this refresh button. Now what I wanna do is I want to hit, uh, put, okay,  and that will put it up on the site. And what will happen is whatever your domain name,  so mine's bring your laptop.com.

Um, it will have, uh, fcon there appear eventually. Now there's a couple of things to note  with fcon is you can only have one per website. So you can't have different ones on different pages. Just one for the whole website. The other thing is that if you go  and adjust this, now say I've, I've put this one  that says put, or I can use site and put, and  because I have this image selected here,  it'll just put this icon up. Now if I go and adjust it  and put it again, what happens is if I go to my browser  and what you'll notice is this thing won't update.

I haven't uploaded it Now I know. But um, even if I did change this from, um, the Adobe logo  to something else, what will happen is that I'll hit refresh  and it won't update okay? For a long time. It sometimes can hold on to like,  if I refresh the page, it does it perfectly quick,  but it doesn't know to refresh this little fon thing here. So sometimes refreshing and will mean closing down Chrome  and opening it back up. Sometimes it can take a day to, before Chrome goes  and dumps the cache and collects this new fcon.

The easiest way to do it, I find to test it, is  to open it up in somebody else's computer that hasn't been  to the website before and go  and, um, check it there and see if it's updated. Or what I do is I go to different browsers. So on my computer here I have Chrome, which I use mainly,  but I've also got Firefox and Safari. So if I go and check, bring your.com. Dot com and Safari, it doesn't, it's gonna go through  and probably show me the updated version. All right?

That's how to create and upload a Favicon.