Create a cross browser favicon (logo in the browser tab and address bar) in 8 simple steps... A Honey Bear Playhomes Tip...

  • Idea
  • Updated 2 years ago
While the site builder does have a favicon (logo in the browser) generator built into the side bar it does not create a cross browser favicon.

To make one that is cross browser compatible simply;

1) Go to http://tools.dynamicdrive.com/favicon/
2) Browse your computer for the image that you want as your favicon
3) Click the "Create Icon" button
4) Then after it generates your favicon click the "Download favicon" button
5) Save it to your computer
6) Upload it to your file manager
7) Take the following code and place it in an HTML widget

<link rel="shortcut icon" href="resources/favicon.ico">

8) Update your site to view

Happy site building
Ed

You can find me with my head in the honey pot here..

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)

(Oh by the way don't forget to remove the favicon in your sidebar ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes

Posted 6 years ago

  • 7
Photo of Vlad The Great

Vlad The Great

  • 7 Posts
  • 0 Reply Likes
Thank you very much. Your site looks awesome (is that mostly javascript?).

TIP: Yola users please make sure that in page properties under fav icon you have NO image uploaded or this html code won't work. Good luck!
http://www.SportsTimeZ.com
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 305 Reply Likes
Hi, Ed's site has a lot of Flash on it. But I think JavaScript runs the flash script so I think it is mostly JavaScript.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
wow I feel silly that you have to reply to Vlad's post 10 months later for me Nathan... Thank's LOL
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 305 Reply Likes
Haha. Your welcome.
Photo of

  • 286 Posts
  • 25 Reply Likes
Thanks, Ed
Photo of SilverXS

SilverX

  • 492 Posts
  • 38 Reply Likes
adding these two codes (you already wrote here) will say EVERY browser,script , application,.. Everything that 'this is the icon of this web site'

this icon works even in IE , Desktop Shortcuts , Feeds , Facebook Links , Twitter , Email links , etc , etc...
Photo of tscottmc1T

tscottmc1

  • 6 Posts
  • 0 Reply Likes
So Great - It is a small thing (literally) but makes a huge different with perception of the site. Thank you!
Photo of MelindaM

Melinda

  • 1 Post
  • 0 Reply Likes
Thank you Ed!! This is the best tutorial as I was finally able to put a favicon on my site... LOVE IT!!!
Photo of mml177M

mml177

  • 25 Posts
  • 2 Reply Likes
hi,
i've tried using the code you gave,

and i pasted this into an html widget on my home page.

the favicon isnt showing up at all on internet explorer. I've cleared my browsing history, but still doesn't work.

however, it does work in firefox....But, it only works on certain pages. I tried pasting the code on every page in an html widget because i thought that was the reason it was only showing on certain pages, but that didnt work either... it still only shows in random pages.

what am i doing wrong? sorry... i'm a coding dummy and this is probably a stupid question.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
It is important to ensure that you delete the reference to the favicon in the right side toolbar of your sitebuilder for each page of your site. If not, the sitebuilder places a code for a favicon as well.

If you have more than one code on your site the sitebuilder's code will always win... ;)



Then publish your site once again to check that all your pages have the favicon in IE.

If that does not work then you could try placing the full URL to your favicon in the code at the top of the page instead of just "resources/favicon.ico" That often will clear it up if all else fails.

Let us know if it works or doesn't so we can help you further...
Photo of MarilynM

Marilyn

  • 8 Posts
  • 1 Reply Like
Hi,

Today is Jan 1st 2013! Happy New Year!

I just tried this coding and it worked good except I too am having it show up beautifully in some placed and not in others. I too copied the favicon coding to each of my main pages in hopes it would show up everywhere, and this did work, but is not feasible for every page as I have 50+ pages. It works in IE and Firefox, but does not seem to work in Google Chrome.

So my question is, I do remember, a year or two ago, adding a Favicon to the Favorites Icon as shown above. But since Yola made many changes I can no longer find the Properties tabs for my Widgets.

So could you tell me where the Favorite Icon can be found now so I can remove it from my pages?

Thank You,
Marilyn
Photo of MarilynM

Marilyn

  • 8 Posts
  • 1 Reply Like
Hi Again!

Also, you mentioned placing the full URL to your favicon in the code at the top of the page instead of just "resources/favicon.ico". I'm not sure what my full URL is. How can I find out what y full URL is?

Thank You,
Marilyn
Photo of mml177M

mml177

  • 25 Posts
  • 2 Reply Likes
thank you! you guys are always so helpful. much appreciated!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
UPDATE:

Recent changes in the sitebuilder may have affected how or if the cross browser favicon (using code above) is or is not viewed in Firefox.

I noticed recently that upon viewing my site in Firefox that my favicon did not appear in either the address bar or the tab. After some investigation I found that my code was the likely culprit.

<!--
<link rel="shortcut icon" href="resources/bear%20favicon.ico">
-->

You see, the file before upload was named "bear favicon.ico" but after it was placed in my file manager the name was automatically changed to "resources/bear%20favicon.ico"

The addition of the extra "%20" was until the other day of no issue as it was visible in all major browsers. After some recent turn of events the code was left inactive and my favicon was no longer visible in Firefox.

I recommend that you verify that your favicon is as well visible in Firefox. If it is then you more than likely have a "one" word file name or the bug so to speak has not affected your site. If you cannot see your favicon in Firefox then the following steps should get you fixed right up.

1) On each page of your site that you have previously placed the code you must go in and delete the HTML widget that contains the code.
2) Update/Publish your website without the favicon code on any of your pages.
3) Wait a few minutes and then empty your cache and open your website in your browser.
4) Click "View" in your toolbar and then click "page source" OR right click on a blank part of your page (background works well) and then click "View page source"
5) When the source of your page opens in a new tab click "Edit" in your toolbar and then "Find".
6) In the revealed find box type favicon" or whatever you named your favicon as.

