Learning how to put a favicon in your WordPress Website;
I always wondered how those little logo icons appeared on the left side of some website addresses and what they were so I decided to figure it out last night. My new favorite place to learn about all things web is You Tube, so off I went to the show.
Turns out they are called Favicons and it is not all that hard to insert them into your WordPress site.
- Select the logo or icon you want to make your Favicon from. It needs to be very simple, as it will be reduced down to a tiny size.
- Use Photoshop or some other photo editing program (if you don’t have one, go to Google and type in free photo editing program. There are lots of them out there.) to create the artwork that you want to use as your Favicon. The file should be 16 pixels x 16 pixels. Save it as a jpeg or png file.
- Go out to Google and type in Favicon generator and there are a lot out there. I have been using this website http://www.htmlkit.com/services/favicon/ and it is very easy. Just follow the instructions. (I pulled the rest of the steps directly from the WordPress.org. If you would like to read the original article go to http://codex.wordpress.org/Creating_a_Favicon)
- If there is already an old Favicon.ico file in your current theme’s main folder, delete it using FTP Clients. (I use Firefox’s FTP (it’s FREE)).
- With an FTP Client, upload the new favicon.ico file into your current theme’s main folder.
- Upload another copy of your favicon.ico file to the main directory of your site (ie. http://example.com/favicon.ico). This will display the favicon in your subscribers’ feedreaders.
- In order for your favicon to show up in some older browsers, you will need to edit your page header
- Go to your WordPress Administration Panel.
- Click on Design (called Presentation in WordPress 2.3.x and below, and Appearance in WordPress 2.7+).
- Click on Theme Editor.
- Select the file called Header or header.php to edit the file.
- Search for the line of code that begins with <link rel=”shortcut icon” and ends with /favicon.ico” />. Overwrite it, if it exists, or add the following code below the <head> HTML tag.
- <link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico” />
- Save the changes.