How to add favicon to your website?

,

A favicon is a graphic image associated with a particular Webpage and/or Website.

Now the question comes, how to add a favicon to my website/webpage? To begin with, you will need a small icon that you wish to set as the ‘FavIcon’. It should be 16×16 in size. Once you have the icon ready, rename it to favicon.ico and upload it to your Server root folder, using Contribute through the option File-> Publish File from my Computer.

Alternatively, you can use the below code between the <head></head> (x)HTML tags to set the favicon even though the .ico file in placed in different location.

<link rel="icon" type="image/ico" href="http://www.mysite.com/favicon.ico"/>

How to add the code inside the Head tag? Browse to the page in Contribute, do File -> Actions -> Edit Page Source in External Application. Contribute displays the External Application Editing page and starts an external editing application. In the external application, make changes as necessary, and then save your changes and close the file or application. Please refer to the blog post, http://blogs.adobe.com/contribute/2010/05/edit_web_page_source_in_an_ext.html for more information on Editing in External Application.
Note: Simply changing the filename extension of an image to .ico without converting it to an ICO file will result in an error and not displaying the favicon.

18 Responses to How to add favicon to your website?

  1. Neale Gilhooley says:

    Thanks, very helpful as I have been looking for the definitive method of doing this via Contribute, for our own website and for Clients sites if/when requested. I’ll give it a go!
    http://twitter.com/EvolutionDezine

  2. jana says:

    Lost the Photoshop plugin required when updating to CS5. Maybe a useful file format to add to save/export options? Is Contribute replacing Dreamweaver?

  3. dentist says:

    Why does this work on my index page but not the other pages??

  4. Claire O'Leary says:

    What plugin do i get that will allow me to save to a favicon.ico format?

  5. MyBell says:

    Can You tell me why there is a different favicon on my goodle url? Thanks

  6. ricky says:

    thanks,it is very helpful i will definately try it.

  7. Haiza says:

    @dentist –
    You sud copy and paste the codes in each and every page of ur website.

  8. Andrew says:

    Saving and uploading as a .jpg and then changing the extension to .ico with my ftp client worked fine.

  9. rhea says:

    Stem Cells

    that is my code above i dont know what is wrong, cause the favicon doesnt show up, i use dreamweaver cs6

  10. BeritaLink says:

    thank you, this works fine
    🙂

  11. adam says:

    just rename the extension in win explorer…. use folder options to allow seeing known file type extensions if you cant see the .gif or .jpeg

  12. I have added favicon in index.html file and also uploaded it via ftp with image but It does not display. I do not understand what is wrong with.

  13. This does not work in CS6 can you tell me alternate codes for it.

  14. working fine for me,

    thanks for sharing

  15. Thank you admin for the code… I just added a new favicon on my website… God Bless uo…