Add Your Own Favicon

classic Classic list List threaded Threaded
1 message Options
GregChapman GregChapman
Reply | Threaded
Open this post in threaded view
|

Add Your Own Favicon

This post was updated on .
There is no code within Nabble apps that directs them to load the default "N" icon that appears in browser tabs, so I assume that all Nabble servers have a favicon file loaded to the root of each of the Nabble servers and browsers load this by default.

An alternative favicon can be made to appear by including the necessary line of code in the macros that generate a forum's HTML code. But first you must create an icon and upload it to the Internet. The obvious place is within your own forum.

Here, in an area hidden from general users, I have uploaded a simple icon file to GregHelp:

Favicon Uploaded
Later you will need the URL of the file. In most browsers, on hovering over the link the location will be displayed at the bottom of the browser window. Normally, you will be able to copy the link by right-clicking on the link and selecting the appropriate menu option.

Next you need to find the appropriate macros in which to insert the code. The technique below has worked for me (but I cannot guarantee it will work for all!).

Click on the "Edit this page" link at the bottom of your forum to reveal a screen where you can click on a cogwheel button and pick "Search macros" from the menu:

Find Search Macro Option
On the screen that appears type "<!doctype"  in the search field and select the "Macro source contains" option before clicking on the "Search" button:

Macro Search
The results you get will vary as Nabble's servers are not all set up in the same way, but the key macros appear to be the three shown in the image below: "change_appearance", html_impl" and "html5_impl".

Search Results
In others the "html5_impl" file is missing as the source code for the forum is rather different. (I have not found it necessary to edit the "trkg" file, hence I didn't show it in the image above!)

Macro Search
However, the key files all include code that contains a "<head>" block that is similar to the following:
<head>
  <![CDATA[<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">]]>
  <link rel="shortcut icon" href="/file/n4012848/greghelpicon.ico" type="image/x-icon"/>
  <n.html5_stylesheets/>
  <n.html5_javascript_libraries/>
  <n.html_head_content/>
</head>
The key is Line 4, the "link" line, which I have added. You need to add a similar line changing the contents of the href="xxx" statement to show the location of your favicon file.

Notes:
1. If you uploaded your favicon file within a post on your forum as illustrated earlier, the full absolute address is not needed and instead you can enter a relative link showing only the folder path and file name. Don't omit the leading slash or the favicon only appears in the root folder of your forum.

2. Be aware that some browsers are very "sticky" when it comes to reusing cached files, so you may not see the revised icon immediately if you do not clear your cache to force your browser to load the revised page and icon.

Greg