Deepmartini
Well-known member
Hope it gets fixed soon! Want to maybe try it but am cautious cause don't want to mess up anything.
Live Update 4.0.1
- Thread starter Naatan
- Start date
jacko
Well-known member
no modifications at all
The main issue with the add-on is the Tinycon plugin which finds an appropriate icon file, queries the dom looking for any "link" tags:
Further to that, it does a regular expression to filter out the link tags where the rel attribute doesn't contain the term "icon".
If it doesn't find a link tag with the rel of icon that contains a href attribute then it will simply use "/favicon.ico".
So, for XenForo 1.1.x it was fine. It would just look at the server root and use favicon.ico.
In XenForo 1.2, however, it DOES find a link tag with a href and the term icon.
Unfortunately, though, it finds this:
And it thinks that's a favicon.
This is a bug, really, with the Tinycon plugin. But we shouldn't hold out much hope of that being fixed. It has been reported on Github: https://github.com/tommoor/tinycon/issues/41
We can fix it ourselves by editing the Tinycon code, but this worked for me:
@RoldanLT the only problem with your fix is if your favicon is only 16px then if you have a lot of Apple users who might be creating a home screen icon for your site, then that icon would look dreadful.
My solution is this:
And that is working fine.
If you do it in this order:
It doesn't work and still picks up the Apple icon.
The reason is, the Tinycon code will actually return the first icon tag it finds.
So it should be that simple really.
Code:
var links = document.getElementsByTagName('link');Further to that, it does a regular expression to filter out the link tags where the rel attribute doesn't contain the term "icon".
If it doesn't find a link tag with the rel of icon that contains a href attribute then it will simply use "/favicon.ico".
So, for XenForo 1.1.x it was fine. It would just look at the server root and use favicon.ico.
In XenForo 1.2, however, it DOES find a link tag with a href and the term icon.
Unfortunately, though, it finds this:
Code:
<link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />And it thinks that's a favicon.
This is a bug, really, with the Tinycon plugin. But we shouldn't hold out much hope of that being fixed. It has been reported on Github: https://github.com/tommoor/tinycon/issues/41
We can fix it ourselves by editing the Tinycon code, but this worked for me:
@RoldanLT the only problem with your fix is if your favicon is only 16px then if you have a lot of Apple users who might be creating a home screen icon for your site, then that icon would look dreadful.
My solution is this:
Code:
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />And that is working fine.
If you do it in this order:
Code:
<link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
<link rel="shortcut icon" href="favicon.ico" />It doesn't work and still picks up the Apple icon.
The reason is, the Tinycon code will actually return the first icon tag it finds.
So it should be that simple really.
QenTox
Well-known member
Could someone please link me to a guide or tell me what is the proper way of creating favicon.ico? Mine is only 16x16, but reading posts in this thread it seems I should really have 32x32 and 48x48 options. Also what software do you use to create a favicon.ico? Or how do you save a image as .ico file?
PS, my favicon.ico is 48x48
Create your desired favicon on Photoshop as regular image, png or jpg then convert it here: http://tools.dynamicdrive.com/favicon/
Go to Your_Forum//admin.php?options/list/performance
Set: Live Update Interval
BamBam
Active member
Where/What is the Tinycon Plugin? I want to change the Code, suggested from Chris Deeming.
I didn't suggest changing any code in the Tinycon plugin.
The code in my post relates to the PAGE_CONTAINER template.
Replace:
With:
The code in my post relates to the PAGE_CONTAINER template.
Replace:
Code:
<link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />With:
Code:
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="{xen:helper fullurl, @ogLogoPath, 1}" />
Eoj Nawoh
Active member
Set mine for 10 seconds before. It just didn't seem to do it.
Wildcat Media
Well-known member
That did not work for me--it still pulls the wrong favicon.
However...
https://github.com/tommoor/tinycon/pull/46
Someone further modified (and forked) tinycon for some retina BS, and a side effect is that it fixed the favicon issue.
EDIT: #fail.
Last edited:
Wildcat Media
Well-known member
Well, scratch that--now the indicator over the favicon doesn't display...
I'm just going to uninstall this.
I'm just going to uninstall this.
It definitely shouldn't pull the wrong favicon but you do have to ensure the path to your favicon in that code is correct.
If you send me your board URL I will check it out for you.
You may have noticed that the ownership of this resource is now under my name. I will be maintaining it going forward. But I'm still looking into a permanent fix for this.
If you send me your board URL I will check it out for you.
You may have noticed that the ownership of this resource is now under my name. I will be maintaining it going forward. But I'm still looking into a permanent fix for this.
Wildcat Media
Well-known member
Your part is fine.
It's Tinycon that is broken, and I did see your post over there a week or two ago. The script should be explicitly pulling the favicon file--instead, it is "greedy" in that it grabs the first matching <link> element with "icon" in the relationship. IOW, to be failproof, it should not be "guessing" as it is now. We are fortunate in that we can modify XF templates to change the order of these elements, but there may be other systems out there hard-coded otherwise, or have other <link> elements with icons for other purposes. (Just thinking from my rusty "programmer's" mindset.
) Thing is, I can't think of a reliable way to grab the favicon, as not everyone will name their file "favicon.ico". And I think in newer browsers, you can even use a PNG file in its place (I'd have to check that).I don't mess with JavaScript personally--I never have liked it, from day one, even after having had classes in it.
My paths for favicons were all correct (they work everywhere else properly), and I even still keep a default favicon.ico in the roots of sites (even though I don't like it).
I'm thinking now that the new code posted above isn't even working, as it is not generating an alert over the favicon anymore. So, back to the drawing board...
QenTox
Well-known member
Good move, thanks to @Chris Deeming one of the best add-ons will be still alive 
Last edited:
@Rudy
I know what you're saying and I know exactly how the JS is broken, which is why I suggested my fix.
Like you say, it uses the first link attribute with a rel that contains icon therefore if we define that in the template like my post suggests, it will pick it up. But the href="favicon.ico" needs to be pointing to the correct favicon.ico. That could be in a different directory. If it is in your webroot and your forum is in /community/ for example, then you would need to ensure there's a favico.ico file in your /community/ directory for my example to work.
I know what you're saying and I know exactly how the JS is broken, which is why I suggested my fix.
Like you say, it uses the first link attribute with a rel that contains icon therefore if we define that in the template like my post suggests, it will pick it up. But the href="favicon.ico" needs to be pointing to the correct favicon.ico. That could be in a different directory. If it is in your webroot and your forum is in /community/ for example, then you would need to ensure there's a favico.ico file in your /community/ directory for my example to work.
Similar threads
