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

  • 0
  • 41
  • Article
  • Updated 3 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,506 Points 20k badge 2x thumb

Posted 7 years ago

  • 0
  • 41
Photo of Sueanne4523

Sueanne4523

  • 142 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled
How to add a favicon to website?.


I am unable to get my favicon to appear on my website tab. I've followed the directions and tried everything. Any help is greatly appreciated!


Here is the post I've followed:
https://community.homestead.com/homestead/topics/how_can_i_setup_a_favicon_for_when_my_website_is_bo...
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
These are the correct instructions, but you still need to place the following code in the head section of the index page.

(Edited)
Photo of Sueanne4523

Sueanne4523

  • 142 Points 100 badge 2x thumb
Hi Mike,

I've already done that, and it still doesn't show up. I'm not sure what's wrong.

Thanks for your help.
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Hi Sueanne4523,  I  just took another look and you don't have it added to the index page.  I do see it on the"appointment-center" page.

I'll add it for you.

Mike


Photo of Sueanne4523

Sueanne4523

  • 142 Points 100 badge 2x thumb
Hi Mike,

Great, I see it now! Thanks so much! :)
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
You're welcome. Let us know if you need anything else!

Mike
Photo of Tedia3946

Tedia3946

  • 846 Points 500 badge 2x thumb
It appears I'm looking for help yet again, LOL.  I have the favicon.ico uploaded to my site, with the code in the head section.  Works fine in most browsers and my favicon generally appears.  However, it does not appear if you are looking at my site in Chrome.  Any guidance specific to Chrome?  www.gaminolawoffices.com Thanks!
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Hi Tedia3946,

It seems to be working fine.  In Chrome, you'll see the favicon in the tab, in stead of next to the url.



You may want to come up with a different graphic for your favicon that has less detail in it.  Notice how the Homestead logo and Facebook logo are very simple and much easier to see. 

Let me know if you have other questions.

Mike
(Edited)
Photo of junhu8370

junhu8370

  • 80 Points 75 badge 2x thumb

Please help, I uploaded favicon.ico to root, published it in file manager, and added code:

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

to advanced settings of index page. No icon appears. What did I miss?

Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Hello, I see a favicon in Google Chrome.  What browser are you using?

Thanks

Drew
Photo of junhu8370

junhu8370

  • 80 Points 75 badge 2x thumb
IE 11
Photo of junhu8370

junhu8370

  • 80 Points 75 badge 2x thumb
Yes, thanks Drew, I can see it in Firefox and Chrome, but not in IE 11. I tried clearing cache, but no luck. Maybe reboot?
(Edited)
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
I have seen IE  take a while to reflect it.  I am seeing it, so perhaps it is somehow part of the cache.  Give it a day or so to see if you see it.

Drew
Photo of TRAYNITTY4568

TRAYNITTY4568

  • 296 Points 250 badge 2x thumb
This reply was created from a merged topic originally titled
Does anyone know?.


Good afternoon everyone. Does anyone know how to put the logo of your website where it appears when you open a tab on a browser? Thanks in advance ;-)
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Hi TRAYNITTY4568,   You are referring to what is called a "favicon".  Just follow the steps on this thread above. 

Mike 
Photo of Timothy4984

Timothy4984

  • 90 Points 75 badge 2x thumb
I added a favcon a few years ago, but wanted to change it. When I just went through all your steps, I was able to get it when I typed the web address in, and, then only one of our URL's works.
Thoughts?
Photo of Mike F.

Mike F., Alum

  • 184,678 Points 100k badge 2x thumb
Sorry, I'm not quite understanding. Do you mean that the favicon is only showing up on one page?  If so just make sure you have the correct code copied into the head section on each of the pages. 


Also, all you should need to do is upload the new favicon image file using the same file name so that it overrides the old image file, and publish it again. 

Mike 
Photo of Timothy4984

Timothy4984

  • 90 Points 75 badge 2x thumb
Hi Mike. We have two url's with you : bccfnaz.org & beachcitiesnaz.org
For some reason the primary (first url we set up) (BCCFNAZ) didn't change, only the second. The new favicon does show up on all the pages for "beachcitiesnaz" 

Any ideas why it wouldn't take for the first?
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Hi Timothy4984,

Are you still having this issue?  I see the favicon on both urls.

Thanks

Drew
Photo of Timothy4984

Timothy4984

  • 90 Points 75 badge 2x thumb
Drew, after you said that, I checked. I usually use Chrome. In Chrome one is still the old favicon. But, I then opened IE and they are good on there. For some reason on Chrome (on my computer) they're not refreshing.

Thanks,
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Have you tried clearing your browser history?  I see the same in Chrome as well. It looks like the B in your Beach Cities

Drew
Photo of Timothy4984

Timothy4984

  • 90 Points 75 badge 2x thumb
I did. So, after waiting a week. Looks like they're both active for me. 
Thanks!
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Great! Thanks for the follow up.
Photo of Luis3085

Luis3085

  • 80 Points 75 badge 2x thumb
