XF 1.3 Multiple Favicon files and how to implement

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:
  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">

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

Admin CP -> Appearance -> Templates -> PAGE_CONTAINER
 
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. :)
 
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.
 
Top Bottom