How To: Manually Install Favicon Correctly

May 20, 2010 | By | 3 Replies More

Reading time: 3 – 5 minutes

Managing multiple sites has taught me the many different tweaks that can be done on a website and one of which was installing favicon to add a distinct identity to your site. So if you start a website a good looking favicon is a great add on.

Favicon or “favorites icon” is usually a tiny graphic which associates your site for display on browsers like Internet Explorer, Firefox, Chrome, etc.

FaviconThis icon can be found in the browser’s location field next to the site’s name in a bookmarks list, along with the site’s title in a tab on most browsers or even next to the site’s feed on many feed readers.

There are countless sites on the web that provides an online interface for creating favicons as many as there are blogs that have written topics on how to install a favicon on a website or php file. The later however for a long time has been disappoint as not most blogs have covered the topic succinctly.

Let me get this problem straightened out once and for all with this blog post on how to install favicon correctly on your website.

First thing is to have a favicon file which you have generated online or through some graphic software. The file extension is .ico which means a complete favicon file is “favicon.ico” which can also be in many forms such as youricon, or myicon depending on how you name it as long as the file extension remains at .ico or dot ico (when read).

On this tutorial, I’ll use “favicon.ico” as the file for simplicity.

Next thing to do is locate the root directory on your server e.g., public_html/yoursite.

Depending on the template or theme you’re using for your website, installing the favicon can be as simple as copy pasting a strip of code.

Please note that some scripts already include a favicon.ico file on the root directory of your server so you only need to locate them (if there’s any) and replace it with your own favicon file via FTP (otherwise proceed to your template or theme’s header.php file).

Once you’ve done that, locate your site template’s header.php file and place this code:
<link rel=”shortcut icon” type=”image/ico” href=”/favicon.ico” />

between the <head> and </head> section. Normally, your header.php looks like this:

DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
<head>

some codes here

<link rel=”shortcut icon” type=”image/ico” href=”/favicon.ico” /> – this is where you have to place the code.
</head>

This expression href=”/favicon.ico” shows the path where the favicon.ico file can be found on your server. Here, we can say that it was in the root directory because of the trailing slash before the file name.

The above code therefore can also be written as

<link rel=”shortcut icon” type=”image/ico” href=”URL or location of favicon” />

where “URL or location of favicon” can be found in the media library on WordPress sites’ backend.

That’s it. If you have any questions or anything to add that would make this even simpler, leave it on the comments. If you find this post useful, please share this post.

Tags: , , , , ,

Category: tips and tricks

Comments (3)

Trackback URL | Comments RSS Feed

  1. My blog’s theme has this feature built-in, so I have no worries in this area. However, I do have other sites, most of which are not WP. I think I’m going to try this code out on them. Although I appreciate plugins and other built-in features that make things like these easy for me, I also have this side of me who wants to tweak things myself manually. Installing a favicon manually would be one of them.
    .-= James Moralde´s last blog ..Cool Laptop Mobile Desk At Home And Living =-.

  2. Mathdelane says:

    Hi James,
    While there are some WordPress themes that offers this functionality so readily that you only need to upload an image then place the link on some fields at the backend and you’re done, other themes don’t and some scripts don’t either so this tutorial will be helpful for the said task.

  3. josephleblanc says:

    Thanks for the tips…I think I’ve added favicons every way possible. Sometimes it’s an option in the wordpress theme, or a plugin. But if I can’t use those, I’m gonna use this post as a reference. Thanks!

Leave a Reply