How to add a favicon to a website using Dreamweaver

Hi, my name is Dan. In this video we're going to look at Favicons, or favorite icons, or whatever you want to call them. So they are these. This little icon here, it appears, both this icon, and this little tab here, these are the Favicons. 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 little Favicons for different websites. So without it there is nothing. It's one of those weird things where it's one of my most favorite parts of building a website, making sure the Favicon's 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 Favicon.

So to build one, there's two things that needs to happen. You need a square version of your logo, or icon that you want up there. Then go off and Google something like Favicon Generator. I like this site here, it's called favicomatic.com It's a pretty site, and it works. So what you need to do is, have a logo ready for it. And you can see in here. I'm going to use the good old fashioned Favicon, not the big fancy new one. I just want the basic one that gets used in these parts. It says Recommended Size 32x32 pixels. We need some basic photo editing program. You can start with anything really, I use Photoshop because I've got it.

So in Photoshop here, I've got open a version of my logo. I'm going to make a new file. Actually I'm going to do a 'Select', 'All', then go to 'Edit', 'Copy'. Then I'm going to make a new file, so copied it, go to 'New File', remember, adjusted size with 32x32 pixels. It's going to be 72 dots per inch. Make sure it's at RGB. Click 'OK'. I have to zoom in a bit on it, because it's pretty damn small. And I'm going to paste my little graphic. Now I'm going to zoom out again. I'm using 'Control -' on my keyboard to zoom out. And I'm going to use 'Edit', 'Transform', and I'll use 'Scale'. Now I'm going to hold 'Shift' down. And then drag this corner along.

What I'm looking to do, is I'm just looking to-- I'm going to zoom in again. I'm trying to get it so that this icon sits relatively in the middle there. Perfect. I click 'Enter'. The rounding box. The background layer, I do not need, I want it to be transparent so I’m going to select the background layer, and click this. That's one half of the task done. I'm going to go 'File', 'Save As', and I'm going to save it as a 'JPEG', actually no, I have to save it as a 'PNG' because I need the transparent background. I'm going to save it on my 'Desktop', in my 'DW Exercise files', under 'Images'. And I'm going to call this one-- you can give it any name. Click 'OK'.

Now the next thing that needs to happen is, you need to use that website we were at before. So Favicon, it needs to change pretty much the naming of it, and to this format called ico. At the moment it's a PNG. I'm going to upload our image, we're going to find it. There's our 'anyname.png'. It's going to ask us to download it. I'm going to just put it on my 'Desktop'. And it's downloaded a zip file. I'm going to open the zip file. Here he is there, double click, open the zip. And the bit I want in this folder, I want just this guy here. You can mess around with using 16 and 32 if you need to, but for the plain basic one, we just need 'favicon.ico'. Now I'm going to paste it inside my website, under my images, actually, not under images, it needs to go into the root directory, so I'm going to paste in here. So all my images will be going to Images folder except for the Favicon, it needs to be in the root. That's where the browser goes and looks for it, if it can't find it, it won't look for it in the Images by default. There's ways of forcing it to, but it's easier just to dump it into the root directory.

Now we need to upload it using Dreamweaver. Sometimes, you can see here, it does update, sometimes quickly enough, sometimes though you need to hit this 'Refresh' to make it update. And sometimes it gets the fonts that are in the root directory, or on the local directory, but doesn't see it straight away. You have to wait for a second, or hit this refresh button. Now what I want to do is I want to hit 'Put'. And that will put it up on the site. And what will happen is, whatever your domain name-- so mine's bringyourownlaptop.com It will have a Favicon there, appear eventually.

Now there's a couple of things to know for Favicons, is you're going to 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 put this one that says Put, or I can use 'Site'. And because I have this image selected here, it will 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, what you'll notice is, this thing won't update. I haven't uploaded it now, I know, but even if I did change this from the Adobe logo to something else, what will happen is that, I'll hit refresh, and it won't update, for a long time. Sometimes, it can hold on to-- like if I refresh the page, it does it perfectly quick, but it doesn't know to refresh this little Favicon thing here, so sometimes refreshing will mean closing down Chrome, and opening a backup. Sometimes it can take a day before Chrome goes and dumps the cache and collects this new Favicon.

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 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 check bringyourownlaptop.com in Safari, it's going to go through, and probably show me the updated version.

All right, that's how to create and upload a Favicon.