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

[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) [Select]

<title>', $context['page_title'], '</title>';
Replace with:

Code: (index.template.php SMF 1.1.x and 2.x) [Select]

<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" />';
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) [Select]

// The main sub template above the content.
function template_main_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
Replace with:

Code: (index.template.php SMF 1.1.x) [Select]

// 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.

Find:

Code: (index.template.php SMF 1.1.x) [Select]

<title>', $context['page_title'], '</title>';
Replace with:

Code: (index.template.php SMF 1.1.x) [Select]

<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" />';
         }
// ----------------

Find:

Code: (index.template.php SMF 2.x) [Select]

function template_html_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;
Replace:

Code: (index.template.php SMF 2.x) [Select]

function template_html_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;
   $enable_favicon = true; // Use "true" to enable, "false" to disable.
Find:

Code: (index.template.php SMF 2.x) [Select]

<title>', $context['page_title'], '</title>';
Replace with:

Code: (index.template.php SMF 2.x) [Select]

<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" />';
         }
// ----------------

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]

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.

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: [Select]

// 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 ''; }
// ----------------

[ccbtimewiz]

I've updated this post.

[[unplugged]]

Am I missing something somewhere? In both FF2 and Opera 9.5, the favicon shows perfectly by simply adding the favicon.ico to the root of the site. I cannot find any reference to a "call" to the icon anywhere in my files.

[ccbtimewiz]

Am I missing something somewhere? In both FF2 and Opera 9.5, the favicon shows perfectly by simply adding the favicon.ico to the root of the site. I cannot find any reference to a "call" to the icon anywhere in my files.

Most browsers are set up to look for that file. However other browsers are not. Other browsers require a reference in the template.

[[unplugged]]

Other browsers being IE. 

....which could be accommodated by adding the two lines in the <head> as mentioned by Deprecated.

That darned IE.....

[ccbtimewiz]

Other browsers being IE. 

....which could be accommodated by adding the two lines in the <head> as mentioned by Deprecated.

That darned IE.....

More like the other hundreds of browsers.

[Deprecated]

Other browsers being IE. 

....which could be accommodated by adding the two lines in the <head> as mentioned by Deprecated.

That darned IE.....

Actually I've got a mod package written up and ready to submit, "Add Favicon.ico Support" which will be available at SMF's mod site early next week. The code is easy to add in manually, but the mod package will allow even newbies to put it in their SMF.

It's true that most browsers automatically pick up your favicon, but it is correct form to be fully compliant by adding the appropriate tag to your headers. Obviously this is of little importance to some people. I myself kind of like the icons, because they give your site a more professional look.

[Deprecated]

Just FYI, I've submitted my mod package Add Favicon.ico Support to the modsite, and it will be available when/if the team approves it. The readme.txt file has additional information, mainly links to informational sites and to an online favicon generator to get people up an running as quickly as possible. Experts have no problem adding this stuff and now with my mod even newbies can add the header tags as quick as a click!

[ccbtimewiz]

Just FYI, I've submitted my mod package Add Favicon.ico Support to the modsite, and it will be available when/if the team approves it. The readme.txt file has additional information, mainly links to informational sites and to an online favicon generator to get people up an running as quickly as possible. Experts have no problem adding this stuff and now with my mod even newbies can add the header tags as quick as a click!

Erm, I do apologize, but this mod already exists....

http://custom.simplemachines.org/mods/index.php?mod=702

And I'm taking development on it from karlbenson.

[LOADING...]

Thank you i would also like to add this one on my forum too!

[Deprecated]

If you are running SMF 1.1.2, 1.1.3 or 1.1.4 you can use either modification. I presume ccbtimewiz will update his mod at some point to be compatible with current SMF releases.

If you are running SMF 1.1.5 or 2.0b3.1 you can install my modification. As far as I know it is compatible with all SMF versions even including the earlier ones. I have not tested it with versions prior to 1.1.5 because they are obsolete.

Here: Add Favicon Support

[ccbtimewiz]

Updated my main post.

[Deprecated]

That post looks suspiciously familiar!



"If we have seen farther, it is because we are standing on the shoulders of giants."

[Smoky "Rider" Blue]

you know, i have never run into a issue with a flavicon not showing up in any of the browsers i have used, and i had 10 at one time on my pc, just by adding it to the root of the site where the site begins.

but good mod..

[ccbtimewiz]

Updated.

[LOADING...]

It took me long time to add this mod! but finally it worked

[ccbtimewiz]

Glad to see you got it.