XF 1.3 Multiple Favicon files and how to implement

E

Emil JaBo

Active member
Hi,

I used an online Favicon generator and it allowed me to specify custom favicons for different operating systems and sizes. The following image shows the files that it generated:

screen-capture.webp

Below are the instructions and the code that it generated to input into my webpage.
  1. Place ‘favicons’ folder in the root of your web site. If your site is http://mysite.com, you should be able to access a file named http://mysite.com/favicon.ico.
  2. Insert the following code in the <head> section of your HTML pages:
Code: 
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#9fc1bf">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Would anyone mind giving me an idiot proof guide on how to get these files to work for my forum? :)
 
Last edited:
Sort by date Sort by votes
Emil JaBo said:
  1. Insert the following code in the <head> section of your HTML pages:
Code: 
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#9fc1bf">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
Click to expand...

The <head></head> area in XenForo is in this template:

Admin CP -> Appearance -> Templates -> PAGE_CONTAINER
 
Upvote 0 Downvote
Thanks Jake, I pasted the code in-between the <head> </head> and uploaded the Favicon folder to my root and couldn't see any favicon in the address bar. Do the instructions supplied by the website make sense, ie should it work? In an age of retina and many different devices I wanted to have a Favicon identity that worked well resolution wise on most of the popular devices and scenarios.

I also tried just using the Favicon.ico file in the root and still saw no change. :)
 
Upvote 0 Downvote
Please post your forum URL so I can inspect the live page to see that all locations are correct.

Also note that browsers love to cache favicon images so changes might not be immediately apparent.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Orit
XF 2.2 How to implement reactions for $thread.FirstPost?
Replies
1
Views
26
Orit
Orit
bzcomputers
  • Question Question
XF 2.2 How to implement cachebusting / versioning for an external file called within a template
Replies
1
Views
35
Jeremy P
Jeremy P
P
  • Question Question
XF 2.3 How to implement Google Discover
Replies
1
Views
51
Old Nick
O
FoxSecrets
XF 2.2 How to implement reactions in a custom content
2
Replies
32
Views
778
FoxSecrets
FoxSecrets
K
XF 2.2 How to implement a node permission that is valid for all node types?
Replies
2
Views
585
Kirby
K
Back
Top Bottom