Customizing SMF > Tips and Tricks

[HOW TO] Add a favicon (bookmark/favorite icon) to your forum

(1/16) > >>

ccbtimewiz:
What is a favicon?



A favicon (short for favorites icon), also known as a website icon, or shortcut icon, is an icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's URL bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title. The Microsoft Windows Shell uses favicons to represent "Internet shortcuts" to web pages. - Wikipedia

How do I go about implementing one on my website?

There are numerous ways of implementing a favicon into your website. The easiest way is to simply upload a windows ICO formatted icon that is 16 x 16 into the main directory of your site. This works about 80% of the time; because most modern day browsers look for this icon.

However because of older browser builds and IE, it's not so easy. Some require declarations from the template itself in order to show.

I've compiled a list of hacks that will add this icon to your browser-- it's up to you to decide which to use.


Method #1 - Adding the calls to your template.

Open index.template.php of your theme. To do this, you'll be needing to download your index.template.php from your server via an FTP connection.

How do I use FTP? / What is FTP?

Once you do that, open it in a stable text editor such as notepad++ or wordpad, then do the following:

Find:

--- Code: (index.template.php SMF 1.1.x and 2.x) ---<title>', $context['page_title'], '</title>';
--- End code ---

Replace with:

--- Code: (index.template.php SMF 1.1.x and 2.x) ---<title>', $context['page_title'], '</title>';

echo '<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />';
echo '<link rel="icon" href="/favicon.ico" type="image/x-icon" />';
--- End code ---

After you finish this, follow the step at the very end of the guide and you should be all set.


Method #2 - Adding the calls to your template using conditional PHP statements.

This is a bit different from Method #1. This makes it so you can turn the favicon on or off by simply editing a variable in your template.

Open index.template.php of your theme. To do this, you'll be needing to download your index.template.php from your server via an FTP connection.

How do I use FTP? / What is FTP?

Once you do that, open it in a stable text editor such as notepad++ or wordpad, then do the following:

Find:

--- Code: (index.template.php SMF 1.1.x) ---// The main sub template above the content.
function template_main_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
--- End code ---

Replace with:

--- Code: (index.template.php SMF 1.1.x) ---// The main sub template above the content.
function template_main_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
$enable_favicon = true; // Use "true" to enable, "false" to disable.
--- End code ---


Find:

--- Code: (index.template.php SMF 1.1.x) ---<title>', $context['page_title'], '</title>';
--- End code ---

Replace with:

--- Code: (index.template.php SMF 1.1.x) --- <title>', $context['page_title'], '</title>';

// Don't alter this code. Alter the statement under the global declarations.
if ( $enable_favicon  )
         {
echo '<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />';
                echo '<link rel="icon" href="/favicon.ico" type="image/x-icon" />';
         }
// ----------------
--- End code ---


Find:

--- Code: (index.template.php SMF 2.x) ---function template_html_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;
--- End code ---

Replace:

--- Code: (index.template.php SMF 2.x) ---function template_html_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;
   $enable_favicon = true; // Use "true" to enable, "false" to disable.
--- End code ---

Find:

--- Code: (index.template.php SMF 2.x) ---<title>', $context['page_title'], '</title>';
--- End code ---

Replace with:

--- Code: (index.template.php SMF 2.x) --- <title>', $context['page_title'], '</title>';

// Don't alter this code. Alter the statement under the global declarations.
if ( $enable_favicon  )
         {
echo '<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />';
                echo '<link rel="icon" href="/favicon.ico" type="image/x-icon" />';
         }
// ----------------
--- End code ---


Alternative Methods (Modification Installation using the Package Manager System)

A couple of people have made mods that edit this code for you-- however some of them might not work on all themes and require you to make edits. I've compiled this guide so anyone could do them on any theme. But if you're running the default theme and/or know a good amount of XML, then try out these mods:

#702 Favicon Mod by ccbtimewiz
#1329 Add Favicon Support by Deprecated


How do I upload the favicon.ico image?

For the image, name it "favicon.ico" and save it in the Windows ICO format. Make sure this image is 16 x 16, and that it is located in:

%root%/public_html/

If that for some reason doesn't show you what you want, place the image in your root directory as well.

When you make this change, you'll be needing to clear your browser. Try clicking ctrl + f5, or restart your computer.

karlbenson:
Your line is invalid
echo '<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>';

You need a space before />
like so
echo '<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />';

Alternatively btw, you can use my favicon mod.

ccbtimewiz:

--- Quote from: karlbenson on April 30, 2008, 03:09:07 PM ---Your line is invalid
echo '<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>';

You need a space before />
like so
echo '<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />';

Alternatively btw, you can use my favicon mod.

--- End quote ---

Ah, thanks for pointing that out. Fixed. :)

This is mainly for those whom use a custom theme that has a custom index.template.php file.

darthvader61:
i can't apply this 1.1.5. it didn't work.


--- Code: ---// The main sub template above the content.
function template_main_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
$enable_favicon = 'Yes'; // Use "Yes" or "No".

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '><head>
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta name="description" content="', $context['page_title'], '" />', empty($context['robot_no_index']) ? '' : '
<meta name="robots" content="noindex" />', '
<meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js?fin11"></script>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "', $settings['theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
var smf_scripturl = "', $scripturl, '";
var smf_iso_case_folding = ', $context['server']['iso_case_folding'] ? 'true' : 'false', ';
var smf_charset = "', $context['character_set'], '";
// ]]></script>

<title>', $context['page_title'], '</title>';
// Don't alter this code. Alter the statement under the global declarations.
if ($enable_favicon == 'Yes') {
echo '<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />';
elseif ($enable_favicon == 'No')
echo ''; }
// ----------------
--- End code ---

ccbtimewiz:
I've updated this post.

Navigation

[0] Message Index

[#] Next page

Go to full version