New favicon?

[⭐ Alex ⭐]

@AndyB this thread has nothing to do with my suggestion thread. https://xenforo.com/community/threa...s-favicon-on-xenforo-com.179902/#post-1422325

It's merely a discussion while mine was a suggestion. I suggest the moderator that closed my thread re-opens it.

 

[Paul B]

Suggestions are for the core software, not this site.

 

[Chris D]

Besides which, considering the feedback we have received so far, we have reverted the favicon back to the original.

It may take an indeterminate amount of time before it displays the original one due to various caches at play.

 

[AndyB]

we have reverted the favicon back to the original.

Thank you, Chris.

Why are these two favicon's different?

https://xenforo.com/community/styles/default/xenforo/xenforo-favicon.ico

https://xenforo.com/community/styles/default/xenforo/xenforo-favicon.png

I assume you have entered one of these URLs here, which one?

 

[Chris D]

We use the PNG file in XF 2.x.

I think we might have used the ICO by default in XF 1.x.

 

[AndyB]

We use the PNG file in XF 2.x.

It looks like it has yet to be reverted to the original on xenforo.com, is this correct?

 

[Paul B]

It looks like it has yet to be reverted to the original on xenforo.com, is this correct?

No, it has been reverted.

As Chris said:

It may take an indeterminate amount of time before it displays the original one due to various caches at play.

 

[Kevin]

Forgetting the favicon for a minute....

XF crew, did you guys manually add these tags to the xenforo.com instance or is there support for them in XF somewhere itself that I missed?

<meta property="og:logo" content="styles/default/xfs/xenforo-logo-512.png" size="512x512" />
<meta property="og:logo" content="styles/default/xfs/xenforo-logo-256.png" size="256x256" />
<meta property="og:logo" content="styles/default/xfs/xenforo-logo-128.png" size="128x128" />

 

[Chris D]

Manually added.

 

[AndyB]

Original favicon is now showing properly in Firefox, both in the browser tab as well as the Bookmarks Toolbar.

Thank you.

 

[Xon]

It may take an indeterminate amount of time before it displays the original one due to various caches at play.

I've taken to appending cache buster strings to favicons because otherwise browsers randomly cache them for non-deterministic amounts of time.

 

[rosal]

To properly work at multiple resolutions and various apple/android/MS tablets you kinda need a stanza like the following;

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png?v={$versionId}">
<link rel="icon" type="image/png" href="/favicon-32x32.png?v={$versionId}" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png?v={$versionId}" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png?v={$versionId}" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png?v={$versionId}" sizes="16x16">
<link rel="manifest" href="/manifest.json?v={$versionId}">
<link rel="shortcut icon" href="/favicon.ico?v={$versionId}">
<meta name="msapplication-TileColor" content="{$backgroundColor}">
<meta name="msapplication-TileImage" content="/mstile-144x144.png?v={$versionId}">

Rather than just set a single complex icon everywhere.

Where i can add this?

 

[Xon]

Where i can add this?

Somewhere in the <head> tag

 

[rosal]

Somewhere in the <head> tag

Can you give one example?

 

[djbaxter]

To properly work at multiple resolutions and various apple/android/MS tablets you kinda need a stanza like the following;

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png?v={$versionId}">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png?v={$versionId}">
<link rel="icon" type="image/png" href="/favicon-32x32.png?v={$versionId}" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png?v={$versionId}" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png?v={$versionId}" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png?v={$versionId}" sizes="16x16">
<link rel="manifest" href="/manifest.json?v={$versionId}">
<link rel="shortcut icon" href="/favicon.ico?v={$versionId}">
<meta name="msapplication-TileColor" content="{$backgroundColor}">
<meta name="msapplication-TileImage" content="/mstile-144x144.png?v={$versionId}">

Rather than just set a single complex icon everywhere.

You can create the favicons and get this code at

The ultimate favicon generator - Favic-o-Matic

Check this amazing tool, it creates EVERY kind of favicon you need, including iOS icons, Android icons, Metro tile icon and more! Favic-O-Matic is the FIRST favicon generator to correctly handle transparent favicon from png!

favicomatic.com

Free.