• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

Dreamweaver Tutorial: Add a Favicon using Dreamweaver

Written by Gabriel on January 19, 2010

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.

dw-tut-favicon-sample 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:

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />


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!

Posted in Adobe Dreamweaver

56 Comments to Dreamweaver Tutorial: Add a Favicon using Dreamweaver

  1. October 3, 2014 at 6:12 am | Permalink

    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.)

  2. Heather Johnson's Gravatar Heather Johnson
    October 16, 2014 at 10:08 am | Permalink

    Thanks for this!

  3. Joe's Gravatar Joe
    October 27, 2014 at 1:20 pm | Permalink

    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.

  4. Joe's Gravatar Joe
    October 28, 2014 at 10:05 am | Permalink

    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?

  5. Joe's Gravatar Joe
    October 28, 2014 at 10:58 am | Permalink

    here. please.

  6. Joe's Gravatar Joe
    October 28, 2014 at 11:37 am | Permalink

    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.

  7. Joe's Gravatar Joe
    October 28, 2014 at 12:51 pm | Permalink


    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!

  8. November 25, 2014 at 9:13 am | Permalink

    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!

  9. November 25, 2014 at 9:14 am | Permalink

    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″ /

  10. February 9, 2015 at 12:22 pm | Permalink

    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

  11. February 10, 2015 at 5:37 pm | Permalink


    Mine doesn’t seem to be working either… could you take a look and let me know?


  12. March 7, 2015 at 7:04 am | Permalink

    do I have to do this to every page on my website?

  13. March 17, 2015 at 9:03 am | Permalink

    Very usefull

  14. faisal's Gravatar faisal
    March 28, 2015 at 11:49 pm | Permalink

    Great work!!Gabriel
    thank you….!!

  15. July 24, 2015 at 12:05 pm | Permalink

    I’m trying so hard. The favicon can be found here:
    http://www.neworleanstradjazzcamp.com/images/favicon.ico but the code is not working.

  16. August 19, 2015 at 2:33 pm | Permalink

    Thank you!! Best & easiest instructions I found!! Worked perfectly!

  17. Adam's Gravatar Adam
    November 4, 2015 at 5:53 am | Permalink

    Just tried this and it worked great with Dreamweaver cc.
    Big Thanks!

  18. March 27, 2016 at 7:30 am | Permalink

    it works. thanks bro!

  19. Terri's Gravatar Terri
    April 8, 2016 at 8:01 am | Permalink

    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!!!

  20. April 26, 2016 at 7:38 am | Permalink

    Thanks for the tutorial – it still works even in 2016. And I liked your helpful comments – which helped me deduce my problem!

  21. October 5, 2016 at 11:56 am | Permalink

    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?

  22. Sherry's Gravatar Sherry
    October 17, 2016 at 1:56 am | Permalink

    Hi Gabriel

    I have tried it but it doesn’t work. My website is local one. Does that matter? Could you please help me?


  23. January 24, 2017 at 9:28 am | Permalink

    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?

    • January 24, 2017 at 9:29 am | Permalink

      Code does not show but basically what you gave us with this as the title.

  24. April 28, 2017 at 2:48 pm | Permalink

    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

    • April 28, 2017 at 2:54 pm | Permalink

      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?

  25. April 29, 2017 at 10:06 am | Permalink

    oops. The code I added to my reply didn’t show up. assets/images/favicon.ico

  26. TONY's Gravatar TONY
    November 15, 2017 at 1:21 pm | Permalink

    Thanks for the great work. It worked perfectly for me.

  27. December 25, 2017 at 11:33 am | Permalink

    Hello Gabriel,

    I wrote this into Dreamweaver last night and boom it was there!! -happy dance! But today when I went to continue writing the site all of a sudden it dropped the favicon icon and it has a little page icon instead of the one I loaded up. I have tried to redownload the icon, reattach it into the site but it still isn’t changing it from the little page icon to the one i wanted.

    Any suggestions? – Hoping you are still monitoring this thread.



  28. June 8, 2020 at 4:15 am | Permalink

    Please how to add favicon to Cpanel SUB-domain (www.sub.mydomain.com) Give me the easy steps. thanks in advance. MK.

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Featured Clients

Plum Property Management (Logo)

Gecko Designs

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

(406) 662-1123

523 N Higgins Ave, Missoula
Avi Kolko 2 months ago
Gecko built us a new Unity Hospice website from the ground up, as well as designing new brochures and other collateral material. Working with them has been a pleasure - they are professional, organized, responsive, aim to please, and are easy to work with. Their design work is beautiful, and they really took pains to understand the look we were going for. Highly recommended!
Avigail Bass 4 months ago
We redesigned a very very old website with Gecko and began the process during coronavirus. Despite those challenges, the team at Gecko was very helpful and flexible. They built us a beautiful website, taking into account all our needs. The project manager Grace, was a pleasure to work with, always available to answer questions, great with communication, and very organized. They went above and beyond to make sure the end product was perfect, even if it meant putting in extra hours, or extending the project longer than anticipated. We really appreciated all they did for us and could not be happier with the results!
Craig McKay 5 months ago
Gecko Design staff was super easy to work with. They were able to help us create an incredible web site that is getting noticed. I would highly recommend Gecko to anyone looking for web design.
Courtney Firak 8 months ago
Working with the team at Gecko Designs has been fantastic! I worked closely with Ali to create a new meetings website and she was so patient with all the changes to copy and took the time to walk me through the back-end of Word Press. I am confidently making changes on own but know that any request will be done quickly. The team was even very responsive over a weekend to meet a deadline. Highly, highly recommend!
PHC Missoula 9 months ago
Gecko's team does great work. We had a fairly complex request with a variety of stakeholder interests at play. Their team listened carefully and responded thoughtfully to our needs throughout the process! We were very pleased with the process and thrilled with the final product they provided.
We’ve been working so hard making our clients look good, we neglected our own brand for quite a few years (25 to be exact...)! New look comin’ at ya Spring 2021! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123