All of that effort for a stupid icon

April 10, 2004 - By ginny

Perhaps I should rename this category “Mindbendingly Boring Technical Details of a Blog/MT/HTML/CSS N00b.”

Honest, I’ve been on the Internet since 1994. Granted, much of that time was on AOL. And I freely admit that my technical expertise consists of my husband and the phrase “Honey? How do I…”

The other night I decided to try to get a “favicon” or favorites icon working. Remember, I’m still in Blogging: Stage 3. I’ll now define substages:

There must be something to blogs because so many people are into it, but I don’t have a clue.
OK, it does seem kind of cool and there is much, much more to it than I expected. I just don’t see any really practical applications.
Oh my God, the things I can do with this are coming to me faster than I can keep up with.
1. I’m specifically searching for cool crap to stick on the sidewall, similar to other bloggers’ cool crap.
2. I have to learn more about HTML/CSS
3. I need an editor or code generator to help me with this crap.
4. It’s quicker to just type it out.
5. Wait, I could use a macro in Moveable Type to do this… I think. Honey?
6. Somebody somewhere must have done this. Help me, Google!
7. I figured it out, partly/completely on my own. Thanks, Google.
8. Okay, I got the stylesheet/index/colors/banner/RSS feeds/buttons/stickers/CSS element/macro/favicon working. Now what else is cool?

I think I’m permanently stuck in a loop cycling through items 3a-3h.

Progress Report

“Blockquote” style element/macro combo now working.
Style element and macro for “code” tag still not working (see below, dammit).
Favicon now working in IE6 and visible on the address bar.

Shit. So anyway, I wanted that damn favicon to work (a “cool crap” item if there ever was one). I actually had it working, it just wasn’t visible in Explorer – a common problem. I talked to David, and eventually found the final piece at this website: I had to rename the icon file to something other than favicon.ico, and link to that new file specifically in the index file, thus forcing Explorer to download and apply the new file. This was in addition to some other steps.

Also, I had to remember that Moveable Type often does not like relative paths to images; it prefers full URL paths. I had originally specified a relative path in the line of code I’d added to the index; it’s now

So the steps were:

create 16X16 image. Create as 64X64 or 32X32 for better control, then reduce size.
use an icon generator to convert it to a favicon.ico file (Chami.com lets you use ANY size image, but it may be distorted, see step 1)
RENAME the file to something else, such as newicon.ico
upload to your website root directory (in Moveable Type, select local site path; leave form blank)
add “shortcut icon” link to index page file/template (use full site path, ie. “http://www.yoursite.com/newicon.ico”)
Save all files, rebuild, upload site, update your webpage/blog software, YMMV.
If using any browser other than Internet Explorer, relax and refresh. Tada! Your cool new favicon appears! Have the beverage of your choice.
If using IE (sorry), select Tools/General/Delete Temporary Internet Files.
in IE (sorry), delete History (or wherever your site appears in it)
In IE (sorry), delete your website from your Favorites list
Reboot
Light incense and pray to HTML gods to ward off IE, the Antichrist of Browsers
Display site. If “Tada!, the favicon shows in your address bar!,” have that beverage now.

IE is notorious for inconsistently showing the favicon. The kicker may be deleting ALL of your previous history. Also, if you click on the “down” button in your address bar and see any instance of your website with the old “E” favicon, don’t click on it, or it will reset the favicon again. However, if you see your website also listed there with the new favicon, click on that and it’s restored.

Everyone should now see this site with this new favicon, because renaming it will also force your browser (whatever flavor) to download and use the newicon.ico file. If it doesn’t… dammit all, anyway.

I generated it from the favicon generator provided at Chami.con, the people responsible for HTML-kit(see item 3c.) I had previously followed directions elsewhere for creating a 16X16 image file (it was cropped to an approximate 64X64 size, then reduced). I used something I had lying around that I had previously shed tears and blood over in my struggles with Photoshop Elements and my “cartoony” banner – an image with a transparent background, no less.

But that is another tale, and we are not going that way today.

And in conclusion, the real point of this point is to see if the favicon will appear when I look at it in Bloglines.

And now, on to Stage 4!