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

  • 0
  • 42
  • Article
  • Updated 5 months ago
  • (Edited)
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.

    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.
Photo of Homestead FAQ

Homestead FAQ, Employee

  • 42,806 Points 20k badge 2x thumb

Posted 7 years ago

  • 0
  • 42
Photo of Angeli7056

Angeli7056

  • 60 Points
here's a step by step. first your icon should be no more than 16 x 16, if it's over you won't be able to load it. save your file as .ico, to do this, click save as, and save it as favicon.ico. if your file is jpeg or whatever, just change the extension.

- login and edit your website
- on the upper right hand, look for the www.nameofyoursite.com
- click on that, go to "VIEW FILE MANAGER"
- click IMPORT and it should save under "FILE" (yellow folder)
- click the publish button on the FILE MANAGER"
- on the right hand of the file, there should be a check mark and "OK"
- just to be safe, hit REFRESH BUTTON on the FILE MANAGER
- choose your file and look at the lower left corner and there should be a button called "PREVIEW" & info about your file. click on that and look at the top your browser because it should specify the name of your file example, favicon.ico and the size of it, like 16 x 16.
- close your file manager
- go to page settings and click advance settings
- on the head tag copy below:

***important: change the file name to however you saved your file. the reason why people are having a hard time, because there's no slash</> at the end of the bracket in the SITEBUILDER help section.

-save and publish
-remove cache on your browser and cookies.

GO TO YOUR WEBSITE. Voila your FAVICON should be there!

Angeli
www.incognitochef.com
Photo of Carolyn0930

Carolyn0930

  • 194 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
inserting an icon into the address bar.


How do I insert an icon.png into the address bar?
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
For anyone who does not have the time or desire to do this on your own, Homestead now offers this as a paid service. Here are more details. https://community.homestead.com/homes...
Photo of YVONNE4635

YVONNE4635

  • 92 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled
Adding a favicon file path name into Site builder header text..


I am trying to embed the file path name for a favicon icon, into my Sitebuilder header. I have uploaded the file yvonnepotter.ico into my file manager. The plan is that the favicon will appear on the left side of my web pages tabs for branding. Does anyone know what that path name is or how to do this with Site builder?
Chris,
Can you please help me? I think I have done everything correctly, but still can't get it to appear in the address bar or the tab. It still says PUBLISH and not OK in my files manager, but when I right click it doesn't give me PUBLISH as an option. I'm working on a Mac if that makes a difference. Thanks!
Tawni
www.doordanglesbytawni.com
Ok, finally got it to publish so it now says OK, but it still is not appearing.
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Make sure the html code in the head section references the .ico file name correctly and clear your cache & cookies, and restart your browser.
I did those things and still can't get it to work. :( I'm thinking this isn't for me...lol. Homestead had changed a lot since I had 2 other websites years ago.
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Looks like the wrong file path in the head section.
You currently have "href="/files/favicon.ico"

Try changing it to "href="www.doordanglesbytawni.com/favicon.ico"

Then republish the home page, clear your cache and cookies again.
Ok I have it showing up on the tab now....thanks! Still doesn't show on the address bar or when bookmarked, though.
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
For some reason it can take a little time. You can try to close & reopen the browsers to see if you can force it to update, but if you see it in the tab, it should be working.
Photo of mmueller3063

mmueller3063

  • 218 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
How do I display an icon in the web browser tab just like Homestead does?.


How do I display an icon or logo in the web browser tab just like Homestead and other companies do?
Photo of michelle0371

michelle0371

  • 116 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
Can someone from Homestead please give me the steps required to having Homestead create a favicon for me?.


I would like to add a favicon (image in the tab of the browser) for my company's homstead/intuit account. Although I see the link to what the requirements are for this (it's $50 to create, etc.) I don't see an actual link to have it made or to even upload it. All I want is our company's sun in the browser icon. Can someone from Homestead please give me a step by step process so that I can do this?

I also saw online people resizing their images to be .ico and 16x16 pixels - is this necessary to do or will homestead do it for us - since we're already paying $50 to have it created.....
Photo of shaun

shaun

  • 132 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
How to get logo on tab link the small one?.


at the topic it says homestead and the little house how do i get a logo like that on my site not the house but a logo
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
I see you uploaded a favicon image file, but you have not added the code to the head section yet.
Photo of david2953

david2953

  • 6,966 Points 5k badge 2x thumb
Mike...Mine is working fine with Explore and FireFox but not with Chrome...any suggestions?

