How to display your website icon/logo in the address bar and in the bookmarks list

How to display your website logo on the address bar and in the favorites list

How to create Favicon (How to create Favicon in WordPress)

Creating a Favicon (Installing a Favicon in WordPress)

A favicon (short for "favorites icon") is an icon associated with a website or webpage intended to be used when you bookmark

the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually.

A favicon is typically a graphic 16 x 16 pixels square and is saved as favicon.ico in the root directory of your server. You

can use a favicon with any WordPress blog on a web server that allows access to the root directories.

Creating a Favicon

A favicon can be easily created using any graphic program that will allow saving of .ico graphic files, such as The GIMP.

There are also online services that will allow you to create a favicon for free.

The image should be clear and is usually designed to match your blog image and/or content, a big task for something so small.

To prepare the image to be saved as favicon.ico:

1. By cropping or adding space around the image, make the image square.
2. Resize the image to 16 x 16 pixels.
3. Save the file as favicon.ico.

If using an online service to create your favicon, such as favicon.co.uk, follow the instructions provided by the site. Then

download the image of the favicon.ico to your computer.
Installing a Favicon in WordPress

If there is already an old favicon.ico file in your current theme’s main folder, delete it using FTP Clients.

1. With an FTP Client, upload the new favicon.ico file into your current theme’s main folder.
2. 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.

1. Go to your WordPress Administration Panel.
2. Click on Design (called Presentation in WordPress 2.3.x and below, and Appearance in WordPress 2.7+).
3. , Click on Theme Editor.
4. Select the file called Header or header.php to edit the file.
5. Search for the line of code that begins with . Overwrite it or

add the following code below the HTML tag.



1. Save changes.

To see your new favicon, clear your WP-Cache and your browser’s cache. You may need to restart your browser in order to see

the new favicon.


http://codex.wordpress.org/favicon.ico


Go to this website http://www.html-kit.com/favicon/ to create
favicon.ico.

For HTML

Now that we have the logo/icon, we have to make it available. There are two means of doing this:

* The first way to link your logo is by simply placing it in the core directory of your web site with the file name

"favicon.ico". For example, if your site is 'www.ilovehubpages.com', your logo/icon should be at

'www.ilovehubpages.com/favicon.ico'. Web browsers will look for favicon.ico whenever your site is added to a favorites list

or is displayed in the address bar. If found, it will automatically appear next to your URL.

* For those of you that do not have access to the core directory of your web site, there is another means to add this

logo/icon to your URL: by pointing right at it through the HTML source code. In this case, you can save your logo/icon with

any .ico filename you choose, but make note of the location (either the full URL path, or relative path from the document you

are linking). All that needs to be done now is placing some code between the and tags of your HTML source

code.

Example One:



Example Two:



Example Three:



Take note that both full and relative pathing works for this HTML snippet.

http://hubpages.com/hub/shortcuticon