How can I setup a favicon for when my website is bookmarked?

  • 0
  • 40
  • Question
  • Updated 2 weeks ago
  • Answered
I'd like to setup a favicon for when people bookmark one of my pages. What are the steps needed to do this?
Photo of Homestead FAQ

Homestead FAQ, Employee

  • 40,876 Points 20k badge 2x thumb

Posted 6 years ago

  • 0
  • 40
Photo of Mike F.

Mike F., Alum

  • 184,428 Points 100k badge 2x thumb
Official Response
It is possible to have a custom icon appear in your visitor's bookmarks. You need to create an .ico file, insert HTML code to reference the .ico file, and add code so visitors can bookmark the site (add to their Favorites).


Note: The .ico file will appear alongside the URL only after a visitor has bookmarked the site. The .ico file will then appear in the address bar and in the list of bookmarks (favorites) next to the title of the site.


Creating the icon:


You will need to use an icon editor to create your icon.(Click here for a FavIcon Generator) The icon editor program can either convert an existing bitmapped image to ico file format, or create an icon with drawing/painting tools.


Follow these guidelines when you create the icon:

  • It must be 16x16 pixels in size.


  • It must be saved in the ".ico" format.


  • It must be saved as favicon.ico.


To import the icon:


  1. Login to your website account.


  2. Click Websites Manager in the left navigation menu.


  3. Click Edit Site.






  4. At the top, click on your domain name or sitename. Then, click View File Manager.






  5. In File Manager, click Import and upload the .ico file into your root directory.






Adding the HTML reference:


Now you'll need to add the reference to the ico file so a visitor's browser can call the custom .ico file rather than using the default browser .ico file.


  1. Open the "index" page in SiteBuilder and then click on Page Settings in the top toolbar and choose the advanced settings tab. You'll want to add the following code to the head tag section.



<link rel="shortcut icon" href="http://www.yourdomainname.com/favicon.ico" />







  1. Publish your website to have the favicon live.


(Edited)