Have you ever noticed that many sites like Google have a favicon, which is a cute and tiny icon in the URL box? You may find it that you want your own, so your readers can find it easy among the address bar or favorite’s window. Here is a tutorial that is just on that, but please keep in mind that this is only for self-hosted WordPress blogs. This isn’t for blogs that are hosted at Blogger or WordPress.com; this is for those who can access their files and site root file. So grab a glass of tea and be sure to print this out or bookmark it if you need it later.
Step 1- Pick Your Design
Remember that this icon will be 16×16 by the time that you are finished with this, so you want it to be simple and good enough to be able to read it once it is 16×16. I chose a really simple MVR, which stands for Miss Virtual Reality. It fits the size nicely and I could use my desired color scheme easily enough with 3 letters.
Step 2- Create The Proto Type
Open up favorite art program or whichever one you can use the best. I will be using MS Paint, since most people have it and it will do the job for a simple proto type. However, I do use Win 7, so my MS Paint supports PNG files, which is the format that l will save the proto type as. If you do not use Win 7, download a freeware that does support PNG files like GIMP or Paint.NET.
You will need to go to the edit button on the toolbar to access the resize option. Make sure that you will be resizing the pixels for this image. I chose 300×300 since that would give me a big canvas to use and have room for mistakes without screwing up the whole file.
Step 3: Draw
Once your canvas has been created, draw the design that you wish to use. I wrote out MVR in 2 colors, in a font that looks good and big enough to see when I do shrink it down in size. Once the design is finished, you can save it as a PNG file in a name at a folder that you will remember.
Next you will go back to step 2 and resize this image. Make it 16×16 and resave it as the PNG file. This file will be the one that you will convert to .ICO.
I used ConvertICO.com because it is free and online, so no need to download any software for it. Go on to the site and upload the file that you wish to convert. Once the file has been converted to ICO, you will be taken to a page that tells you how to save it.
6: Upload It To Your Site
Log on to your sites file manager or use your FTP software to upload it to the http://yoursite.com/ root folder. Do not upload it to your WordPress folders or any other folde. Just upload it directly to your root folder.
7: Insert It
The final step is to log on to your dashboard for WordPress and access your theme editor. Open header.php and insert this underneath head tag.
<blockquote> link rel=”shortcut icon” href=”yourfilesname.ico” </blockquote>
Make sure that it is before the closing head tag and save the header.php file. Then refresh your site, once it reloads you should see it at the address bar.
Want more how-to, guides, blogging tips and tech news? Subscribe to my RSS feed and you will get an email whenever I update. Best of all, it’s free!