How to Create a Favicon For 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 have found the right tutorial. Today we will show you 2 methods to create your own icon (favicon.ico) for your tech blog. The first method will be done with the Favicon Generator on DynamicDrive which can be found here. This method is very simple and only requires you to have a gif, jpg, png or bmp image with a maximum file size of 150.00kB. Just select the image you want to use for your icon based on those guidelines and click the Create Icon button – wallah, a download link for your favicon.ico will be provided.

• Create the favicon.ico file using the DynamicDrive FavIcon Generator
• Save the favicon.ico file to your computer
• Log in to your website via FTP
• Upload the favicon.ico file to the root directory of your FTP (for example httpdocs or public_html)
• Add the following code to your header Indian.php file in the HEAD section * see bottom of post *
• If you are using The Thesis Theme for WordPress, just add the code above in Thesis Options / Headers

This is probably the easiest and fastest way to get your favicon up and running on your tech blog. The change should be immediate, but it may require you to clear the cache in your web browser. From my experiences tech blog , IE and Google Choma update the favicon almost immediately after reloading the page, but I have had Firefox up to a few days before the change takes effect. The second method of 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
• Find the “File formats” folder in 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, restart. Sometimes you need to restart the machine for the change to take effect
• Create a new Photoshop file 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
• Log in to your website via FTP
• Upload the favicon.ico file to the root directory of your FTP (for example httpdocs or public_html)
• Add the following code to your header.php file in the HEAD section * see bottom of post *
• If you are using The Thesis Theme for WordPress, just add the code above in Thesis Options / Headers

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