THAT Blog: Digital & Inbound Marketing | Web Design WPB

Internal Links with Favicon using jQuery

Written by Ronald Busky | Mar 9, 2009 11:00:37 AM

After thinking about doing something with favicons and links, I came up with this very simple jQuery Plugin that would allow all the internal links in your website to actually have your own favicon implemented on the left side of the link.

First of course, you will need jQuery, which you can always download on the jQuery website.

Then you will need the internalFavLink plugin.

Here are some screen shots:

DOM

RESULTS

So some things I thought about before adding this to the blog.

1. What if I don't have a favicon? Well, then either create one from an image and use this favicon creator tool from Dynamic drive, add it to your site and you will be able to use this plugin.

2. What if my favicon is a .png and not an .ico file as in the plugin? This is simple as well, just find the code in the javascript file called favicon.ico and change it to yours.

3. What if I want the favicon to be after the link? This is also simple; in the plugin javascript, just change where it says "prepend" to "append".

The plugin is very simple. So if anyone has any ideas on how to improve please let me know.

You can also see the Internal Favicon Link jQuery Plugin in action!