Monday, May 19, 2014

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.