www.csthousing.com
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Clear your cookies and cache, then test it again. It should start working but for some reason I've seen cases where it takes a while. if it works on the other two browsers it should also work in Chrome.
Photo of iheartgo5464

iheartgo5464

  • 100 Points 100 badge 2x thumb
use one of those in the header html and replace with your 16px by 16px image link... easy
Photo of Rochelle6860

Rochelle6860

  • 124 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
How do I add a flavicon to my site.


where do I add a flavicon?
Photo of iheartgo5464

iheartgo5464

  • 100 Points 100 badge 2x thumb
'header' under page settings
Photo of Drew N

Drew N, Alum

  • 262,816 Points 100k badge 2x thumb
In Sitebuilder, hit Page settings, then Advanced. There is a box that says header.
Photo of Rod1267

Rod1267

  • 102 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
How do I create a icon for my website so when people shortcut my website it displays my icon?.
Photo of Kimberly4507

Kimberly4507

  • 156 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
How can I assign an icon to webpage so that is shows when webpage entered into URL?.


I would like to assign our logo to our webpage so that when people type in my webpage they see the icon in the URL with the page address instead of a blank sheet of paper.
Photo of Angela

Angela

  • 144 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
How do I replace the little homestead image in the address bar?.


How do I replace the little homestead image in the address bar?
Photo of Cascadecopia4096

Cascadecopia4096

  • 122 Points 100 badge 2x thumb
I have followed all these instructions exactly, and It still has not worked. Please help
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
You need to edit the code in the head section for the correct file name of your .co file. Also, make sure the .ico file is published from within the File Manager.

If this post helps, please give a "Star" and complete this survey to rate me.

Thanks!

Mike
Photo of Cascadecopia4096

Cascadecopia4096

  • 122 Points 100 badge 2x thumb
Well now it shows up in the preview, but not in the published site. Progress though! Progress!
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Sometimes the live site takes a little time. Check it in a few hours or tomorrow. Also you can try clearing your cookies and cache.
Photo of Angela

Angela

  • 144 Points 100 badge 2x thumb
I did it and it works when I open http://privateaudio.homestead.com/ which was my original name when I was building the site, but it doesn't work for http://www.myprivateaudio.com/ which is the correct domain name. What should I do?

Also, I have the google verification code in the headers from when I had google manager. Should I put the flavicon code in there to replace the google code or after it or before it?
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
You don't need to remove the Google code and it won't matter if you place it before or after. Either place is fine.
Photo of Angela

Angela

  • 144 Points 100 badge 2x thumb
Thank you so much! I love it!
Photo of Angela

Angela

  • 144 Points 100 badge 2x thumb
Nevermind. It seems to be working now . Thank you
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
You're welcome
Photo of Carrie0732

Carrie0732

  • 308 Points 250 badge 2x thumb
I can't seem to get mine to show up. I added the ico file to my files and the html. Published and waited. Still not showing up in firefox or IE.
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Carrie0732, What is the site name you are working on and we'll take a look at it?

Mike
Photo of Carrie0732

Carrie0732

  • 308 Points 250 badge 2x thumb
carriehasson76.homestead.com It will be changed once the site is finished, so I hope if it eventually works that doesn't effect it. I tried doing all the tips above, but still nothing.

P.S. I hate that I can't log into Homestead on my tablet or phone!
Photo of Carrie0732

Carrie0732

  • 308 Points 250 badge 2x thumb
And I would like to change the ico file, but I can't figure out how to delete it. For some reason I don't see the file manager. That could be where my issue is.
Photo of Carrie0732

Carrie0732

  • 308 Points 250 badge 2x thumb
Never mind the last question. I found it.
Photo of Mike F.

Mike F., Alum

  • 184,678 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)
Photo of Barbara E.9126

Barbara E.9126

  • 152 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
Add favicon to my website address.


I would like to create a favicon for my webpage address. I've created my photo to 16 x 16 pxls, imported it into my file manager and now would like to know what to do to add it to my website address.
Photo of David9001

David9001

  • 82 Points 75 badge 2x thumb
Photo of Barbara E.9126

Barbara E.9126

  • 152 Points 100 badge 2x thumb
David9001, I've done as you said but now the address icon is an empty box. Thank you
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Barbara E.9126, One thing to double check is that the .ico file is published from within the File Manager. If the image is published, but you are still having problems, let us know which site you are working on and we'll take a look at it for you.

Mike
Photo of Kayse8382

Kayse8382

  • 90 Points 75 badge 2x thumb
