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!
My fav icon works in IE but not in chrome, do not have access to firefox so I couldn’t tell you if it works there.
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!
Hi Gabriel
i tried to install my favicon.ico according your advices but it doesn’t work. Here is my code:
My favicon.ico is located in the images folder. Can you please help me?
Hi Felix, your code is looking for favicon.ico in the images folder but it looks like the images folder is inside another folder called assets. So your code should look like this:
link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"Hope that helps!
Hi Gabriel
I have tried it but it doesn’t work. My website is local one. Does that matter? Could you please help me?
Sherry
Hi Sherry, without seeing your code, I can’t tell for sure but I have experienced some browsers not showing the Favicon locally but work fine when uploaded. Feel free to share your code!
Hey just a quick question. Man you are pretty kind providing this service to people. Anyhow I tested this on my home page. I am using Adobe Dreamweaver CC 2017. When I added this code my HTML text below it lite up like a Christmas tree. Text turned all red and green. I did some searches and no one seems to know why the text would do that.
Also my image is titled Favicon.png so this was the code I used. Look right?
Code does not show but basically what you gave us with this as the title.
Can you post your code somewhere so I can help troubleshoot?
Gabriel, You are the man! Thank you in advance for ANY help you can provide! My favicon.ico will not go into my assets for my Adobe DW built site. I can see it there in my computer directory BUT not showing up in the assets for my site. ??
Once I get it in there I think I am suppose to use: <link
Any help would be appreciated. Since all these post are old I am hoping that you are still here. 🙂 Kari in Arkansas
I just noticed that only .png and .jpg are listing in my assets. (not the .psd or .ico files) Is there a setting or something I should change in order for those to show up there?
Hi Kari, thanks for reaching out! You’re right, the assets panel doesn’t show ICO files but that’s ok. You don’t need to see them in your assets panel in order to use them. If you ignore the fact that you don’t see your faivcon.ico file in your assets panel, are you able to still insert the code into your HEAD tag and get it working?
No it is still not working. 🙁
I still use this code though? (I am in the head tag)
oops. The code I added to my reply didn’t show up. assets/images/favicon.ico
Hi Kari, I’m unable to see your code. Could you post your project somewhere online and send me the URL so I can have a look?
Good Morning Gabriel,
A public place to post project that I can take back down? Couldn’t think of any. 🙂 so… I have an idea.
Could you click on my name, go to my sight, and then see the source code from there?
Kari
Hi Kari, I just visited your website and this is what I see in Chrome: https://screencast.com/t/OGA6SUomMiL6
What makes you think there is a problem? It looks like the favicon is loading just fine!
I did it! 🙂 Thank you! My picture was in “graphics”! YAY!
Thank you so much Gabriel! Please don’t laugh at my code. This is only my second published site. I’m trying now to figure out my meta tags. LOL and trying to figure out what Graph META Tags for Social Sharing are on your site and THEN how to do. LOL
Thank you so VERY much!
Kari
You bet! I’m glad you figured it out! Nice work!