How to add a favicon to a website using Dreamweaver

This lesson is exclusive to members

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

1
0

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025