Simple Machines Community Forum

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? (http://docs.simplemachines.org/index.php?topic=480)

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

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

Replace with:
<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? (http://docs.simplemachines.org/index.php?topic=480)

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

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

Replace with:
// 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:
<title>', $context['page_title'], '</title>';

Replace with:
<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:
function template_html_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;

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

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

Replace with:
<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 (http://custom.simplemachines.org/mods/index.php?mod=702) by ccbtimewiz (http://www.simplemachines.org/community/index.php?action=profile;u=111571)
#1329 Add Favicon Support (http://custom.simplemachines.org/mods/index.php?mod=1329) by Deprecated (http://www.simplemachines.org/community/index.php?action=profile;u=166492)


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.

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.

Zitat von: karlbenson in April 30, 2008, 03:09:07 NACHMITTAGS
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.

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

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

I've updated this post.

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.

Zitat von: SunKing in August 09, 2008, 10:00:13 NACHMITTAGS
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.

Other browsers being IE.  :P

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

That darned IE..... ;D

Zitat von: SunKing in August 09, 2008, 10:14:27 NACHMITTAGS
Other browsers being IE.  :P

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

That darned IE..... ;D

More like the other hundreds of browsers.

Zitat von: SunKing in August 09, 2008, 10:14:27 NACHMITTAGS
Other browsers being IE.  :P

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

That darned IE..... ;D

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.

Just FYI, I've submitted my mod package Add Favicon.ico Support (http://custom.simplemachines.org/mods/index.php?mod=1329) 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! :)

Zitat von: Deprecated in August 10, 2008, 11:29:25 VORMITTAG
Just FYI, I've submitted my mod package Add Favicon.ico Support (http://custom.simplemachines.org/mods/index.php?mod=1329) 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.

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

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 (http://custom.simplemachines.org/mods/index.php?mod=1329)

Updated my main post. :)

That post looks suspiciously familiar! ;)



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

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.. ;)

Updated.

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

Glad to see you got it. :)

thanxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx bro thanx alot :D :D :D nd this is the first time i have added mod manually  :) thanx fr gr8 explation muah thanx bro respect fr ya :)



edit: we don't need a whole page of worship :)

(1) somebody needs to write a textish-English dictionary

(2) somebody needs to write a smiley maximum limit mod

(3) somebody needs to step back from the drugs! :P

lmao!!! good one Depreciated!!!  :P

now let me go rest my eyes..  :o ;)

Zitat von: Deprecated in November 23, 2008, 09:01:58 NACHMITTAGS
(1) somebody needs to write a textish-English dictionary

(2) somebody needs to write a smiley maximum limit mod

(3) somebody needs to step back from the drugs! :P

lemme correct u nt smiley images per post :P

Well I'm glad you are taking the teasing with good humor Simmer. :) You're a good sport! :D


Actually I thought your mega-smilies post was pretty funny! :P :P :P

Zitat von: Deprecated in November 23, 2008, 09:01:58 NACHMITTAGS

(2) somebody needs to write a smiley maximum limit mod

Apologies for butting in but yes it's been done incase you are not aware

http://www.simplemachines.org/community/index.php?topic=17213.0

Great mod!  I was able to get it working (mostly) without asking for help.

The favicon.ico works just fine on the main forum page and most other pages, HOWEVER, it is not working when I view/edit a post, or when I am viewing the topics in a particular board.  Is there another .php file we need to add:

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

??

Thank you in advance!

@dvancamp - The icon should be showing on all pages without having to insert it in any other files.  Try ctrl + F5 and see if that clears things up.

Hi- I installed the mod and have the favicon.ico in the root of the site, and of the forum but no show in Firefox or IE. Refreshed cache with no luck.  Running SMF 1.1.8. 

Thanks for the help.

http://kluedesigns.com/talk

Nevermind.  I uninstalled and reinstalled and it works!  thanks!

man, the only thing worse than not getting this mod to work is seeing other people make it work.

