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:
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.
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"
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.
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.
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!)
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.
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
ReplyDeleteYour silhouette! How cool!
DeleteIt doesn't show up in firefox or chrome, only IE. have any idea why?
ReplyDeleteIt'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.
Deletedoes anyone know why it works is IE but not in chrome?
ReplyDeleteyou can see here: www.fiso.com.au
thanks
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.
DeleteI 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.
Deleteyeah 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
ReplyDeleteI'm glad it worked out!
DeleteThis worked perfectly. The beauty of this solution is in its simplicity. Thanks!
ReplyDeleteI'm glad it helped. Thanks for letting me know!
DeleteGreat --now I have the Cisco Texas favicon on my website tab. What am I doing wrong?????
ReplyDeleteLaura - 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.
DeleteCheryl - Thanks for the update. I haven't been able to update yet with the new code, but I appreciate your feedback on this!
DeleteThank you, you've been a great help.
ReplyDeleteYou're welcome, Kirsty. Glad it helped!
DeleteYour 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...
ReplyDeletelink rel="icon"
type="image/ico"
href="http://example.com/myicon.png"
Remember the quotations <....>
This comment has been removed by the author.
ReplyDeletetoo many typos, I am trying to appear smart...
DeleteFirst 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...
ReplyDeleteThanks 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!
DeleteWorked great! Post updated. Thanks again!
DeleteThanks so much! Worked like a charm!
ReplyDeleteAwesome!
Deleteshould 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???
ReplyDeletei'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.
Deletehope someone can help me out on this one
My code wasn't visible after I pasted and saved but the changes still happened. And it is 3 lines of code.
DeleteHaha! This is so cool! I don't know anything about HTML and I was able to do this. Thanks so very much.
ReplyDeleteYay! I was starting to worry because a few others said they had problems. Thanks for commenting!
DeleteYou! Lady with a chainsaw ROCK!!!!!!!!!
ReplyDeleteWoop woop!!
DeleteHey i put this code into the HEAD part ->
ReplyDeletelink 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?
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/
DeleteLet me know if that does it for you. I'll add that to my post.
Sorry, It still didn't work.
DeleteWell rats. Those are the only things I know to try.
DeleteThe same thing happens to me @ athomeang.com - I pasted
ReplyDeletelink 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?
Try changing this line from
Deletetype="image/ico"
to
type="image/png"
and see if that fixes it. Please let me know :)
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?
ReplyDeleteThanks!
I missed the quotation <---> !!!!!!!
DeleteYou don't mentioned that.. or I didnt see...
It's there, last line of step 7... "Make sure you still have the quotation marks."
DeleteSounds like you figured it out so hopefully yours is working now.
I could not get the above instructions to work for the life of me!
ReplyDeleteFinally 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
An icon hosting site, how handy! I never even thought to look for such a thing. Thanks EET!
DeleteI've added your suggestion to the blog post, referring to you as Eucrest. Thanks again!
DeleteThank you my dude
ReplyDeleteGreat thread. Many thanks to all.
ReplyDeleteMany thanks, just a wee addition to Step 11 =
ReplyDelete10. 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