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:
    June 1, 2011 at 12:48 pm

    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:
    October 20, 2011 at 5:50 pm

    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:
    May 25, 2012 at 2:15 am

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

  4. Claire O'Leary says:
    July 3, 2012 at 6:14 pm

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

  5. MyBell says:
    July 25, 2012 at 3:13 am

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

  6. ricky says:
    August 18, 2012 at 8:46 pm

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

  7. Haiza says:
    September 12, 2012 at 1:03 pm

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

  8. Andrew says:
    September 14, 2012 at 6:30 am

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

  9. rhea says:
    November 10, 2012 at 9:28 am

    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:
    November 11, 2012 at 10:38 am

    thank you, this works fine
    :)

  11. adam says:
    January 4, 2013 at 11:16 pm

    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. pamwebinfosolutions says:
    February 1, 2013 at 10:58 am

    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. jamesandereson says:
    February 15, 2013 at 1:21 pm

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

  14. Freshers jobs India says:
    March 7, 2013 at 6:35 am

    working fine for me,

    thanks for sharing

  15. Chandigarh Nightlife says:
    March 30, 2013 at 5:37 am

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