Dreamweaver Tutorial: Add a Favicon using Dreamweaver
What is a Favicon?
A Favicon (short for Favorites Icon) is that cool little square image you see to the left of the URL on some websites. Favicons also appear in browser’s bookmark listings and on browser’s tabs. Favicons are a great way to give your website a bit of additional branding and customization. They’re fun and easy to create and install!
How do I get a Favicon on my website using Dreamweaver?
Creating and installing a Favicon using Dreamweaver is a 2 step process. First we’ll create the Favicon itself and then we will add a bit of code to our Dreamweaver webpage to display the Favicon in the right place. That’s it!
Step 1: Creating a Favicon
A Favicon must be 16 pixels wide and 16 pixels tall. That’s pretty tiny so keep your image as simple as possible. It’s easiest to create your image at a larger size and then reduce the image down to 16 x 16 pixels using Adobe Photoshop.
Using Adobe Photoshop, start with a square canvas of any size and create your image. When you’re finished, reduce the image size to 16 pixels by 16 pixels and save the image in one of the following formats: GIF, JPG or PNG.
Save our PNG format Favicon example image (at left) to your own computer and try it for yourself or create your own.
To be fully supported in all major web browsers, Favicons must be in the ICO (icon) file format. Unfortunately, Adobe Photoshop doesn’t support this file format by default so we’ll need to convert our image from GIF, JPG or PNG to ICO without using Photoshop.
Dynamic Drive has a great tool called the Favicon Generator that will do the converting for you and it’s free! Use it to convert your image to the ICO format and then save the ICO Favicon to your computer.
You can name your Favicon ICO file whatever you want but for this example I’ll call mine favicon.ico. If you decide to name yours something different, make sure that you refer to it correctly in your HTML code in the next step.
Step 2: Installing the Favicon on your Dreamweaver site
Upload your new Favicon ICO image to the images folder of your website and let’s add a bit of code to your Dreamweaver page that will define the ICO image you made as your webpage Favicon.
In Dreamweaver, switch to Code View and scroll to the top of your document. In this step we will copy and paste HTML code into Dreamweaver to activate the new Favicon.
In Code View at the top of your page, locate the closing </head> tag which should appear just before the opening <body> tag. Place your cursor before the closing </head> tag and press return to create a new blank line.
Lastly, copy and paste the following line of code into Code View within Dreamweaver:
Remember, if you’ve named your Favicon something other than favicon.ico or saved it in a directory other than the images directory, you’ll need to update your code accordingly.
That’s all there is to it! Upload your files (make sure to upload both your HTML file and your new Favicon image) and have a look at your brand new Favicon in your favorite browser!
Dreamweaver Tutorial: Add a Favicon using Dreamweaver
You can follow all the replies to this entry through the comments feed.
Leave a Reply
Featured Clients
Take the first step
Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!
Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802
Phone:
(406) 662-1123
Email:
Hi – Thank you so much for this Dreamweaver code!!! I am delighted. Only one problem, when I tested it on my PC it only showed up in Firefox, not IE or Google Chrome. I copied your code, but having put the favicon in the main file (along with the index page) I left out the file name (in your case, ‘images’), otherwise code is identical. Is there something else I can do so it shows in the other browsers?
Very many thanks – Marion
(website in progress, using my village website to test.)
Hi Marion, thanks for your comments! One thing I’ve noticed is that some browsers won’t show the favicon if you are previewing a webpage on your computer. If you upload the file to the web and test the online site, it seems to work. Have you tried that? If that doesn’t work, I’d love to see your page so I can help troubleshoot it!
Thanks for this!
Thank you for this.
Not sure why mine doesn’t seem to show up. I put it in my index.dwt file and it’s identical to yours (except for fav.ico instead of favicon.ico.) I wonder if I’m missing something.
Hi Joe, some browsers won’t show the favicon if you’re previewing a website on your own computer. Have you tried uploading the files and viewing them online? If that doesn’t fix your problem, could you share your code with me so I can have a closer look?
Sorry, had a downtime.
I wasn’t testing at all. I uploaded straight up.
Do you mean I should copy and paste the code here?
Hi Joe, I’d like to look at your code. Can you upload your files to the web and tell me where I can see them?
here. please.
Hi Joe, thanks for the link. I looked at your code which references images/fav.ico however when I go to http://www.allwritedit.com/images/fav.ico, there is no file found. That tells me that your fav.ico file has not been uploaded to your images folder. Can you double check?
Sorry, I’m brand new to this, so I don’t know how to “go to http://www.allwritedit.com/images/fav.ico“, but when uploading, I ensured that fav.ico (which is located in same folder as site logo and other pictures) was uploaded and subsequently “synched”. Note that every other image in the same folder appears on the site.
Joe, I figured this out! Your images folder is actually called “Images” (note the uppercase I).
Most web servers are case sensitive meaning if your code specifies images with a lowercase “i” and your actual folder is Images with an uppercase “I”, things will break.
The code you added to your head tag specifies “images/fav.ico”. It should actually be “Images/fav.ico” and then it should work.
Could you give that a try and let me know if it works?
Touche!
Strange enough, when I first did it it was in uppercase since I copied directly from this page without making changes apart from favicon to fav. Maybe it did not show then because something else was wrong or maybe it was simply taking time to reflect, but that was when I went to change it to lowercase.
Many thanks for your patience!
My pleasure – it’s working now!
Good Morning,
I was always great at adding favicons to websites in the past, however this website I’m currently working on is giving me issues. I can pull up the favicon as you did above for Joe, however it’s not showing up on my site (tried in several browsers). Here’s my code:
Indiana Jewelers Association
None of my other sites are done using a template at first (then moved into Dreamweaver) but this one did. Maybe that’s the issue? I can’t seem to find the master DWT pages to save my life. . . help! THANKS!
my code didn’t show up (duh!) ooops. Here it is with all the
title>Indiana Jewelers Association
!– #EndEditable –>
!– #BeginEditable “keywords” –>
meta name=”keywords” content=”Indiana Jewelers Association” />
!– #EndEditable –>
!– #BeginEditable “description” –>
meta name=”description” content=”Indiana Jewelers Association” /> link rel=”shortcut icon” href=”images/favicon.ico” type=”image/x-icon” />
!– #EndEditable –>
meta name=”designer” content=”rtbwizards.com” />
meta http-equiv=”imagetoolbar” content=”false” />
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /
Hi Heather, your code is looking for your favicon here: http://www.indianajewelers.com/images/favicon.ico
When I try to load that URL, the file is missing. Are you sure you uploaded favicon.ico to the images directory?
Hi there
i have a similar problem, i uploaded the favicon to my website and changed the code in every page as shown above but for some reason it only shows up in my index page?
would be great if you could help me out
thanks!
gert-jan
Gert-Jan, could you share a link to your site with me and I’ll see if I can tell what’s going on?
Hi,
Mine doesn’t seem to be working either… could you take a look and let me know?
Thanks!
Matt
Matt, when I visit your website I am seeing the favicon load properly. Are you still having trouble?
do I have to do this to every page on my website?
Hi Monica, you would need to add that code to every page of your site so if you are using a Dreamweaver template, you’d want to add the code there!
Very usefull
Great work!!Gabriel
thank you….!!
I’m trying so hard. The favicon can be found here:
http://www.neworleanstradjazzcamp.com/images/favicon.ico but the code is not working.
Hi Courtney, it looks like your site is using frames so you’ll need to add this code to your index.html file. Let me know if that helps!
Thank you!! Best & easiest instructions I found!! Worked perfectly!
Just tried this and it worked great with Dreamweaver cc.
Big Thanks!
it works. thanks bro!
Hi and thanks so much for the coding. I love my favicon and what it does for my site.
I really appreciate your willingness to share your knowledge with the world.
Thanks so much!!!
Thanks Terri!
Thanks for the tutorial – it still works even in 2016. And I liked your helpful comments – which helped me deduce my problem!
Thanks Cynthia!