I installed the mod , i followed this tutorial , i uploaded 16x16 .ico to my root/html , deleted all firefox private data , restarted firefox and it's still showing the deafult favicon.

PS : I'm using the deafult theme.

Sometimes it takes a little while to show up, sometimes more than a little...   ;)

BTW, here's a website to create a favicon: http://www.favicon.cc/?

The only thing I am unsure of is where to put it ie root directory. What is the root directory?

Zitat von: TheListener in August 02, 2009, 10:40:22 NACHMITTAGS
The only thing I am unsure of is where to put it ie root directory. What is the root directory?

The directory where SSI.php, ssi_example.php, etc are :)

Ok smarty pants  ;D

The favicon is in the root directory and er nothings changed.

Any suggestions?

Keeping it clean of course.

Hard refresh.

CTRL + F5

Done that 5 times now  :D

Zitat von: TheListener in August 02, 2009, 10:57:28 NACHMITTAGS
Done that 5 times now  :D

Sometimes, browsers take a while to re-update favicons. Especially IE

Is it the same with Firefox?

Zitat von: TheListener in August 02, 2009, 11:11:12 NACHMITTAGS
Is it the same with Firefox?

Not normally but sometimes.

Thanks bud.

Will give it a couple days then throw a stinkbomb at ya if nothing has happened.

/me takes said stinkbomb and loads it with enough flatulence to kill king kong

where can i find this %root%/public_html/

The root is the main directory where you first get taken to via ftp or your server control panel.

Firefox: go to "Tools", "Clear Recent History", check "Cache" and click "Clear Now". Then close FireFox, reopen and it should update your favicon. To update your bookmark icon, delete the bookmark, and re-bookmark it.

This worked great with the current version of Firefox! Thanks!

Does this mod support animated favicons?

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

ScottDB the link will take you to the actual mods topic.

Zitat von: ccbtimewiz in April 30, 2008, 03:01:10 NACHMITTAGS

Find:

Code (index.template.php SMF 1.1.x and 2.x) Auswählen Erweitern

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

Replace with:

Code (index.template.php SMF 1.1.x and 2.x) Auswählen Erweitern

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


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/

That works perfect!

But how can I use an animated gif ?

How annoying. But if you must, try this site, http://www.favicon.cc/? (http://www.favicon.cc/?), I am not sure if you can directly upload an animated gif, but you can make animated icons. Or here's another: http://www.html-kit.com/favicon/ (http://www.html-kit.com/favicon/)

