My Monkey Do

A Log of Coding Solutions

html

Favicon

by

Problem

When the simplest things don’t work it can drive you nuts.  I had a task to add a favicon to a website so that it shows in the browser.  To do this all I thought I had to do was get the PNG, convert it to a .ICO file on one of the many online converters and place it in the home directory of the website.  What do you do when the image shows at http://mydomain.com/favicon.ico but doesn’t show as the browser’s page icon?

Solution

  • Clear the browser cache
  • Make sure you have the link tag in the <head> part 
    <link REL="SHORTCUT ICON" HREF="/favicon.ico">
  • Go here and make sure your icon is up to the standards

When I looked at Firebug I saw that there was a tag <link rel=”icon” href=”” type=”image/x-icon” >.  I thought it was a little strange, but I also thought Firebug was just interpreting the icon location since it wasn’t in the source code I was looking at.  (Firebug shows the real-time values of elements instead of the actual code.  ie. if you use javascript to move an element, it will show the new coordinates instead of the original ones).

After a while, I found the website that validates favicons.  Once I saw that extra “image/x-icon” again, I looked through my PHP code and saw that it was including that, which is why I didn’t see it in the main html code.

Firebug

by

I don’t know how I used to develop web pages before Firebug.  It is the single best tool you can have when debugging a webpage.  If something doesn’t look right I open Firebug and find out what styles are being inherited.  If some javascript functionality is not working I open Firebug and enter debug statements.   If some ajax call is messing up and the page isn’t showing the response correctly, I open Firebug.

Installation

The best thing about Firebug is how much time it saves you on debugging.  Even better than it being free.  That’s a lot considering how I watch my money.   I only use Firebug with Firefox.  It can be downloaded at https://addons.mozilla.org/en-us/firefox/addon/firebug/.  What’s good is that it’s available on both Mac and PC.   Just click on the Add to Firefox button and it’s mostly done for you.  That easy.  A firebug was also developed for IE but I haven’t tried it recently.  I tried it a couple years ago and it didn’t help me very much so I stuck with just using the Firefox one.

CSS

When you need to see why an item on a webpage is not showing as its supposed to you can right click on it and select “Inspect Element”.  Doing this opens up the firebug window and it will tell you exactly what styles are being applied to it and what styles have been overwritten.  You can even change the values of anything you want to see the outcome in real-time.

Javascript

Browsers can tell you the last error code that happened, but firebug can let you watch expressions, look at the stack, insert breakpoints, and print out statements in the console.

Request / Response

Any and all requests to the server can be inspected on the Net tab.  You can see each javascript include file, each image, each ajax request.  This means that if an ajax call goes wrong, you can inspect the parameters that were sent and the response the page got back from that request.  It makes debugging a breeze.

Firebug can be downloaded here: http://getfirebug.com/