If no results appear then follow step 7. If you find the results have highlighted the search term then re-verify that no code appears in your sitebuilder once more and follow the above steps again.

7) Rename your favicon to delete the "%20" effectively removing the blank space between the two words. It is wise to rename the file to remove the blank space on your computer and upload the new/renamed favicon to your file manager.

8) Open each of your pages and drag a fresh HTML widget onto the page(s) and place the code which reflects the changes.

Mine, from:
<!--
<link rel="shortcut icon" href="resources/bear%20favicon.ico">
-->

Mine, to:
<!--
<link rel="shortcut icon" href="resources/bearfavicon.ico">
-->

9) After each of your pages have been edited Update/Publish your site once again.

These steps returned my favicon into view in Firefox and it is once again visible in all the major browsers.

Cheers...
Photo of Vicki Wheeler

Vicki Wheeler

  • 25 Posts
  • 0 Reply Likes
Hi

Have sorted all my favicons bar one. One site has a framed redirect, is it possible to get around this one?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Vicki,

Not sure about that. If you can share your url for that page we can take a look and do a bit of research.
Photo of Vicki Wheeler

Vicki Wheeler

  • 25 Posts
  • 0 Reply Likes
my site is vickiwheeler.co.uk if you use the yola address the favicon is there but not when using the redirected one.

Thanks
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Vickie,

I am not seeing it on the yolasite as well and the link for it does not show the resources file. Your code looks like this: href="/favicon.ico" and it should look like: href="resources/favicon.ico". I hope this helps.
Photo of Vicki Wheeler

Vicki Wheeler

  • 25 Posts
  • 0 Reply Likes
This is what I have at the top of my home page, I think if it works it would need to go on the top of every page, but at the moment nothing is happening.
Photo of Vicki Wheeler

Vicki Wheeler

  • 25 Posts
  • 0 Reply Likes
This is what is at the top of my home page
Photo of Vicki Wheeler

Vicki Wheeler

  • 25 Posts
  • 0 Reply Likes
