Skip to main content
Brand User

653 Messages

 • 

44.1K Points

Wed, Oct 17, 2012 3:22 PM

Sitebuilder Plus: Favicon

Sitebuilder Plus: Favicon

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 site name. 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.

      For sites without an SSL (http)

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

      For sites with an SSL (https)

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



    2. Publish your website to have the favicon live.

Responses

4 Messages

 • 

140 Points

8 years ago

do I type in the follow code exactly as shown in the above screen shot?

rob@ecimarkting.com

59 Messages

 • 

28.3K Points

Hi rob9466,

Sorry for the confustion. It appears the wrong image was used above. The code you want to add to your head tag is:

 

<link rel="shortcut icon" href="/favicon.ico" />

If you upload the ico file to your root folder you won't have to edit the above code. However if you place it in a folder such as "files", be sure to update the above destination to "/files/favicon.ico".

Please let us know if you have any further questions about it.

Thanks,

Chris

4 Messages

 • 

140 Points

thanks

3 Messages

 • 

170 Points

after publishing the site, favicon.ico file still shows the status as "publish" instead of "ok".

59 Messages

 • 

28.3K Points

Hi Chris,

I right clicked on the favicon file in your file manager and chose Publish. It switched to the OK status.

Thanks,

Chris

3 Messages

 • 

170 Points

I tried everything BUT that........ thanks.

12 Messages

 • 

526 Points

8 years ago

This did not help.

59 Messages

 • 

28.3K Points

Hi Liz,

Sorry for the confustion. It appears the wrong image was used above. The code you want to add to your head tag is:

 

<link rel="shortcut icon" href="/favicon.ico" />


Please let me know which site you having trouble with and I'll take a look.

Thanks,

Chris

12 Messages

 • 

526 Points

rockyriverchamber.com

59 Messages

 • 

28.3K Points

Hi Liz,

Thanks for the quick response. When looking at your files, I don't see the fav icon. Did you create one? If so, what did you name it?

Thanks,

Chris

24 Messages

 • 

646 Points

chris it is not working right what is I'm doing wrong.

12 Messages

 • 

526 Points

8 years ago

favicon.ico. Oops, I never uploaded it, I just did! Sorry.

Is it possible to use this icon on the tab of a Windows browser too? Like how Facebook has the "f" logo next to the word Facebook on the tab.

Thanks.
Liz

59 Messages

 • 

28.3K Points

Hi Liz,

Thanks for the reply. I added the code and your icon is appearing both in the address bar and in the tab of the browser.

Please let me know if you have any other questions.

Thanks,

Chris

12 Messages

 • 

526 Points

THANK YOU so much!

3 Messages

 • 

142 Points

8 years ago

I need help! I believe I've done everything suggested here however the favicon is still not seen. Chris, can you please advise on any other ideas of what I need to do? tegak9.com

Thank you,
Jennel

59 Messages

 • 

28.3K Points

Hi Jennel,

Sorry for the delayed response. I updated the URL location in the html code and the favicon is now appearing in preview mode. I'll check back in a couple hours to see if it has taken effect on your domain.

Thanks,

Chris

7 Messages

 • 

190 Points

Hi Chris, I added the favicon to my files, and added the tag, but its not live, help? www.rgsolarone.com

Thanks, Rich

59 Messages

 • 

28.3K Points

Hi Rich,

It appears your favicon is a .zip file. It needs to be a .ico file in order for it to work. Please click on the link at the top of this thread for the favicon generator which will produce the .ico file you need.

Thanks,

Chris

7 Messages

 • 

190 Points

Chris,

I replaced the favicon with an .ico file, saved and published it, and referenced back to files, but it's still not coming up. What am I doing wrong here?

Thanks,
Rich

59 Messages

 • 

28.3K Points

Hi rgsolar,

Thanks for posting. I removed the /files extension from the html code and it appears to now be pulling up your favicon.

Thanks,

Chris

2 Messages

 • 

122 Points

8 years ago

Hi, i have up loaded the ico files , i have put the code in my page, and still not working help please ?

59 Messages

 • 

28.3K Points

Hi Isabelle,

It appears you added the html code for the favicon to your Contactos,html page, but not your home page. I added it to your home page and your icon is appearing.

Thanks,

Chris

