Categories
Uncategorized

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’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 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 *see bottom of post*

* 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 *see bottom of post*

* 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.

Leave a Reply

Your email address will not be published. Required fields are marked *