Dave's Site - Millions Served.
<Table of Contents>
HTML Tutorial Chapters:  

HTML5 Basics - Web Hosting Ideas - CSS, Web Design, HTML, JQuery - Twitter - Learn on your iPad



HTML Tutorial

Converting a BMP (or JPG, GIF, or PNG) to
ICO for a Favorites Icon (favorite.ico)

Please read my main page describing the basics of favorite icons. This page is made specifically as an example to show you how you can convert a BMP, JPG, GIF, or PNG file to a favorite icon (favicon.ico). I use IrfanView as a sample program because it is free (for non-commercial use) and is handy to have on your computer for your graphics needs.

This chapter is a section of the multi-chapter HTML tutorial, HTML: An Interactive Tutorial for Beginners.

Other web site development sections you will find interesting as a web developer are the CSS tutorial, CSS: An Interactive Tutorial for Beginners and the web design tutorial, Dave's Web Site Design Guide: Tips and Tutorials.

This quick two page guide (page 1 below, page 2 here) will show you how to convert a graphic into ICO format on Windows using free software.

Converting my image to ICO format

Be rewarded 
with the Web's Premiere Rewards Site

I describe on the Favorites Icon page that your goal is to convert your image down to 16x16 pixels (16 wide, 16 high) at 16 colors.

Step 1: Make your starting image. For best results, use a multiple of 16 for the design. 16, 32, 64, 128, etc. This will let it have a clean simple conversion down. Save the image to a format IrfanView can load.

A. Many of you may wish to try this with MS-Paint if you do not have a program like Photoshop. Open Paint, then, change the "IMAGE ATTRIBUTES" size to 16, 32, 64, or 128, whatever you're comfortable working with. But remember, the Favorite Icon will shrink to 16x16 to get onto your web site, so you will lose a lot of detail.

Settings Attributes in Paint

Setting Attributes to 128

In this example, we set the attributes to 128 x 128 pixels.

Create your icon design with Paint, then Save it with format BMP (as favicon.bmp):

Save as BMP from Paint

B. Open IrfanView. Select File -> Open and find your newly created image.

C. Resize/Resample to 16 pixels wide, 16 pixels high.

Resize/Resample Screen IrfanView

Resize to 16 x 16 pixels.

continue in part 2, click here

Download the app that replaced this guide,
Web Design Basics for iPad to
Learn HTML and CSS Quickly.