retinaHow to Create a Favicon.

favicon.ico for your Tech Blog

How to setup, market and monetize your Tech Blog
If you’ve ever wondered why some blogs and websites have a small icon (16×16, 32×32 or 64×64) in the address bar you’ve found the right tutorial. Today we are going to show you 2 methods to create your own icon (favicon.ico) for your tech blog. The first method will be done by using the FavIcon Generator on DynamicDrive.com which can be found here. This method is very simple and only requires that you have either a gif, jpg, png or bmp image with a maximum file size of 150.00kB. Simply select the image you want to use for your icon based on those guidelines and click their Create Icon button – wallah, a download link for your favicon.ico will be given.

Create the favicon.ico file using the DynamicDrive FavIcon Generator

Save the favicon.ico file to your computer

Login to your web space via FTP

Upload the favicon.ico file to the root directory of your FTP (example httpdocs or public_html)

Add the following code to your header.php file in the HEAD section

If you are using The Thesis Theme for WordPress, simply add the code above in Thesis options / Header Scripts

This is probably the easiest and fastest way to get your favicon up and running on your tech blog. The change should be instant, but it might require that your empty the cache in your web browser. From my experiences IE and Google Chome update the favicon almost instantly after refreshing the page, but I’ve had Firefox take up to a couple days before the change goes into effect. The second method for creating a favicon.ico file requires that you have Adobe Photoshop.

Download the ICO (Windows Icon) Format for Adobe Photoshop here.

Extract the zip file

Locate the “File Formats” folder inside your Photoshop Plugins folder

On Windows move the ICOFormat.8bi file to this folder / on OS X/Classic move the icoformat (CS2/Mac version is ICOFormat_cs2.plugin) / on 68K MacOS X, icoformat (68K)

Quit Photoshop, relaunch. Sometimes you might need to restart the machine for the change to take effect

Create a new Photoshop file either 16×16, 32×32 or 64×64 pixels, design your icon and when you are done click save – you will now be able to save the image as an ico file from the drop down list

Login to your web space via FTP

Upload the favicon.ico file to the root directory of your FTP (example httpdocs or public_html)

Add the following code to your header.php file in the HEAD section

If you are using The Thesis Theme for WordPress, simply add the code above in Thesis options / Header Scripts

Congratulations, you now have a custom favicon created in Adobe Photoshop. If you have any questions about creating or setting up the favicon.ico file for your WordPress tech blog please feel free to leave a comment below. We are always here to help and it’s our goal at TechBlogStartup to make your blogging as simple and straightforward as possible.