2 Messages

 • 

122 Points

its appearing?? i dont see it ?

59 Messages

 • 

28.3K Points

Hi Isabelle,

I see it both in my address bar and in the page tab. Seems to work great in IE and Firefox. Are you still seeing the blue E?



Thanks,

Chris

3 Messages

 • 

202 Points

8 years ago

I could not get it to work. averyslawncare.com

2 Messages

 • 

210 Points

Hi Avery,

Thanks for posting. The code above was referencing that you put the favicon in your "files" folder. As soon as I removed that files section from the URL, your favicon started appearing!

Please let me know if there is anything else I can help with.

Thanks,

Chris

3 Messages

 • 

202 Points

I bookmarked the page and then I could see it only in favorites, but is there a way to make it appear in the url search bar?

59 Messages

 • 

28.3K Points

Hi Avery,

Please check your URL search bar again. It can take some time to update, but I am now seeing it both in the URL search bar and the page tab (I don't have your site bookmarked).

Thanks!

Chris

7 Messages

 • 

322 Points

To anyone who is having trouble getting their favicon to work, I finally got mine working, and I'd like to share some info. with you. (Despite my requests to three employees for help in these pages, not one responded).

A couple of general notes:

1. These instructions will create a favicon for both the tab and bookmark locations.

2. It took 48 hours for the favicon to appear in the live site and bookmarks. It was visible in preview mode immediately. After you've uploaded and published the favicon.ico file, you can see the time stamp in the File Manager, so you'll know that you can plan on not seeing it on the live site for two days from that point...UNLESS...

2. The live version appeared for me after two things had happened: 48 hours had passed, AND I quit and restarted my browser (Firefox). Maybe the thing would have appeared sooner if I had had restarted Firefox sooner. Give it a try.

3. At a recent event hosted by Intuit, a rep. said that the favicon size should be 100 x 100. Turns out it's 16 x 16 as stated above.

Now, to the procedure:

1. Follow the steps for Creating the Icon above. (Please read everything on the Dynamic Drive's page after the file has been created. There's code there that you'll need in Step 2 below.) In step 5 above, make sure you upload the favicon.ico file to the Root Directory, not a folder. Then PUBLISH IT. Seems like an important step that would be worth mentioning, doesn't it?

2. Proceed to the steps for Adding the HTML Reference. In step 1, first select the Home/Index page in site builder. (You will add the code described below to the Head Tag on the Index page only. I discovered that it does not need to be added to every page). IMPORTANT: the code shown in step 1 is wrong. Look closely below Step 2 for the words, "View 2 More Comments." Click there and you'll see the corrected code. I don't know if it works. Instead, I used the code provided by Dynamic Drive's favicon generator. It looks like this: I'd suggest trying the D.D. code first.

I really do hope this helps.

If you reply to this post, it's unlikely I'll respond. I hardly ever use this community forum. It's usually faster to find another way to solve the problem.

119 Messages

 • 

7.3K Points

Thanks for clearing the original instructions up. With your clarification it works fine.

6 Messages

 • 

458 Points

8 years ago

May I also ask for your help, Chris? I believe I've followed the directions above yet not seeing the favicon show up on brittpowerdevices.com.

59 Messages

 • 

28.3K Points

Hey Jennifer,

I responded to your other post, but was able to get it to work. I think you saved the png file to ico instead of converting it. As soon as I converted it, I started to see it appear.

Thanks!

Chris

6 Messages

 • 

458 Points

You're awesome!! THX!!!! :-)

6 Messages

 • 

458 Points

8 years ago

And where's all the happy faces for those that have it working?!

3 Messages

 • 

160 Points

8 years ago

Hello. I'm also having favicon issues. I'm fairly sure I followed all the instructions precisely but it's still not sowng up on my site, www.timtomandjimbob.com

Any help would be appreciated. Thanks!

59 Messages

 • 

28.3K Points

Hey Adam,

You definitely did everything correct. When going to your website, I do see your favicon.



Please try clearing your cache as you may have a snapshot of your old site on your computer. Please go to clearining cache for more information.

Thanks!

Chris

4 Messages

 • 

162 Points

8 years ago

I've done as you've suggested, Chris... but it does not show up (babyblessings.com.au).
When I look at the file manager, I've got a !Publish reference next to the file. Any help is appreciated.
Thanks,
Ann Marie

59 Messages

 • 

28.3K Points

Hi junkmailannmarie,

You did everything correct! The last part was just publishing the favicon. I went ahead and did this for you, but for future reference in case you ever see a file that has the !Publish notification.

1. Login to the editing software
2. Click on your domain or site name at the far top of the page and select View File Manager
3. Right click on the file that has the publish notification next to it and select publish from the list of options.
4. You will see the publish notification change to a OK notice.

When I preview your website I now see the favicon appear. Please give it some time to start appearing on your published website.

Thanks!

Chris

7 Messages

 • 

322 Points

To anyone who is having trouble getting their favicon to work, I finally got mine working, and I'd like to share some info. with you. (Despite my requests to three employees for help in these pages, not one responded).

A couple of general notes:

1. These instructions will create a favicon for both the tab and bookmark locations.

2. It took 48 hours for the favicon to appear in the live site and bookmarks. It was visible in preview mode immediately. After you've uploaded and published the favicon.ico file, you can see the time stamp in the File Manager, so you'll know that you can plan on not seeing it on the live site for two days from that point...UNLESS...

2. The live version appeared for me after two things had happened: 48 hours had passed, AND I quit and restarted my browser (Firefox). Maybe the thing would have appeared sooner if I had had restarted Firefox sooner. Give it a try.

3. At a recent event hosted by Intuit, a rep. said that the favicon size should be 100 x 100. Turns out it's 16 x 16 as stated above.

Now, to the procedure:

1. Follow the steps for Creating the Icon above. (Please read everything on the Dynamic Drive's page after the file has been created. There's code there that you'll need in Step 2 below.) In step 5 above, make sure you upload the favicon.ico file to the Root Directory, not a folder. Then PUBLISH IT. Seems like an important step that would be worth mentioning, doesn't it?

2. Proceed to the steps for Adding the HTML Reference. In step 1, first select the Home/Index page in site builder. (You will add the code described below to the Head Tag on the Index page only. I discovered that it does not need to be added to every page). IMPORTANT: the code shown in step 1 is wrong. Look closely below Step 2 for the words, "View 2 More Comments." Click there and you'll see the corrected code. I don't know if it works. Instead, I used the code provided by Dynamic Drive's favicon generator. It looks like this: I'd suggest trying the D.D. code first.

I really do hope this helps.

If you reply to this post, it's unlikely I'll respond. I hardly ever use this community forum. It's usually faster to find another way to solve the problem.

774 Messages

 • 

184.8K Points

Hi trevpaxton3437, It doesn't matter where you place the code in the head section. If you have other code in the head section, you can either place it at the beginning or the end. Sorry about the confusion on the instructions, I realize the image with the incorrect information is confusing and we'll try to create a new thread that is more clear.

Mike

2 Messages

 • 

150 Points

And the 48 hour wait time? Is this true? I had the code there under the existing google analytics code and saw nothing. Nothing on the preview or published site.

Can you explain why this is?

774 Messages

 • 

184.8K Points

It should not take a full 48 hours, but it can take some time. It just depends on the browser, and version of browser you are using. Not all will immediately call up the favicon file. If it doesn't immediately appear after publishing, somethings you can try to force it to update are; clear your cookies and cache and reload the page, save the page as a bookmark, or in your browser, type out the full url to the favicon file ie. www.yourdomainname/favicon.ico These options will usually force the browser to fetch the file.

Mike

6 Messages

 • 

458 Points

8 years ago

Happy Homestead customer again.

11 Messages

 • 

334 Points

8 years ago

How do you put an image/icon next to your site name so it appears next to the url in the browser as well as next to the website name on a visitors tab for your site?

This reply was created from a merged topic originally titled
Personalized website icon.

120 Messages

 • 

40K Points

Hi Mathew4004,

The icon you're wanting to create is called a favicon, use the instructions above to add one to your site.

Hope this helps, thanks!

Ehsan

7 Messages

 • 

322 Points

To anyone who is having trouble getting their favicon to work, I finally got mine working, and I'd like to share some info. with you. (Despite my requests to three employees for help in these pages, not one responded).

A couple of general notes:

1. These instructions will create a favicon for both the tab and bookmark locations.

2. It took 48 hours for the favicon to appear in the live site and bookmarks. It was visible in preview mode immediately. After you've uploaded and published the favicon.ico file, you can see the time stamp in the File Manager, so you'll know that you can plan on not seeing it on the live site for two days from that point...UNLESS...

2. The live version appeared for me after two things had happened: 48 hours had passed, AND I quit and restarted my browser (Firefox). Maybe the thing would have appeared sooner if I had had restarted Firefox sooner. Give it a try.

3. At a recent event hosted by Intuit, a rep. said that the favicon size should be 100 x 100. Turns out it's 16 x 16 as stated above.

Now, to the procedure:

1. Follow the steps for Creating the Icon above. (Please read everything on the Dynamic Drive's page after the file has been created. There's code there that you'll need in Step 2 below.) In step 5 above, make sure you upload the favicon.ico file to the Root Directory, not a folder. Then PUBLISH IT. Seems like an important step that would be worth mentioning, doesn't it?

2. Proceed to the steps for Adding the HTML Reference. In step 1, first select the Home/Index page in site builder. (You will add the code described below to the Head Tag on the Index page only. I discovered that it does not need to be added to every page). IMPORTANT: the code shown in step 1 is wrong. Look closely below Step 2 for the words, "View 2 More Comments." Click there and you'll see the corrected code. I don't know if it works. Instead, I used the code provided by Dynamic Drive's favicon generator. It looks like this: I'd suggest trying the D.D. code first.

I really do hope this helps.

If you reply to this post, it's unlikely I'll respond. I hardly ever use this community forum. It's usually faster to find another way to solve the problem.

1 Message

 • 

112 Points

8 years ago

How do I Insert our company icon in place of the explorer icon in the tab at the top of the page with our company name on it?

This reply was created from a merged topic originally titled
How can I replace explorer icon with our company icon?.

7 Messages

 • 

322 Points

8 years ago

These directions do not explain which to which page(s) the code must be applied to the Head Tag. Also, the bottom line of code is cut off. Please make corrections so other users can attempt to add favicons. Thank you.

7 Messages

 • 

322 Points

I just noticed the comment that was minimized correcting the code. This code is slightly different from the one provided by Dyamic Drive's favicon generator, though. I just spent 45 minutes on the phone with a support rep who was utterly useless. Can't wait to leave Intuit for a better provider.

7 Messages

 • 

322 Points

8 years ago

To anyone who is having trouble getting their favicon to work, I finally got mine working, and I'd like to share some info. with you. (Despite my requests to three employees for help in these pages, not one responded).

A couple of general notes:

1. These instructions will create a favicon for both the tab and bookmark locations.

2. It took 48 hours for the favicon to appear in the live site and bookmarks. It was visible in preview mode immediately. After you've uploaded and published the favicon.ico file, you can see the time stamp in the File Manager, so you'll know that you can plan on not seeing it on the live site for two days from that point...UNLESS...

2. The live version appeared for me after two things had happened: 48 hours had passed, AND I quit and restarted my browser (Firefox). Maybe the thing would have appeared sooner if I had had restarted Firefox sooner. Give it a try.

3. At a recent event hosted by Intuit, a rep. said that the favicon size should be 100 x 100. Turns out it's 16 x 16 as stated above.

Now, to the procedure:

1. Follow the steps for Creating the Icon above. (Please read everything on the Dynamic Drive's page after the file has been created. There's code there that you'll need in Step 2 below.) In step 5 above, make sure you upload the favicon.ico file to the Root Directory, not a folder. Then PUBLISH IT. Seems like an important step that would be worth mentioning, doesn't it?

2. Proceed to the steps for Adding the HTML Reference. In step 1, first select the Home/Index page in site builder. (You will add the code described below to the Head Tag on the Index page only. I discovered that it does not need to be added to every page). IMPORTANT: the code shown in step 1 is wrong. Look closely below Step 2 for the words, "View 2 More Comments." Click there and you'll see the corrected code. I don't know if it works. Instead, I used the code provided by Dynamic Drive's favicon generator. It looks like this: I'd suggest trying the D.D. code first.

I really do hope this helps.

If you reply to this post, it's unlikely I'll respond. I hardly ever use this community forum. It's usually faster to find another way to solve the problem.