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:

Login to your website account.
Click Websites Manager in the left navigation menu.
Click Edit Site.
At the top, click on your domain name or site name. Then, click View File Manager.
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.

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" />
Publish your website to have the favicon live.

Responses

laurie4684

5 Messages

•

204 Points

12 years ago

I want to place my logo on the tab portion at the top of the web page. Every webpage I visit has their own logo on the tab. How do I do this?

This reply was created from a merged topic originally titled
how do I get my logo in the tab at the top of the webpage?.

melodie6007

8 Messages

•

342 Points

Hi Laurie4684. What you're describing is a favicon.

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.

12 years ago

laurie4684

5 Messages

•

204 Points

Thank you! I hope it works~

12 years ago

michael8925

2 Messages

•

132 Points

12 years ago

This reply was created from a merged topic originally titled
how to add your company logo on the internet tab.

ehs

120 Messages

•

40K Points

Hi michael8925,

Be sure to add your domain name (location of your .ico file will look something like: mydomain.com/logo.fico) in the html code you plaste in the head section.

Let me know if you need further assistance, thanks!

Ehsan

12 years ago

lolihanna

2 Messages

•

154 Points

12 years ago

Does Intuit Website support FTP? if so where do I get the info to list to access the ftp?

Also would really like to upload a Favicon (little bookmark icon on a tab). How do I do that? Thanks!

This reply was created from a merged topic originally titled
FTP support & Favicon.

ehs

120 Messages

•

40K Points

Hi Lolihanna,

You can use the instructions above for help with adding a 'Favicon' (little icon) for your site.

We do not support the use of FTP anymore, if you need to upload files, you can do so via your file manager.

*there is a 200MB upload limit

Hope this info helps, thanks!

Ehsan

12 years ago

brian6168

7 Messages

•

564 Points

12 years ago

What is the name of the little image box at the left of the page title on the browser tab? Some show an image, for example the google page, shows a small white lower case 'g' on a blue background. Homestead has the white house outline on red. Other pages have a dotted square outline where the image would go...

How do I insert an image in my webpage tabs?
Thanks,
Brian

This reply was created from a merged topic originally titled
Image box in page tab title?.

aubrey_t

80 Messages

•

15.4K Points

Hi Brian -

This thread should help you out! What you're looking for is called a 'favicon'.

Thanks,
Aubrey

12 years ago

dexter

3 Messages

•

142 Points

12 years ago

I would like to add a favicon to my website, how to add via the new templates?

This reply was created from a merged topic originally titled
how to add a favicon.

bronbron10243309

1 Message

•

122 Points

12 years ago

This reply was created from a merged topic originally titled
How to add an favicon to my website? Or what's the code?.

ehs

120 Messages

•

40K Points