It would be awesome if Homestead would design a program element to make this more user friendly. I want to add an icon to each page of my website as it appears in "tabs" (homestead has the "h"/house icon in this position of their own website). Am I missing something? Thanks!
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
I agree it would be nice if the Sitebuiilder had an automated way of doing this. It would be a nice enhancement for the future. As of now, the only way is to manually perform the steps above.

Mike
Photo of Barbara E.9126

Barbara E.9126

  • 152 Points 100 badge 2x thumb
Thank you Mike F. I published the .ico file from within the File Manager; saved the page, hit "publish" and hit "all pages". It worked. Thank you so much
Photo of Barbara E.9126

Barbara E.9126

  • 152 Points 100 badge 2x thumb
I might add, this process placed my icon on the web page tab. Wish we could have the icon next to the address on our web page too. so that we can drag it onto our desktops. AND now wondering if there is an easy process for putting the Pnterest button on the webpage too.
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Barbara E.9126 , Depending on which browser you are using, the favicon may also show up next to the URL also.

As far as adding a Pinterest button to your site, this page may help. https://community.homestead.com/homes...
Photo of Barbara E.9126

Barbara E.9126

  • 152 Points 100 badge 2x thumb
yes, IE has both but Foxfire has only on the tab. Thanks for the information regarding Pinterest.
Photo of trevpaxton3437

trevpaxton3437

  • 100 Points 100 badge 2x thumb
Me again! I've tried everything you've suggest and here I am... a month later and it's still not working! What gives?? For something so simple I can't seem to understand why it takes so much to get to work?

Can someone PLEASE take a look from your side and tell me what the heck I am doing wrong??
Photo of Drew N

Drew N, Alum

  • 262,816 Points 100k badge 2x thumb
You never published the ico file. I have done so for you. It should be working shortly.

Drew
Photo of Paul1605

Paul1605

  • 82 Points 75 badge 2x thumb
I followed the instructions but my favicon still doesn't show.
What did I do wrong?
Photo of Drew N

Drew N, Alum

  • 262,816 Points 100k badge 2x thumb
You just needed to publish the ico file.  It might take a little while to display.

Drew
Photo of Paul1605

Paul1605

  • 82 Points 75 badge 2x thumb
thanks Drew,
is there a shortcut to make it work on every page?
Photo of Drew N

Drew N, Alum

  • 262,816 Points 100k badge 2x thumb
Unfortunately not.  You just have to place the code on each page.  The path will be the same though, so you don't have to upload the image.

Drew
Photo of Paul1605

Paul1605

  • 82 Points 75 badge 2x thumb
thanks
Photo of Kayse8382

Kayse8382

  • 90 Points 75 badge 2x thumb
How does one set up an ico file?  All my image files are jpg.  I don't have some kind of advanced editing software.  It would be nice if Homestead picked several of our images already uploaded and gave us options to set this up automatically.  (I believe Wix does this--very helpful for those of us who don't have a lot of techy experience.) Thanks.
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Hi Kayse8382,   At the top of this page click the link for the "official" response and it has step by step instructions and a link to a site that actually generates the .ico file for you.

Let me know if you get stuck.

Mike


Photo of Debra6357

Debra6357

  • 172 Points 100 badge 2x thumb
Did I misunderstand something...does the code needs to be on every page - not just on the Index page as previously stated? Wow...only had to add/upload my .ico file to one place on the website I manage from WordPress and we don't pay a monthly subscription for that site. Seems like there's some automation Homestead is missing out on, not sure.
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Debra6357,

Most people just add the code to the index page since that is the page most frequently bookmarked, but you can add it to all pages if you wish. As far as the .ico file, you only need to upload it to the File Manager once.
Photo of Debra6357

Debra6357

  • 172 Points 100 badge 2x thumb
Okay, but I'm asking if the favicon will show up on all pages when a client is browsing the site, or are you saying it will only be displayed on the Homestead page where the code is added? In my Wordpress acct I added it once and it shows up on every page. It hasn't been 24 hours since I've added the favicon to the Homestead site so I'm not sure - I so see it active on the Index page and didn't know if it needed time to update on the other pages...sounds like its an every page process :-(
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
It will only display on the page where the code is added. You can just do a simple copy and paste though so unless you have a very large site it will be a very quick process.
Photo of Debra6357

Debra6357

  • 172 Points 100 badge 2x thumb
I understand it's a simple copy and paste action but I have 22 pages - was just hoping there was a simpler solution but thanks.