Get a Favicon for WordPress
I have put off getting a favicon for ProWebWriter since I launched the site. Those tiny pictures fall to the back burner rather easily, but I came across a favicon generator on StumbleUpon today and decided to throw one together real quick.
That's Nice, But What is a Favicon?
favicon (fav-uh-con)
noun
– a 16×16-pixel icon associated with a particular website, usually displayed before the URL in a browser.
"Favicon" is a combo of the words "favorite" and "icon". They first became popular in older browsers so that users could easily recognize their favorite bookmarks.
The red squares in this image indicate the favicons.
Why Do I Need One?
You don't need one. Like I said, I ignored the fact that PWW didn't have one for well over a year. The favicon is simply an attention-getter. When someone adds your site to their bookmarks, your favicon will appear in the listing with your URL. Also, since most browsers have all those convenient tabs, favicons help users identify your site quickly while they are browsing or working. Having a favicon surely won't make you or break you, but it can't hurt. Not to mention the implication toward your site being a place for professionals.
Tell Me How To Get One Already!
Alrighty!
You need a source image. I'm going to assume that you have some basic graphics skills and a graphics editor like Photoshop or an online one like SplashUp. If not, skip this part and Contact Me instead. I can help.
Here's the specs I used for my source image:
50×50 pixels — It needs to be square
72 dpi — Standard web quality
Colors directly from my color scheme
I saved the final as a JPEG and was able to use that with no problems in the next step.
Step 1. Upload your source file to Favigen.
Navigate to your source image on your computer by clicking the Browse button.
Select your size using the drop-down menu. Most favicons are 16×16 pixels.
Click the Create Favicon button.
Favigen will generate your favicon file and you can download it to your computer. The file will be automatically named Favicon.ico
Rename the file with a lower-case "f" like so: favicon.ico
The next part of this tutorial will assume you know how to upload files to the domain you have WordPress installed on using an FTP Client. Again, if you need help with this part, Contact Me.
Step 2. Remove any old favicon.ico files from the main folder of your current WordPress theme.
Step 3. Click Appearance in the left navigation of your WordPress Dashboard. A menu will drop down beneath Appearance.
Step 4. Click Editor underneath the Appearance menu. This will open the WordPress Theme Editor.
Step 5. Click Header under Templates to the right of the Editor window.
Step 6. Find the following line of code between the tags and remove it:
<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
*TIP* The tags probably won't be close to each other. You really only need to find one. Make sure you're not posting your code inside other scripts or code. Find the tag and create a line above it by pressing the Enter key. Paste your code there.
Step 8. Click the Update File button under the Editor window to save your changes.
Step 9. Clear your browser's Cache and restart it to view your new favicon.
That's it! Now when users load your site or save it as a bookmark, your favicon will come to represent your site as a quick visual reference.
Sources:
http://codex.wordpress.org/Creating_a_Favicon
http://www.upvery.com/5103-why-is-it-important-that-your-website-have-favicon.html