I added the codes to my ad mod just the way we add the adsense codes but did not permit it to show anywhere in the boards  Then i uploaded the icons to my webroot. And the icon is showing.....  Here (http://www.forumwalls.com)

Here (http://www.forumwalls.com)

Here (http://www.forumwalls.com)

lazywealth: for more on the Ad Mod please ask in the Ad Mod's topic or at smfads.com (their support site), this is not relevant to this tip/trick.

ZitatQuote from: ccbtimewiz on April 30, 2008, 03:01:10 PM

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

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/


That works perfect!

I've installed the mod about 1 hour ago and so far I haven't seen any favicon on my forum :(, how long should I wait until it's going to work  ???

Did you add favicon.ico to the right directory? If so please can we have a link to your forum?

For my part I did add the favicon.ico to the right directory :D But, please help and my URL:  http://www.libelcom.com/community/

Thank you!

I didn't see a file for favicon.ico either in www.libelcom.com/favicon.ico (where it really needs to be) or www.libelcom.com/community/favicon.ico (where it wouldn't work anyway)

Really? in that case, please guide me through it and explain to me how to add it correctly (step by step pls :)) Thanks...

Where did you put the file? And where is your forum?

My forum is http://www.libelcom.com/community/ so, I added the favicon here: /public_html/libelcom/community/favicon.ico

Or should I have added it somewhere else?

It appears that favicon.ico there is actually a folder as evidenced by hxxp://www.libelcom.com/community/favicon.ico/ and indeed the icon appears to be hxxp://www.libelcom.com/community/favicon.ico/34-favicon.ico

You need to move that to become hxxp://www.libelcom.com/favicon.ico

Well, http://www.libelcom.com/ is my main website, but I moved the favicon.ico to that URL anyway. But after moving it, restarting my pc (twice!) and have been waiting for almost 4 hours now, there is still no favicon on my forum :'(

Other idea's?

That's because it wasn't done correctly.

The actual image is currently visible at hxxp://www.libelcom.com/favicon.ico/34-favicon.ico

You need to move that 34-favicon.ico file up a level, delete the favicon.ico folder, then rename 34-favicon.ico to favicon.ico.

Yes, I did it!! Finally! It looks very cute ;D

Thanks for your help, Arantor The GREAT! :)

I think you could make this more simple for the noobs cause I had alot of trouble figuring out this tut. Here is how I added my favicon.

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

2. Follow Method #1 - Adding the calls to your template.

3. Make your favicon and upload it to a image hosting site.

4. Configuration>Themes and Layout>Themes and Settings>Pick your Theme>Theme Options and Preferences> Favicon Image URL: Add your image address from hosting site. Done!

Hello,

I´ve trouble in installing the MOD.

I use RC3 and Theme "Actualism"

When I try to instal it appears erros so I don´t will instal after know it´s save..hehe

Can anyone help?

Problem already solved. Thanks anyway

Zitat von: RiDFiCK in April 08, 2010, 08:12:23 NACHMITTAGS
Problem already solved. Thanks anyway

can you share ho you fixed it for everyone that will find this topic in future?

As I say on the first post i´ve made. Before installing it says that it have found errors. So normaly we shouldn´t install.

But I´ve decided to get the risk and installed anyway. And it work. No problem.

RC3+Actuaism Theme, work don´t worry about it. :D

Cumps

sorry but i have the same problem. already maked change inside index.template... but i can;t find whre write my configuration setting under 2rc3... readden the post before... but without find the form tu put the favicon url..

Simple way to  Add a favicon:

Most browsers search by default for favicon.ico in the root folder of the website / blog the access. So it's enough to place your favicon.ico  in the root folder without adding additional code and the favicon will be displayed. However the code below should be used, especially if the favicon is not located in the root folder.

Enjoy!  ;D
PrintingHost.com

This is great.  Good how to advice.  Just what I was looking for. 

P.S. That picture of the pole vaulter (im assuming), is smoking  O:)

Worked great. The .ico part didn't work so i just changed the link to .png aswell as the picture then it worked fine. Thanks.

The normal <link rel="shortcut icon" href="Themes/default/images/favicon.ico"> works fine on the main page but not on any others, i've installed and tried anything to get the icon on all pages but it just wont work, anyone know how to fix this ?

http://sg-carterpack.com/index.php

Hello, is there a current mod to add favicon? I get the statement that the one stated here is outmoded.

Zitat von: sieemma
Hello, is there a current mod to add favicon?

What version of SMF? The mod should still work for you if you are on the 2.0.* branch. If there are error shown during the installation, the mod's page explains how to add the small bits of code manually.

ZitatI get the statement that the one stated here is outmoded.

Try simply uploading your favicon.ico file to your forum's root folder. Most modern browsers will soon pick it up and start using it.

Except for older versions of IE... which is why I'm planning on implementing this manually as soon as I have the time.

Zitat von: GigaWatt in April 26, 2018, 07:03:55 NACHMITTAGS
Except for older versions of IE...

Which NO ONE should be using..........just sayin.......

I think there is also a plugin on Wordpress for Favicon. Can we use it too?

You can't use WordPress plugins on SMF - but you don't need to, just uploading a file in the right place is enough.

Thanks very much for this guide really appreciate it. I spent years emulating the favicon mod to work on newer SMF versions but it's now stopped working so this guide was great to find.

Great guide, after some time I got it to work as well :)