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.