HaggardHosting » Website Design

Easiest way to create Favicon

Glenn Haggard — Sun, 17 May 2009 03:32:24 +0000

Also known as favorite icon, website icon, shortcut icon, url icon, bookmark icon.

The power of marketing is amazing. Humans get accustomed to seeing certain things (like logos) and immediately recognize and have a sense of comfort with that household product. The favicon is an excellent branding tool. Not only does it show up next to the address bar in your browser, but it also is displayed on each tab (assuming you are using a browser that supports tabs), and also in your favorites. The human eye will focus on the icon as soon as it’s recognized and disregard the text.

To create a favicon you must first have an image that will be your logo. The image has to be in either 16x16px or 32x32px size and either 8-bit or 24-bit color. Once your image is selected to easiest way to get it to the proper size/format is to use a website the creates it for you. Google for the word "favicon" and you will get many hits that will allow you to just upload your image and then you can download the finished result. Here are a couple of examples:

http://www.favicon.cc/
http://www.html-kit.com/favicon/

Once you have your image upload it to your webserver. Then, modify the your code between the and of your website with the following text:

If you are using WordPress this will be in the header.php file within your theme.

How to test your website with a different browser

Glenn Haggard — Mon, 05 Jan 2009 14:00:40 +0000

Who’s running Ineternet Explorer 6 anymore? Or even Windows XP? Well, I guess some people are. So, if you’re developing a website and you need to know how your website looks using different browsers on different operating systems, you’ve got a challenge. You could load a virtual machine and then install the version of browser that you want to test, but there are so many different combinations. That’s a lot of work!

I found a free tool that will save you so much time.

http://www.crossbrowsertesting.com/

This website offers several different browser/operating system combinations. I used this to find out that Internet Explorer 6 doesn’t support transparent background in PNG files.

Removing IMG (image) border using CSS

Glenn Haggard — Mon, 29 Dec 2008 14:00:38 +0000

Most people use an editor when creating blogging or creating their website. Adding an image to the website and/or blog entry is simple because most editors have a button that prompts for the source of the image and then creates the code with the proper alignment. For example:

Well, if you want your users to be able to click that image as a link to open another website or document it might put a blue hyperlink border around the image. Most website images are designed that most people understand that it’s a link without the link border. In fact, most people would consider it a bit old fashioned to see a link border around an image. You might be using a theme for a CMS like WordPress or Jumla that has already taken this into consideration. If not, there are a couple of ways to remove it.

First, you can modify the HTML code directly. Using the previous example it would look like this:

style="border-style: none" src=http://www.yourdomain.com/your-image.jpg />

Second, you can modify the CSS (Content Style Sheet) which is a much more efficient way. Using an external CSS allows for all pages to be updated at once. To use an external CSS you must call it out in the of your HTML. If you’re using wordpress this is most likely located in the header.php file of your theme. An example would be:

In WordPress header.php:

” type=”text/css” media=”screen” />

In HTML website:

Then, once you have an external style sheet just add the following as a new line:

img a border:0;

Refresh your website and the border around all images should be gone.