You are here: Home / Archives for free

How to Create a Favicon

June 18, 2009 By Regina Fried Leave a Comment

When you create a website, one of the things you should do before launching your site is create a favicon. A favicon is an icon that appears next to a URL in the address bar of a web browser.

To create your own favicon, follow these steps:

  1. Create the image you would like to use as your favicon using a graphics program such as Photoshop. If you don’t own a graphics program, you can use a free one such as GIMP. Because a favicon is tiny (only 16 pixels x 16 pixels), it’s important to keep the design simple.
  2. Save your design as a gif, jpeg, png, or bmp.
  3. Upload your image to one of the many favicon generators available on the Internet. I use the favicon generator at Dynamic Drive. Download the newly created favicon and make sure it is named “favicon.ico”.
  4. Upload your favicon to your website. It should be placed in the root directory of your website (do not place the favicon in an images folder).
  5. For HTML pages, place this code in the head section of each web page: <link rel=”shortcut icon” href=/favicon.ico”> — if you are using WordPress, you can find instructions on editing your page header here.

That’s all there is to it!

Sometimes you can’t see your favicon even though you’ve followed all the correct steps. If so, empty your browser cache and then refresh your page. Your favicon should appear.

Filed Under: All Things Web, WordPress Tagged With: DIY, free

Browser Woes

May 29, 2009 By Regina Fried Leave a Comment

You’ve finished creating your new website and sent it out into the World Wide Web. You’re so excited, you can’t help visiting it over and over, marveling at what you’ve accomplished (I know — I’ve been there). It looks great — looks great that is, viewed on your computer, using Internet Explorer (IE). But then a colleague calls to let you know that when he looks at your website, on his computer, it doesn’t look so great. In fact, it looks pretty bad. Why would this happen? It turns out your colleague doesn’t use IE. He uses Firefox or Safari or …

And that is the source of your problem: a website that looks good in one web browser, might not look good in another web browser. I call this the “Browser Woes.”

Let me explain.

A web browser is the software program you use to view web pages; you’re using one right now to read this article. Many people are surprised to learn that not everyone uses IE. In fact, there are many web browsers available — the most popular are IE, Firefox, Safari, Google Chrome, and Opera. Complicating matters is the fact that not everyone uses the most current version of a browser, so while you might be using the current version of IE (8.0), someone else might still be using IE 6.0. Websites also perform differently on different platforms (Windows, Linux, MAC OS, etc.).

Experienced web designers know that they have to test websites to be sure they work and look good in, at least, the most popular web browsers. When I’m creating a website, I use software to simulate how it will perform in various browsers. I also test it on different computers — both Macs and PCs. But what if you can’t do that? How can you test your website? Submit it to BrowserShots. Here is how the service is explained on its home page:

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

Browser shots is easy to use: enter the URL of your site and select the web browsers and platforms you want to check. Within 30 minutes, you’ll get a series of screenshots comparing, for example, how your website looks on a PC using Google Chrome to how it looks on a Mac using Firefox. Browsershots also allows you to click on each screenshot to see a larger image.

If you’re satisfied that your website looks good across the most popular browsers, you can launch it to the world. But if you see a problem, you’ll have to determine what is causing it, correct it, and resubmit the website to BrowserShots for another check.

If you notice that your site looks good in Firefox, but not IE (this is one of the most common problems web designers face), you might be tempted to simply slap a disclaimer on your website — something to this effect:

“This site works best in Firefox 3.0. Download it here.”

Don’t do it. You’re asking your visitor to take an extra step to view your site. And there’s a good chance that she might leave and go to a competitor’s site. Instead, fix the problem (try searching the web for help if you can’t figure it out on your own) or, if you can’t correct it, revise the website so the problem is eliminated.

Filed Under: All Things Web Tagged With: DIY, free, web tools

Image Search – Beyond Stock Photos

March 25, 2009 By Regina Fried Leave a Comment

If you need images for a project, you have a lot of affordable options. Why then, do so many of the images used on websites and marketing materials look exactly the same? Without breaking the budget, how do you find graphics that help you stand out — not blend in?

Popular stock photography sites like iStockPhoto and Fotolia offer images starting at $1.00. But many of their graphics look similar and have that unmistakable “stock” look.

The next time you need to do an image search, use Creative Commons and Flickr to find free images that don’t fit the “stock mold.”

To start a search, go to the Creative Commons search page and enter your search term. In addition to a general search, you can limit your options to works that can be used commercially or works you can modify. Select one of these modifiers if you’d like. Hit “go” and your search results should appear. If you do not get a list of Flickr photographs, make sure you have selected the Flickr tab (this is the default).

If you find an image(s) you want to use, give attribution to the photographer who took it. Many of the images I’ve used on this site were found on Flickr; you’ll notice that I give credit and provide a link to the original image location.

Finally, a note to you Firefox users: the search box of this browser has a drop-down menu — click on it, and you’ll see that Creative Commons is there. You can begin your Creative Commons/Flickr search without navigating to the Creative Commons site.

Filed Under: All Things Web Tagged With: free, Images