This process can be done using FTP, but in this lesson I’m going to do it without, so hold on tight!!

If you prefer pictures over words, stop reading and just you play the video above this post! I’m sure you will find me to be quite the online thespian. But if you are a die-hard reader, this post will tell you everything you need to know about favicon making! So here we go!

First, what is a “Favicon” anyway?  Favicon stands for “Favorites Icon”. It’s a little custom icon that appears next to a website’s URL in the address bar of a web browser. It also shows up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows. And little would be an understatement! A Favicon is only 16×16 pixels in size.

So Mr. Web Guy, why would I use a Favicon anyway? Generally, bookmark lists get messy and cluttered. Having your bookmark stand out with a nice graphic reminder of your site is a great way to get noticed. HEY, LOOK AT ME AND MY COOL ICON!!!

 Now that we have that BS (basic stuff) out of the way, let’s put a little favicon on your WordPress blog.

In order to make this an easy process, you will need a few things. Here is the list, in no specific order:

1. A graphic for the favicon
2. Your WordPress administrator login access
3. Your cPanel login access
4. A bag of fruit snacks

You will first need the graphic you want for your favicon. It can be anything you want! But, there is something you should know. The image will be shrunk down to 16×16 pixels. Frickin small! So you might want to avoid a photo. It’s just that the image is so small; photos sometimes end up looking like a blur or a smudge mark.

A logo or an image seems to work the best. Take a look at Amazon, ebay and Google to see what they have done with their brands. There are places online you can go to and make one from scratch:

• http://www.favicon.cc/
• http://favicon-generator.org/

This method is ok for creating a icon, but you might find it a bit hard to work your way around  these programs; and quite frankly, you will get almost as much mileage out of just uploading a very clear image of a graphic you have.

Go to this website: http://faviconr.com. This cool site will take your image and convert it to a 16×16.ico file format.  Very slick. Then you just save the file somewhere on your computer so you can upload it.

TWT Note: http://faviconr.com

To get your new .ico image, just click the “Choose File” button on the faviconr.com site, find your image on your hard drive. Then click the “Generate Favicon” button and let the site do its magic! Within a matter of seconds you will have a spiffy new “favicon .ico” image to use on your WordPress blog.

Now let’s upload the new favicon .ico to your blog root directory. This may sound a bit techy, but it really isn’t. First, login to your web hosting cPanel and scroll down to the “File Manager” icon.

Once you’re in your WordPress files, look for the file named “wp-content” and double click to open it.

Then double click and open the “themes” folder.

Look for the blog theme you are currently using. Double click and open that folder.

TWT Note: If you change themes, you will need to move your favicon.ico image to the new theme.

This is what your WordPress Root folder should look like. If it does, you’re in the right place!

Now, upload your new favicon.ico file into this directory. Simple.

 Click the “Upload” icon in the upper right side menu on your File Manger page. This will open a new window and it will ask you to “Choose a file” and upload it. This is such a small file that it won’t take but a second or two. You will know it’s done uploading when the progress bar in the lower right hand corner of the page displays “Complete”. This part of your mission is now complete! Nice work!

 TWT Note: To make sure your icon is there, click the “Reload” icon just above all the files.

Now comes the really fun part…diving head first into CODE!!!!

I know what you’re thinking…if I see all that WordPress code, I’ll freeze! Like a deer in the headlights! What if I break my site??? What if I erase something important??? Well fear not my WordPress grasshopper. I have some very insightful advice for this part of the tutorial. Follow my instructions and you’ll be fine. If not, you’ll screw up your site and you will be down for days!!  LOL!  Just kidding (sort of). Really, this isn’t very hard. Let’s look. (To be on the safe side, you can always make a backup of the file you are going to edit, so you have a backup, just in case you do mess something up.)

First log into your WordPress admin and go to the “Appearance” tab.

Then go to the “Editor” tab and click on it. Below is what you will see once you click the “Editor” tab.

TWT Note: In the dropdown menu o the upper right, make sure your theme is picked.

Once you arrive here, make sure you are looking at the correct theme files. Look at the upper right corner of the page and make sure the dropdown menu has your theme picked. If not, click the dropdown menu and pick your theme. This will load all the pages for your theme.

TWT Note: Once you click this file, it will load all the code for that page in the editor window.

Here comes the tricky part. Scroll down the page and look for a line of code that looks something like this:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Find this line of code, place your cursor at the end of it and hit “enter” on your keyboard to make room for one small line of code that will be place directly under it.

Now place this code directly under it:

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />

Then, here we go, click the blue “Update File” button on that page. Wait to make sure it saved. Then go to the front of the site, refresh the page and you should see your new favicon in the browser tab!

TWT Note: If the icon appears, have a drink to celebrate! If it doesn’t, drink two and try again!

And there you have it WordPress fans! That wasn’t so bad, was it???

Now, a few more things you should know.

You could get by with using a .png, .gif or I believe .jpg image. You would just need to adjust the last part of the code you put in your WordPress header code to reflect that.

• <link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.png" />

• <link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.gif" />

• <link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.jpg" />

However, I have noticed that Internet Explorer won’t display the icon if it is not a .ico file. Same goes for some older browsers. So, to be on the safe side, I would just make your icon a .ico file and move on with life!

There, you have found another great nugget of wisdom from The Web Trainer. Or you have just found a new way to waste a little more time! Either way, I’m glad you stopped by and I’ll see you at the next tutorial!

Now, FTP may not sound like the most exciting thing you could read about, or watch a video on for that matter. Frankly, it’s not the most exciting thing to write about OR make a video on either. However, setting up an FTP site, more specifically Dreamweaver FTP, can make life as a web master or blogger a lot less stressful. FTP, or “File Transfer Protocol” is nothing more than a fancy acronym for the way to files can move from one computer to another over the Internet.

The reason I picked Dreamweaver as my FTP software is because it’s all I have used over the last 10 years. Yes, there are plenty of other FTP software products available: FileZilla, Cute FTP, just to name a couple. But to me, Dreamweaver is the tool of tools for the biggest chunk of the users across the globe. Now, many “Gear Heads” will tell you dreamweaver sucks, it’s too slow, it adds too much crap code to sites, blah, blah, blah.

Hey, if you’re one of those high end users (code cruncher) and you like to write all your code line by line, that’s awesome! But for the vast majority of site owners that need this level of access to their sites, Dreamweaver is by far the best.
This video demonstrates how to setup your files on your PC or MAC, create an FTP account in cPanel and get your dreamweaver FTP setup correctly. Easier than a two word crossword puzzle!
Enjoy rock stars!