How To Add A Favicon To WordPress
So far on our journey to build the Niche Super-Site we have discussed:
- Definition of the Niche Super-Site case study
- List of Niche Super-Site design goals
- How to select your niche
- Choosing your keywords
- Choosing a domain name
- Setting up your niche site
- Making things look nice
- Installing Plugins
- Getting listed in Google
- Making Money with phpBay
- Adding PopShops to your site
- Adding Adsense
- Adding Amazon Omakase Widget
As I mentioned, I had Lasik (PRK, actually) last week, so I am just getting back to where I can see the computer screen. I am excited about the end result of 20/20 vision promised in 4-6 weeks, but the transition is a challenge for blogging.
Today, we'll talk about adding a favicon to your niche site. That silly icon beside the url at the browser address bar is called a favicon. Why bother? Well, I think that often times in blogging, as in life, it is the small things that matter. Favicons suggest a professionally maintained site, and a favicon can remind people to bookmark your site when they see that quite little icon at the top of their browser. Anything that adds that extra bit of trust that can help us monetize a click should be taken care of. Finally, adding a favicon is EASY, so we should do it for completeness.
Adding a favicon to WordPress is really easy, but it involves editing your theme.
- Pick a picture for your favicon. Something simple is most appropriate since the final image is going to be only 16×16 pixels. Not a lot of detail will be possible. Obviously, it needs to be a square image.
- There are free tools for drawing your own favicon, but I never use them as I cannot draw (and I have never tried the previously mentioned tool).
- There are free favicon libraries too. I never use them either, and I have never tried the previously mentioned site.
- There are free tools for reducing a pic you like to 16×16 for use as a favicon. That is what I usually do. For the Elvis site, I have located a jpg of the letter E and used a free site to reduce that to 16×16. That free site results in the creation of a favicon.ico file.
- Next, you need to upload the favicon.ico file to your WordPress site. I like to put the icon into ./wp-includes/images/, but you can put it anywhere you like as long as WordPress can find it.
- Next, find your theme header file. It should be in ./wp-content/themes/ in a directory named for yout theme (i.e. Prosense or K2, etc.).
- I like to take this moment to copy my current header file to a safe location for later retrieval in case disaster strikes.
- Using your favorite editor, open up your header.php file and locate the <head> tag.
- Add the following code just after the <head> tag but before the </head> tag: <link rel=”shortcut icon” href=”<?php echo get_settings(’siteurl’).’/wp-includes/images/’;?>favicon.ico” />
- Save the header.php file and reload your home page. You should see your favicon.
- If you do not (or if you get an error), check closely the path to the favicon file and the quotation marks above. Some editors will munge the quotation marks during cut and paste operations.
Thanks!
Topics remaining on my list for this niche super-site series include the following:
- Traffic strategy
- Really long tail keyword test
- eZineArticles Content
- Write your own content
- Set up AA404 plugin
- Set up a pseudo-link-directory as pillar content
- Remember to back up your data.
- Comment Kahuna
- Secure WordPress
- Blog by email
- Great podcasts
- Running adwords ads
- eBooks
- Other marketing ideas
- The 50 site checklist
- Others…
If you have a topic that you would like to see added to my list, please feel free to leave a comment. Thanks!
%RELATEDPOSTS%
If you want to spice it up a bit, try an animated transparent favicon. For that you will need special code for the head, as well as an animated gif or png file. It works on Netscape and Firefox. You will also need the static version for Internet Explorer which can’t handle the animated file, and just ignores it. Instructions are here at http://www.cathetel.com/favicon.htm
******************************************
great post! I’m always looking for ways to facilitate networking with like-minded individuals. I especially appreciate unique tools that help me harness the power of web 2.0 and social bookmarking sites so I can make good use of my time. There’s nothing worse than spending countless hours online to build your online presence, while losing valuable time that you could be spending with your friends and family. Luckily, I’ve found tons of useful tools to meet like-minded individuals and network super efficiently. In this age of user generated content driving up a website’s ranking, content is king and getting that content in front of the right people is the name of the game! Keep up the great blog.
—
Ana Hernandez, CEO Netrageouz.net
Thanks so much for the help, Mason! I really appreciate it. My Favicon’s up and running. I want to create a simpler image, but now I’ve been through the process once it seems pretty simple to make a new one. Thanks!
Thanks Gen — your site looks great!
If you want to create animated favicon.
You can use free tool, such as, animatedfavicon.com
Thanks for the great post Mark! I have been wondering how i can change that little icon for some time. Now that i know how to it, i have no excuse not to. Thanks again!