How to create favicon in dreamweaver cs5 and upload to website

Report · Jun 03, 2011

I want to be able to create a favicon and upload to my website with dreamweaver. Can anyone tell me how to do this?

Thanks in advance!

Giselle

Report · Jun 03, 2011

You would just create the graphic first, I use this tool here: http://www.favicon.cc/. It'll give you a properly formated and named file (favicon.ico) which you'll want to place in your root directory (the same directory that youd index page is in). Upload it and you're good to go!

If you're replacing an existing icon it can take some time for your browser to realize you've replaced it, no need to panic.

Report · Jun 03, 2011

Thanks very much for your response. I have already designed my favicon and it's on my desktop. I just don't know where to put it in my rootfolder. I have tried dragging it from bridge to my root folder and placed in images folder...but now how do I upload it with dreamweaver to my website. Do I need an html code?

Report · Jun 03, 2011

Good info from Joey... be sure the image is saved as an actual .ico file, not just any small image (.gif, png, etc).

But to clarify, the favicon does not need to be saved in the root folder, it can be anyplace you want, as long as you path it correctly. For example

http://www.cidigitalmedia.com/video.html

uses:

as you can see, it's a couple folder levels deep.

Also, the favicon will display immediately after uploading to the server, it doesn't take days.... provided you use a browser that has never visited your site before!

That's why many Web page designers post questions about the favicon not showing up on their browser... yet everyone else sees it.

To get the favicon to show up immediately in your browser, you need to remove every trace of having visted your site... and in IE it's a little challenging. Clear the cache (Temp Internet Files folder), remove your site from Favorites, Bookmarks, and any other History stored in the browser.

It's nice to be able to test and see the favicon as soon as it's uploaded and not have to wait a couple days to know if it works!

Best of luck,

Adninjastrator

Report · Jun 03, 2011

I am extremely grateful for your post trying to help me but I am still facing the following:

I have already designed my favicon and it's on my desktop. I just don't know where to put it in my rootfolder. I have tried dragging it from bridge to my root folder and placed in images folder...but now how do I upload it with dreamweaver to my website. Do I need an html code?

Report · Jun 03, 2011

Put this in the <head> of each page:

Of course use the exact absolute path to your favicon file.

Save and upload those pages.

Then upload your .ico file the same way you would upload any image on your site.

Best wishes,

Adninjastrator

Report · Mar 12, 2014

Is it really necessary to put that link in the head of every page? I have a ton of pages. I thought you could just upload the image. I did that and it is not showing up.

Report · Mar 12, 2014

Is it really necessary to put that link in the head of every page?

Yes. You can use DW's Find and Replace to do this:

Find: </title>

Replace: </title><link rel="shortcut icon" href="http://www.yoursite/images/favicon.ico" /><link rel="icon" type="image/png" href="http://www.yoursite/images/favicon.ico" />

Report · Mar 12, 2014

O h dear...I had been going by the earlier post that said:

"You would just create the graphic first, I use this tool here: http://www.favicon.cc/. It'll give you a properly formated and named file (favicon.ico) which you'll want to place in your root directory (the same directory that youd index page is in). Upload it and you're good to go!"

Guess I'm not good to go... I have more than 100 pages on this site.....

Thanks for the response though.....

Report · Mar 13, 2014

Placing the favicon.ico in your root directory is perfectly acceptable and will work in all browsers without adding links in the <head>...

Typical coder OCD will kick in every time you see that .ico file floating outside your images folder though. A lot of folks will move it into their images folder, then add the links to the <head> to tell the browsers where to find it, to keep their site "clean"

All browsers look to your root directory first though and display any .ico found there and if there is none, they will look to your links.

Report · Mar 13, 2014

Thank you! I am still not seeing it though. Will it eventually show up?

Report · Mar 13, 2014

Hello Giselle,

let me put my five cents too:
It's like this, our browser(s) first must be convinced to show it!

Upload the favicon.ico file to your server's root directory.
Insert this line of code between the
<Head> </Head> tags on your home or index.html page:
If you wish to use an animated icon too,
upload the animated_favicon1.gif as above
and add one of this code lines:

Clear ALL your caches!

Check with another browser, the new icon will be there.

Or:

- If set, delete the bookmark to the page or re-create the bookmark.
- Quit browser
- Empty the Temp Internet Files Internet Options
- Clear History
- Delete everything in general, where the browser remembers visited sites.
- Restart
- Clear Site visit
- Clear Bookmark

... and now be patient!

Hans-Günter

Report · Jan 29, 2013

JoeyD and adninjastrator, Thanks so much for your responses. The software JoeyD mentionde was much easier to work with than other software I've tried. Also, the "clear browsing history", etc. tip was huge. The icon had been showing up in one place but not another. Once I removed the page from favorites & clearing cache, it started showing up! Thank you thank you!

Adobe Community

How to create favicon in dreamweaver cs5 and upload to website