link rel="shortcut icon" type="image/x-icon" href="resources/favicon.ico"
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Vicky replace the code that you are using here:

<link rel="shortcut icon" type="image/x-icon" href="resources/favicon.ico">

with this code here:

<link rel="shortcut icon" href="resources/favicon.ico">

You need not place

type="image/x-icon"

as it may be the reason that your favicon does not show.

Your favicon ico file is in the right place and if you use the proper code should work...

http://vickiwheeler.yolasite.com/reso...
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Hmmm looks like the inclusion of (type="image/x-icon") matters little as the code is cross browser compatible with or without it...

I would however still add the code to each and every page in your website.

<link rel="shortcut icon" href="resources/favicon.ico">

You currently only have it on your index page and to have it appear in the address bar of every page you must place it in an HTML widget on every page.
Photo of Vicki Wheeler

Vicki Wheeler

  • 25 Posts
  • 0 Reply Likes
Still nothing, I realise that it needs to go on every page but see little point all the time it doesn't work anyway. More ideas please.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
How bizarre that it doesn't show.

Who do you have your .co.tk domain through?

Is there any way to add the favicon code to the pre-redirect page as it is not allowing the favicon to show in the browser.

I think that it must be frame related.
Photo of Vicki Wheeler

Vicki Wheeler

  • 25 Posts
  • 0 Reply Likes
Domian is through heartinternet, nothing doing that end!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Aha it is a heartinternet issue and not a Yola one as heartinternet only allows two choices for redirect.

http://www.heartinternet.co.uk/domain...

Automatic= Your .co.tk directs to your yolasite where all your yolasite pages will be seen with the yolasite.com ending in them.

OR

Framed= Where the only URL shown regardless the page you are on is always going to be http://vickiwheeler.co.uk/

The only way that you will get your favicon to show in your browser will be to use the automatic redirect or to purchase your .co.tk through another registrar who allows for masked forwarding of your purchased domain.

Please bear in mind that if you use Google webmaster tools you should use your http://vickiwheeler.yolasite.com URL as the .co.tk one will not be indexed properly as the webcrawlers have no content to search through with the way it is forwarded.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Wait.... There is another way... Try this code between but not including the <!-- and -->
<!--

<link rel="shortcut icon" href="http://vickiwheeler.yolasite.com/reso...>

-->

The use of the full URL of the favicon file might just do the trick... ;)
Photo of Vicki Wheeler

Vicki Wheeler

  • 25 Posts
  • 0 Reply Likes
No. Still nothing unless it is taking a while to catch up.

Thanks for the webmaster tip, figured that out the other day, you have now confirmed i was right!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2590 Posts
  • 277 Reply Likes
Just checked your site and the code with the full URL shows so it has caught up but sadly the heartinternet frame direct is fouling it all up.

I think that you only have two choices then... To use the automatic direct or a use a new registrar.

Good luck...
Photo of Vicki Wheeler

Vicki Wheeler

  • 25 Posts
  • 0 Reply Likes
OK. Thank you for all your help. Was well worth trying. I have applied what I have learnt to my other sites with great success.

Thanks again.
Photo of Sarah W

Sarah W

  • 27 Posts
  • 0 Reply Likes
ed a torials you are a genius thanks
Photo of Alykhan Suleman

Alykhan Suleman

  • 1 Post
  • 0 Reply Likes
It's not working on my site! www.alysuleman.yolasite.com?
Photo of Gop

Gop

  • 7242 Posts
  • 2031 Reply Likes
Hello Alykhan,

Site → Site Settings → Site Properties → Favicon →(follow the options there)
Photo of RAFAL CELEJ

RAFAL CELEJ

  • 53 Posts
  • 1 Reply Like
Hi Ed,

First thing-GREAT JOB, I do like your page a lot, really nice, nice job!!!

I'm looking to add something to my site just like you have on yours.
I want to have widget sort of small section on my index page below the banner where pictures are changing together with description- fly in-out etc.

Also I'm still looking some way to use space below the side menu, do you know how to implement it??

Thank you
Raf