be sure to add the url for the .ico file you create (generally your domain.com/file name.ico.

Let me know if you need further assistance, thanks.

Ehsan

12 years ago

dexter

3 Messages

•

142 Points

12 years ago

@Ehsan I added my .ico it was working for all browsers, now it does not work for safari why?

jill5303

1 Message

•

134 Points

12 years ago

Hello, I have reviewed all the tips and guidance but having no luck getting my little favicon on the url bar. It should be a pig driving a truck but instead there is a little blob.
Please help and thank you!
Jill

Note: This topic was created from a reply on the Favicon Troubleshooting topic.

This reply was created from a merged topic originally titled
Favicon.

ehs

120 Messages

•

40K Points

Hi Jill5303,

Looks like the favicon.ico file is not published and you also need to add the html code to the head section of your page.

You can copy/paste the html code from DynamicDrive - Be sure to edit the url portion and add the location of your domain

(which is http:// your domain name .com/files/favicon.ico)
*without the spaces

-----
To publish the favicon file, click on your site name at the top > View File Manager > Files (folder) > Right Click, Publish (Favicon.ico)

I hope this helps clarify, please let me know if you have any other questions.

Thanks,
Ehsan

12 years ago

mycoraladdiction2975

4 Messages

•

160 Points

11 years ago

I tried the code several times but can not get it to work properly. I am having some trouble reading the code as in in between the letter h and N, I do not know if that is just a space or if it is a _ Also, the letter after N, can't tell if it is a q or g

ehs

120 Messages

•

40K Points

Hi mycoraladdiction2975,

I've replied to your other comment as well -

You need to edit the html code under Page Settings > Advanced section and add the url for the favicon file:

(you just need to add ur domain name before the slash)

Also, you need to publish your favicon file. Log into sitebuilder, click on your site name at the top > View File Manager

Locate the favicon.ico file and Right Click > Publish

Hope this helps clarify, let me know if you need further assistance.

Thanks,
Ehsan

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

11 years ago

mycoraladdiction2975

4 Messages

•

160 Points

Thank you, it is working under preview now and should be working for regular site in a bit. Thanks again

11 years ago

ehs

120 Messages

•

40K Points

Hi mycoraladdiction2975,

You're welcome, glad it's working!

Ehsan

11 years ago

bob_king

63 Messages

•

1.4K Points

Every image I put through the FavIcon Generator comes out in terrible low resolution. I've tried jpg and png images. They all look terrible, and nothing like other icons in my bookmarks. I've tried converting jpg to bmp, but FavIcon doesn't recognize the resulting bmp images. What can I do?

10 years ago

drew_n

1.4K Messages

•

262.9K Points

Unfortunately, an ico for a favicon get generated at only 16 by 16 pixels. This is a low resolution. An image that is square to start with will do better as the proportions will stay intact rather than having the image forced into unnatural proportions.

10 years ago

delsil

5 Messages

•

214 Points

11 years ago

This reply was created from a merged topic originally titled
Browser tab icon.

How can I add an icon of my logo on the browser tabs next to my company name on that tab? I have the picture saved as an .ico file or favicon but not sure where to add the html for it. Any suggestions?

angeli7056

1 Message

•

110 Points

11 years ago

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

carolyn0930

5 Messages

•

244 Points

11 years ago

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?

mike_f

782 Messages

•

184.8K Points

11 years ago

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

yvonne4635

2 Messages

•

142 Points

11 years ago

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?

mike_f

782 Messages

•

184.8K Points

If you have a problem doing this on your own, you may be interested in this: https://community.homestead.com/homestead/topics/can_homestead_create_a_favicon_for_my_website_i_would_like_to_create_one_but_dont_know_how

11 years ago

doordanglesbytawni9401

4 Messages

•

142 Points

11 years ago

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

doordanglesbytawni9401

4 Messages

•

142 Points

Ok, finally got it to publish so it now says OK, but it still is not appearing.

11 years ago

mike_f

782 Messages

•

184.8K Points

Make sure the html code in the head section references the .ico file name correctly and clear your cache & cookies, and restart your browser.

11 years ago

doordanglesbytawni9401

4 Messages

•

142 Points

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.

11 years ago

mike_f

782 Messages

•

184.8K Points

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.

11 years ago

doordanglesbytawni9401

4 Messages

•

142 Points

Ok I have it showing up on the tab now....thanks! Still doesn't show on the address bar or when bookmarked, though.

11 years ago

homestead_faq

Sitebuilder Plus: Favicon

laurie4684

melodie6007

laurie4684

michael8925

ehs

lolihanna

ehs

brian6168

aubrey_t

dexter

bronbron10243309

ehs

dexter

jill5303

ehs

mycoraladdiction2975

ehs

mycoraladdiction2975

ehs

bob_king

drew_n

delsil

angeli7056

carolyn0930

mike_f

yvonne4635

mike_f

doordanglesbytawni9401

doordanglesbytawni9401

mike_f

doordanglesbytawni9401

mike_f

doordanglesbytawni9401

Related Conversations