Tutorial

First you will need to create a favicon.ico or download one from some where.

Here is just one example of a site that you can create one at:
http://www.favicon.cc/
-otherwise just search google for favcon.ico for a ton of free creators and tools. You can probably find a nice one someone has already created if you want to save yourself some time.

Add to:
yoursite.com/templates/base/_header.html

<link rel="shortcut icon" href="/favicon.ico" >


Must be in the <head></head> tags, after the meta name keywords is a good spot.

First backup the original file yoursite.com/templates/base/_header.html just in case.

Then open it up with a text editor.

Original _header.html looks something like:

<!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" xml:lang="en-US" lang="en-US">
<head>
    <title>How to Add a Favicon.ico to Your Site</title>
    <base href="__site_url__" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="description" content="__meta_description__" />
    <meta name="keywords" content="__meta_keywords__" />

    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="__css_dir__general.css" rel="stylesheet" type="text/css" />
    <link href="__css_dir__anchor.css" rel="stylesheet" type="text/css" />
    __styles__
    __java_script__
    <script src="inc/js/functions.js" type="text/javascript" language="javascript"></script>


Change/Add to the _header.html like:

<!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" xml:lang="en-US" lang="en-US">
<head>
    <title>How to Add a Favicon.ico to Your Site</title>
    <base href="__site_url__" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <meta name="description" content="__meta_description__" />
    <meta name="keywords" content="__meta_keywords__" />
    <link rel="shortcut icon" href="/favicon.ico" >

    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="__css_dir__general.css" rel="stylesheet" type="text/css" />
    <link href="__css_dir__anchor.css" rel="stylesheet" type="text/css" />
    __styles__
    __java_script__
    <script src="inc/js/functions.js" type="text/javascript" language="javascript"></script>


If yours isn't in your main directory yoursite.com, such as a subfolder/directory instead like:
yoursite.com/dolphin

You will need to update the code above for the _header.html accordingly such as:
<link rel="shortcut icon" href="/dolphin/favicon.ico" >

Or you may even need to include the full path like:
<link rel="shortcut icon" href="http://www.yoursite.com/dolphin/favicon.ico" >
(if so replace the yoursite.com part with your actual site/domain name)

Save changes and re-upload over-writting the original.

You must create and upload a favicon.ico to your main directory(yoursite.com/favicon.ico. Some modern browsers automatically look for favicon.ico in your main directory. However there are some browsers that don't so it is a good idea to add the code to the _header.html for the browsers that don't.

It should be named favicon.ico for best results, as many modern browsers will look for this file automatically.

 
Written By
Tutorial by: Jeremy LeSarge (AKA Ray)

I am the owner and administrator of DialMe.com. I write Tutorials for Boonex Dolphin as well as tips and resources surrounding website programming and development. I enjoy working with WordPress, SEO, and Web Hosting / Servers. I also maintain a WordPress Blog here on this site where you will find a variety of technology and webmaster resources.

Actions
Recommend
Sponsored Links