Hi Homestead,

I have been trying to get my favicon working going through all the previous suggestions but its still not popping up. Any help would be awesome.

http://www.projectfactoryfw.com/

Thank you,
Lisandro
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Hi Lisandro,

What browser are you using? I see a favicon in IE 11, Firefox and Chrome.

Drew
Photo of Luis3085

Luis3085

  • 80 Points 75 badge 2x thumb
Drew,
It seems to be working on IE and Firefox, but wont show on my chrome.
Photo of Luis3085

Luis3085

  • 80 Points 75 badge 2x thumb
Drew,

Never mind I see it now. Thank you for your quick response.

Lisandro
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
You're welcome
Photo of Emily5008

Emily5008

  • 936 Points 500 badge 2x thumb
I just added another favicon to one of my Homestead websites. I had created two before, for other sites I have with Homestead, but wanted to add a third. For some unknown reason, it showed up immediately.

Just sharing that with everyone, because the first two took me a while to figure out, and by the time I was ready to create an additional one - years later - I had to come back and read this thread about how to do it. If I recall, the first two took a day or so to show up, hence my excitement when this one "took" right after I created it and uploaded it.

Thank you for all of the help here, as creating an icon for the first time can be a bit daunting. Not only is the advice here helpful, those of you who are "official" from Homestead have been extremely patient and kind to those of us who were ignorant about favicons.
(Edited)
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Hi Emily5008,

I'm glad it worked so easily. Have a great week!

Drew
Photo of Emily5008

Emily5008

  • 936 Points 500 badge 2x thumb
Thank you, Drew!
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
You're welcome
Photo of Louise6777

Louise6777

  • 728 Points 500 badge 2x thumb
This reply was created from a merged topic originally titled Favicon has changed.

Hi Drew I noticed a few days ago that my homestead Build, Make Create your own website site has my Bank favicon instead of the usual Homestead favicon? Very odd.

Thanks,

Louise
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Here's how to add a favicon
Photo of Louise6777

Louise6777

  • 728 Points 500 badge 2x thumb
Thanks Drew!
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
You're welcome
Photo of James0470

James0470

  • 142 Points 100 badge 2x thumb
I'm having the same problem. I created the favicon and saved it to the file manager then added the html as suggested
Photo of William S

William S

  • 18,878 Points 10k badge 2x thumb
Is your favicon file published in the file manager? You will see a green check mark and ok if it is.
Photo of bookministry

bookministry

  • 780 Points 500 badge 2x thumb
This reply was created from a merged topic originally titled Browser Tab Icon.

How do I get an icon that shows up on the browser tab for my website? When I look at the tabs of different websites I have open, they each have icons (Homestead has its little house - "h" encircled; GMail has its red "M"). I just have an icon of a piece of paper with a folded corner. I also notice I don't have anything show up in the Websites Manager page at homestead.com. I used to - but I think I somehow deleted it. Now it's a grayed-out box with "customized design".
Photo of Todd H

Todd H, Social Media Specialist

  • 20,824 Points 20k badge 2x thumb
Hello bookministry,
Please take a look at the article above and see if this helps you out.
Photo of bookministry

bookministry

  • 780 Points 500 badge 2x thumb
I wish the person who merged my question with this "favicon" had actually read my question. I don't want a "favicon" - this has NOTHING to do with people bookmarking 
Photo of believe7700

believe7700

  • 134 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled website icon.

Hello

I am wondering how to change the icon that shows on the my websites tab. It is currently a white piece of paper with the corner bent.

Thank you,
Kari
Photo of bookministry

bookministry

  • 780 Points 500 badge 2x thumb
Yup - that's my question from 3 weeks ago. I guess no one knows.
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
bookministry, You can't change what shows there. The system populates that.
Photo of bookministry

bookministry

  • 780 Points 500 badge 2x thumb
