Favicon for GoDaddy Website Builder v7, workaround

After searching for an hour for instructions to add a favicon to my website with Godaddy's Website Builder version 7, I discovered a long list of complaints that favicons are not supported in v7.

Here is a workaround that will get you two out of three. My favicon shows up in the browser tab and on the favorites bar but not in the address bar. See it here.

We now have two ways of getting this done:

USE AN ICON HOSTING SITE AND THE CODE THEY PROVIDE
**or**
STASH YOUR ICON ON YOUR OWN SITE


If you want to USE AN ICON HOSTING SITE

1. Design your icon and download it. I used http://www.favicon.cc/ . Or use one of the design tools on iconj.com

2. Upload to an icon hosting site like iconj.com.

3. Copy the code provided by the icon hosting site (the code under "Host it at IconJ.com direct link)

Skip to step 9 below to place the code in Godaddy's Website Builder.

(Thanks to Eucrest's comment below for the icon hosting idea.
I just tried this on my website, see it here.
This really does seem the easiest way. If anyone discovers
any drawbacks, please comment.)



If you want to STASH YOUR FAVICON ON YOUR OWN SITE:

1. Design your icon and download it. I used http://www.favicon.cc/

2. Insert the image on one of your pages, just like adding any other image on Website Builder. Or upload to a host site like picasa or photobucket. It's so tiny, you could stick it in a bottom corner of any page on your site and it would probably go unnoticed; that's what I did.

3. Save and publish (if you added it to your web site).

4. Open up notepad or wordpad and paste this code there (we'll come back to it in a few seconds):


link rel="icon"
type="image/ico"
href="http://example.com/myicon.ico"



(Thanks to Michael's comment below,
we now have a much simpler code to work with.
Thank you Michael!)

5. In your browser, go to your site to the page where your favicon is stashed (not within the website builder; just visit your site). Or, if you uploaded to a host site, go there.

6. Right click on the favicon image, click "Copy image URL"

7. Go back to the code you pasted in notepad. In the line that says href="http://example.com/myicon.png" , highlight the text between the quotations marks, right click and click paste. A long line of url text will replace the previous url. Make sure you still have the quotation marks.

8. Now copy your entire new code.

9. Log back into website builder.

10. Click the "manage site" button (just to the right of the green Publish button), choose "site settings", click the "general settings" tab.

11. Paste the code into an empty line in the black box under the HEAD section.

12. Click OK, save, publish.

13. Go to your website, just the regular site, not within godaddy web builder. Tap F5 on your keyboard to refresh the page that your browser is storing. Your favicon should show up. Mine was a little slow, give it a second. You may have to refresh each of your pages so your browser will ditch the old version and show the new version. New visitors to your site will see the icon immediately.


STILL NOT SHOWING UP? You may need to empty your browser's cache. This site tells how for all the different browser types (chrome, firefox, explorer, etc.) RefreshYourCache.com


~~~~~~


Wow, I never noticed until now that we can change our blogger favicon from the orange and white B. It's a widget on the Layout page in the upper left corner titled (drum roll please)... Favicon.


Comments

  1. Thank you so much! I have just spent all day trying to figure out how to put my favicon on my site.... Success has been had! judithmusic.com

    ReplyDelete
  2. It doesn't show up in firefox or chrome, only IE. have any idea why?

    ReplyDelete
    Replies
    1. It'll show up in Chrome, just visit your page and hit the F5 key to "refresh". Your browser is showing you what it's already stored for that page but the F5 key will store the new info. I don't know about firefox.

      Delete
  3. does anyone know why it works is IE but not in chrome?
    you can see here: www.fiso.com.au

    thanks

    ReplyDelete
    Replies
    1. CHROME: When you're finished, visit your page and hit F5 to refresh. Your browser is storing your previous version and will not show you your updated version until you refresh. New visitors to your page will see the new favicon but you will not unless you hit F5 to refresh.

      Delete
    2. I checked the website you linked to. I'm not sure how you managed it but the favicon on that site is the the little town water tower favicon from the site I linked to in the blog post. Just FYI.

      Delete
  4. yeah you are correct, it seems that my w8.1 sometimes goes back to restore point where the favbicon is not there ? but now i can see it (: so thanks so much for your post

    ReplyDelete
  5. This worked perfectly. The beauty of this solution is in its simplicity. Thanks!

    ReplyDelete
    Replies
    1. I'm glad it helped. Thanks for letting me know!

      Delete
  6. Great --now I have the Cisco Texas favicon on my website tab. What am I doing wrong?????

    ReplyDelete
    Replies
    1. Laura - my website code was mixed in (too much back and forth while typing up the instructions). Go back over the steps with the new code.

      Delete
    2. Cheryl - Thanks for the update. I haven't been able to update yet with the new code, but I appreciate your feedback on this!

      Delete
  7. Thank you, you've been a great help.

    ReplyDelete
  8. Your written instruction is spot on, but you are instructing folks to copy too much, and also irrelevant code... All that is needed is the last link, nothing before or after...

    link rel="icon"
    type="image/ico"
    href="http://example.com/myicon.png"

    Remember the quotations <....>



    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. too many typos, I am trying to appear smart...

      Delete
  10. First code link looks like it will take you to an image @ wsimg.com, second link gets you nowhere... Anybody copying the entire thing will end up with whatever the image is @ wsimg.cm, as the website builder will only recognize the first link and disregard everything else...

    ReplyDelete
    Replies
    1. Thanks Michael. I took out the wsimg.com parts - I had done a little too much back and forth, copy and paste, trying to write this while I walked through the steps. Also, I'll try the simplified code you suggested in your other comment and if that goes well, I'll update this post. Thanks a bunch!

      Delete
    2. Worked great! Post updated. Thanks again!

      Delete
  11. Thanks so much! Worked like a charm!

    ReplyDelete
  12. should the code take up 3 lines or should it all be on one line? Everytime I hit ok, the code goes away - why doesnt it save???

    ReplyDelete
    Replies
    1. i've got the same i did everything as followed, i used a host didn't work then adding the image to my website still not showing anything.. i've tried chrome, firefox, IE, safari, .. and still nothing.
      hope someone can help me out on this one

      Delete
    2. My code wasn't visible after I pasted and saved but the changes still happened. And it is 3 lines of code.

      Delete
  13. Haha! This is so cool! I don't know anything about HTML and I was able to do this. Thanks so very much.

    ReplyDelete
    Replies
    1. Yay! I was starting to worry because a few others said they had problems. Thanks for commenting!

      Delete
  14. You! Lady with a chainsaw ROCK!!!!!!!!!

    ReplyDelete
  15. Hey i put this code into the HEAD part ->

    link rel="icon"
    type="image/ico"
    href="http://nebula.wsimg.com/f4ddfb8997864164a765f9b4c2557909?AccessKeyId=F453BD7A20DC1D47E232&disposition=0&alloworigin=1"

    but it still isn't showing up. What am i doing wrong?

    ReplyDelete
    Replies
    1. Sounds like you need to empty your browser's cache so the changes will show up. This site tells you how for all the different types of browsers (chrome, firefox, explorer, etc.) http://www.refreshyourcache.com/en/home/

      Let me know if that does it for you. I'll add that to my post.

      Delete
    2. Sorry, It still didn't work.

      Delete
    3. Well rats. Those are the only things I know to try.

      Delete
  16. The same thing happens to me @ athomeang.com - I pasted
    link rel="icon"
    type="image/ico"
    href="http://s30.postimg.org/v09y3yhr1/favicon_1_ico.png?noCache=1416995736"
    into the header box, the published and nothing :/

    Am I doing something wrong?

    ReplyDelete
    Replies
    1. Try changing this line from
      type="image/ico"
      to
      type="image/png"
      and see if that fixes it. Please let me know :)

      Delete
  17. Hi! I put the code into the HEAD part and doesnt work. When I go again to the configuration site in the HEAD part, this is clean... that's correct? Should not appear so put before?
    Thanks!

    ReplyDelete
    Replies
    1. I missed the quotation <---> !!!!!!!
      You don't mentioned that.. or I didnt see...


      Delete
    2. It's there, last line of step 7... "Make sure you still have the quotation marks."
      Sounds like you figured it out so hopefully yours is working now.

      Delete
  18. I could not get the above instructions to work for the life of me!

    Finally got it. What worked for me was:

    1) Upload .ico image to iconj.com/favicon_hosting.php

    2) Copy the "Host It at IconJ.com: (Direct Link)" code that they provide

    3) Go into Websitebuilder, Site settings, site-wide code, and paste under HEAD

    ReplyDelete
    Replies
    1. An icon hosting site, how handy! I never even thought to look for such a thing. Thanks EET!

      Delete
    2. I've added your suggestion to the blog post, referring to you as Eucrest. Thanks again!

      Delete
  19. Great thread. Many thanks to all.

    ReplyDelete
  20. Many thanks, just a wee addition to Step 11 =
    10. Click the “Edit Site”

    11. Click the “Manage Site" button (just to the right of the green Publish button),
    choose "site settings", click the last choice "Site-wide Code”

    12. In the first black box section, paste the code into an empty line in the black box under the “HEAD” section. Click OK

    ReplyDelete

Post a Comment

Popular Posts