Version: 32.1
Revision: 46 Build 32
How to create favicon for wordpress and html format
Introduction: this article will instruct you to create an icon for your website and Wordpress. This tutorial is also simple and straight forward, so you don’t have to fiddle about and get bored!
Right, lets get on with the article and enjoy your new fav-icon!
Software required
————————-
1.] Gimp v2 - http://www.gimp.org
Description: if you want to create your own stylish – icon, please use this application (freeware) to create one from scratch.
2.] Notepad++ - http://notepad-plus.sourceforge.net/uk/download.php
Description: this software will help you to add your favicon source code.
It also has syntax highlight to show you where the head and body page are located!
But, it will also give you lines in numbers so that you can quickly jump to that line in a flash…
3.] VSO image resizer - http://www.vso-software.fr/products/image_resizer/
Description: you’ll need this application to shrink your images into small sizes.
————————–
Part One: Create your own fav-icon
————————–
1.] download Gimp photoshop and create your “image-icon”.
2.] Save your image as a “PNG” or “GIF” format with these resolution.
Notes: you’ll need to use “VSO image resizer” to adjust your image resolution…
Image size
————————–
16px X 16px
32px X 36px
————————–
3.] Go to these website and convert it to an “icon” file.
Site One: http://tools.dynamicdrive.com/favicon/
Site Two: http://www.html-kit.com/e/favicon.cgi
4.] Save your icon file to your website folder or upload them to an image – hosting service.
Guidelines: if you have Wordpress as your website, please go to: Part Two. But, if you’re using Dreamweaver or MS Frontpage, please look at Part Three.
Part Two: How to insert “fav-icon” into Wordpress 2.7xx
————————–
1.] Upload your fav-icon into your main folder.
Example: http://example.org/favicon.ico
<link rel=”shortcut icon” href=”/favicon.ico” /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
Notes: if your blog is from a subfolder, you’ll need to use this string instead of the above…
Example: http://example.org/blog/favicon.ico
<link rel=”shortcut icon” href=”/blog/favicon.ico” /> <link rel="icon" type="image/x-icon" href="/blog/favicon.ico" />
2.] Paste the following code into your theme’s “header.php” file.
However, you’ll need to place it after the “meta tags”. However, if you didn’t do this correctly, your Wordpress blog will trigger an error – syntax. So, please be very careful!
Notes: your header.php file is located in the following directory…
without subfolder: public_html/wp-content/themes/your-theme-name/
with subfolder: blog/public_html/wp-content/themes/your-theme-name/
your-theme-name = the theme which you are using.
3.] Save your header.php file and exit your browser. After that, you’ll need to clear your “internet cache” and “internet temporary files”.
4.] Go back to your website and take a look at your address bar!
5.] Done!
Part Three: How to insert “fav-icon” into Frontpage and other html designer software
————————–
1.] Upload your fav-icon into your main folder.
Example: http://example.org/favicon.ico
<link rel="shortcut icon" href="favicon.ico" /> <link rel="icon" type="image/x-icon" href="favicon.ico" />
2.] Paste the following code into your web-pages “header” and you’ll need to place it before the “meta tags”. This will allow your “x-icon” to load first!
3.] Save your web-pages; clear your “internet cache”; “internet temporary files”.
4.] Go back to your website and take a look at your address bar!
5.] Done!