O - great. Actually I think I DID change what shows there. For a long time it showed an acceptable icon (can't remember exactly what - something on my index page). One day when I tried logging in a bunch of "Accept" and "Delete" boxes appeared. Since it didn't look like something I needed, I hit "Delete". After that, my browser tab changed to the empty piece of paper and when I look at my "Website Manager" at Homestead, it shows the empty box with "customized design" where it used to show my index page. Unfortunately, I don't know what I deleted and shouldn't have - and I guess Homestead doesn't either.
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
You're right. I have no idea how you could change that. It typically does populate with your index page. It might on the next refresh.
Photo of bookministry

bookministry

  • 780 Points 500 badge 2x thumb
When's the "next refresh" ? It's been this way for about a year if my recollecter is workin'.
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
It would have happened by now. I'll check with a developer to see if there is something that can be done.
Photo of bookministry

bookministry

  • 780 Points 500 badge 2x thumb
Thanks muchly!
Photo of bookministry

bookministry

  • 780 Points 500 badge 2x thumb
3 months - nothing changed - guess it's not important. I give up.
Photo of Mark5991

Mark5991

  • 114 Points 100 badge 2x thumb
I've tried every piece of advice in this thread to get this thing to work, but now I've given up. What is it that I'm doing wrong here?
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
What browser are you using? I see a purple box with FM in it, using Chrome.
Photo of luis1612

luis1612

  • 94 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled How I can put my web icon on my web tab?.

How I can put my icon on my web tab...Is showing a blank page
Photo of Gregg

Gregg

  • 110 Points 100 badge 2x thumb
Hi I'm hoping someone can help, ive followed the instructions exactly but it doesnt seem to be working for me.
Nick
my page is
www.islandwidebouncenslide.com
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
I see it.

Photo of Lew8568

Lew8568

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled How do I Change my Favicon?.

I want to change my favicon but forgot how to do that. It appears I go to Advanced Settings. I have a new picture picked out but does it have to be saved with a specific file name? basically, how do I swap out favicons?
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
You would make the icon first and then name it the same as the old. Use the file manager to delete the old image and then import and publish the new.
Photo of Kayse8382

Kayse8382

  • 90 Points 75 badge 2x thumb
I did all of this, and mine doesn't seem to be working.  I really wish you guys would integrate this into your software like Wordpress does.  All you do there is upload a regular picture file...  I feel kind of accomplished to have completed these steps, but now that it still doesn't work... Not sure WTD.  
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
Kayse8382, Which site?
Photo of Natasha2513

Natasha2513

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled Website icon.

How do I get my logo to show as website icon when my page is visited? It just says the name of the company in the tab but there's not icon...
Photo of Mary6707

Mary6707

  • 382 Points 250 badge 2x thumb
Hi! graphic designer here... how do I get this code (made for me from a nice guy at homestead)  from file manager of a site built in site builder to the website builder's site where it belongs ...in their address bar?  <link rel="shortcut icon" href="http://test.ipage.com/favicon.ico"; />
Photo of Drew N

Drew N, Alum

  • 262,796 Points 100k badge 2x thumb
I'm not sure which site you are working on. You have added the image to an ipage account, which will work if you use that as the URL in the code above. What site are you working on?
Photo of Nancy3566

Nancy3566

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled How do I add an I.D. image to the screen tab?.

When I go to other web sites there is a small I.D. image on the web site's tab that appears at the top the screen on my computer for that site. How do I add an image so my web site will also have a tab I.D. image?
Photo of MANAIA Design

MANAIA Design

  • 238 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled Dashboard update help please..

I noticed from a recent email that my dashboard looks different and I don't have the ability to add a favicon or other features. I'm using Sitebuilder Plus & here's my example. Thanks http://www.hoomalamalama.com/help.html
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 43,694 Points 20k badge 2x thumb
MANAIA Design, this is because the instructions you were looking at was for a different builder than the one you are using. Here are the instructions for your builder.
Photo of MANAIA Design

MANAIA Design

  • 238 Points 100 badge 2x thumb
PS: How do I get that builder?
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 43,694 Points 20k badge 2x thumb
You would add another site in your account and it will automatically be in the new builder.
Photo of Tom3248

Tom3248

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled How do I add a logo to the tab of the browser?.

I want to add a logo to the tab section of the browser. Like the spot next to where the website is. For example, Facebook has the little F symbol next to Facebook, or Google has a little G on the left corner of the tab. I can't figure out how to add this in.
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 43,694 Points 20k badge 2x thumb
Hey Tom3248

If you scroll up, you'll see the instructions to add a favicon.
Photo of Danni2136

Danni2136

  • 926 Points 500 badge 2x thumb
Hello. Can someone please see why my favicon won't show? I do see it when I put my url: https://www.majesticventcovers.com/favicon.ico but it's not showing in Chrome or IE. 
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 43,694 Points 20k badge 2x thumb
Hey Danni
Your favicon is working on my end. What do you see?

Photo of Danni2136

Danni2136

  • 926 Points 500 badge 2x thumb
Hi again Elyzabeth!  I just see the default icon. I'll try clearing my cache and history and reloading. I'm glad it's working. Do you see my site aligned to the right like that?! That doesn't look good. I thought it was centered. 
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 43,694 Points 20k badge 2x thumb
Oh, no not at all! It is just a part of a screen grab. I see your whole site. I just posted a cut off version!
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 43,694 Points 20k badge 2x thumb
I have a very wide screen so entire screenshots are huge.
Photo of Danni2136

Danni2136

  • 926 Points 500 badge 2x thumb
Oh okay! Thanks for all the help and quick replies as usual! 
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 43,694 Points 20k badge 2x thumb
You're welcome! Glad I'm able to help!
Photo of DCoFair

DCoFair

  • 200 Points 100 badge 2x thumb
I know this is a really old thread, but I'm having a hard time getting our Fav icon to show up. I followed all the steps and it's not working for me. Not sure what I missed
Photo of Elyzabeth

Elyzabeth , Official Rep

  • 43,694 Points 20k badge 2x thumb
Hello,

Which site are you trying to set a Favicon up on?