Redh

Registered
The default favicon.ico is outdated - with all our fancy responsive website designs and beautiful code, we need to make sure our favicons can keep up! This means we need different favicon images for different devices - a simple 16 x 16 image just isn't going to look good in retina display on the latest apple decide. Also, if your mobile users use the option to "Add to Home Screen", it's nice to give them a proper icon for your website.

And this is how it's done! First off, create the image you would like to use at 260 x 260 pixels. Then go to this fantastic website and follow the instructions to create all your custom favicon images:

https://realfavicongenerator.net

Next, upload these images to your public root directory (not your forum directory if it is in a different folder).

Now go into your Xenforo admin control panel, click on Appearance > Templates > Create New Template. Use "favicons" for your template title, and copy & paste the code given to you by the favicon generator site above. It will look something like this:

Code:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png?n=XXXXXxxxxx">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png?n=XXXXXxxxxx">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png?n=XXXXXxxxxx">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png?n=XXXXXxxxxx">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png?n=XXXXXxxxxx">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png?n=XXXXXxxxxx">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png?n=XXXXXxxxxx">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png?n=XXXXXxxxxx">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png?n=XXXXXxxxxx">
<link rel="icon" type="image/png" href="/favicon-32x32.png?n=XXXXXxxxxx" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png?n=XXXXXxxxxx" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png?n=XXXXXxxxxx" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png?n=XXXXXxxxxx" sizes="16x16">
<link rel="manifest" href="/manifest.json?n=XXXXXxxxxx">
<link rel="mask-icon" href="/safari-pinned-tab.svg?n=XXXXXxxxxx" color="#b60f00">
<meta name="apple-mobile-web-app-title" content="Cyrus">
<meta name="application-name" content="Cyrus">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-TileImage" content="/mstile-144x144.png?n=XXXXXxxxxx">
<meta name="theme-color" content="#000000">

Save your new template, and then go back to the main templates page and edit the template called "PAGE_CONTAINER". You want to place the following line within the <head> elements of the code - I placed mine just below the <title> tag:

Code:
<xen:include template="favicons" />

Save the template, and you are done! You now have a custom favicon compatible with all devices! I hope this helps :)
 
This is great thank you.
However the only way I could get them to work, and for the test (root directory search option) to report that everything was correct was by placing the files into the /members directory rather than the root (currently on a shared server). I'm not exactly sure why, possibly because I'm using a CNAME to create a members. subdomain.
 
I made image size 48x48 (png).
 

Attachments

  • logo.og_48.png
    logo.og_48.png
    1.9 KB · Views: 18

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back