« Microcontroller Programming | Main | New Flashlight Wiki »

Sunday November 28, 2010

Favicon

A lot of web pages include a very small icon that will show up in the URL when you are visiting the site and in your bookmarks when you bookmark that page. This feature was first introduced by Microsoft for Internet Explorer but other browsers picked it up. The icon file itself is usually called favicon.ico ("favicon" being short for favorites icon, since it shows up in your favorites). The one for this website is this:

mac5ico.png


I was playing around with creating a Flashlight Wiki as an alternative to the one I have been contributing to which has a lot of restrictions on it but still gets hit by spam all the time. I wanted to make a favicon for it, so I made a simple one at the required 16x16 pixels in Paint that was a bitmap that looks like this, which is what a flashlight LED looks like:

led.gif

Once I made a bitmap, I found an online tool that will convert a bmp file to an ico file and then saved that to my hard drive. The wiki itself is in a folder, but if you ever do an upgrade to the wiki software it is better if you don't have files you will need somewhere in the thousands of files that are part of the wiki installation. So I just put the file on the root of igirder.com. So then I needed to incorporate the code to make the icon part of the web page and found a tip where i could add a line to my localsettings file in my wiki folder that would point to it, by adding this line:

$wgFavicon = "$wgScriptPath/path/to/your/favicon.ico";

I visited the Wiki and the icon didn't show up right away, but after I refreshed there it was. Perfect!

Then I visited my home page and there it was again! I went to Wikipedia to look up favicons and the article said that the way it was originally set up, all you had to do to get a favicon to show up was to put the file in the same directory and the browser would automatically pick it up. After I read that, I remembered that's how it works. So because the icon was in my main folder, all of my web site's pages were showing up with the icon. No problem, I move the file to the wiki folder and modify the localsettings again to point to the right place.

But when I visit my non-wiki sites, it still shows the icon! And they are on my toolbar where I have shortcuts for my home page and movie review page. Plus I notice that when I load my home page, for some reason, I'm pulling something from specificclick.com which is not part of my web page. So now I'm thinking I've put some kind of virus in my icon that's doing who knows what. And I notice that my tiny little 16x16 icon has a size of 60kb which seems pretty excessive for a graphic that only has two colors.

It turns out specificclick is part of SiteMeter and there is some controversy about when they partnered with specificlick. And I don't think there was a virus, but I converted the bmp file in FastStone Image viewer and the size was smaller. Then I found a different online converter and got the size down to 1kb which is more like it. The colors were a little different, but at this size, I don't think it matters.

I still have the problem that the icon won't go away, but I guess I'm not infected and the file size is reasonable. But getting the icon out of Firefox's cache isn't easy. I cleared the history for the last hour and then for the whole day, and it was there. I restarted Firefox, reloaded my pages, deleted the bookmarks and put them back, and it was still there. Turns out this is a known problem and the solution involves installing some kind of database plug-in. But I also tried editing the bookmarks file and although I didn't modify the bookmarks because the icon didn't seem to be stored there anymore, when I tried to open Firefox, it wouldn't open anymore. This is a bigger problem than a funky favicon.

So I wound up uninstalling Firefox completely and then reinstalling which means I lose all of my bookmarks, all of my saved passwords, but at least the favicon is gone.

Post a comment