Monday, May 19, 2014

Favicon for GoDaddy Website Builder v7, workaround

After searching for an hour for instructions to add a favicon to my books 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.

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



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


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. (Did I say refresh enough? Oh, there it was one more time). I use Chrome, by the way; this works.

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

Using a gif file instead of an ico file: You can also use a 16x16 gif image. I did this because I wanted to edit my downloaded icon design a little further in GIMP (similar to photoshop but free software). Make sure your transparent parts stay transparent by pasting into a new layer and disabling the background layer before you save. You'll alter the code above by telling it you're using a gif file instead of an ico file: change... type="image/ico" ...to... type="image/gif".


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.

37 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
    Replies
    1. You're welcome, Kirsty. Glad it helped!

      Delete
  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