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