Create your first icon

Windows and Macintosh icons

Using IcoFX you can create icons for the Windows operating system and also for the

Macintosh operating system. IcoFX allows you to draw your own icons. Using many drawing

tools and more than 40 effects you can draw your icons easily.

An icon file contains multiple images of different size and format. The operating system will

automatically choose the appropriate image to display.

Create the image

To create an icon using IcoFX follow these steps:

1. Start IcoFX.

2. Create a new empty image using the "File/New image..." menu item.

3. On the New Image dialog select the size 256x256 and the data type True Color + Alpha

channel

4. Draw your icon.

Create the icon from the image

5. Your image contains only one image format. Use the "Icon/Create Windows Icon From

Image..." menu item to create an icon from the image and add all the needed image formats to

the icon. The default settings on this dialog will do in most cases.

Use the "Icon/Create Macintosh Icon from Image..." menu item if you would like to

create a Macintosh icon.

6. If you would like to create Windows Vista compatible icons with PNG compression then

make sure that there is a 256x256 sized image in your icon and that the

"Options/Preferences/Options/Compress 256x256 images for Windows Vista" option is

checked.

7. Save the icon using the "File/Save As..." menu item. On the save dialog choose the desired

output format in the "Save as type" combo box.

For more information about the New Image or Create Windows Icon dialog consult the help

file of IcoFX.

Create icons from image objects

Image objects

Create the icon

Tips and tricks

o Change the background color

o Change the symbol color

o Stronger/lighter texture

o Symbol with gradient

o Fadeout texture

o Get additional image objects

Image objects

Image objects are premade images that you can use to create icons. You can make icons

simply by combining the image objects.

Combining Image Objects

IcoFX comes with a lot of preinstalled image objects. The image objects are located in the

"Objects" subfolder of the IcoFX installation folder. You can quickly access the image

objects using the Explorer panel. Pressing the home icon on the Explorer's panel toolbar will

take you to the folder with the image objects.

The Explorer Panel Showing The Image Objects

The image objects contain background images, borders, shadows, reflections, textures and

symbols for easier icon creation. The image objects are ordered in the following sub folders:

Circle - Contains circular image objects for creating icon backgrounds

Rectangle - Contains rectangular image objects for creating icon backgrounds

Symbols - Contains the symbol images

You can get additional image objects from here.

Create the icon

IcoFX has a special workspace set up for easier handling of image objects. It is called

"ImageMixer" and gives you quick access to the Explorer panel and the Layers panel. You

can select it using the "Window/ Workspace/ ImageMixer" menu item.

You can create the image by combining the available image objects. To add new image

objects to the image just drag the image object from the Explorer panel to the Layers panel or

to the sidebar of the Canvas window. Each image object will become a new layer of the

image. You can reorder the layers on the Layers panel by simply dragging them to the desired

position.

Drag the image objects to the Layers panel or the sidebar

Follow these steps to make your first icon using image objects. After this tutorial you will

have a good knowledge about the usage of image objects.

1. Make sure that the "ImageMixer" workspace is selected. You can select it using the

"Window/ Workspace/ ImageMixer" menu item.

2. Create a new 256x256 image. This image will be used to combine the image objects. To

create the new image use the "File/ New/ New Image" menu item. On the "New Image"

dialog select 256x256 as size and make sure that the background color is set to transparent.

New Image Dialog

3. On the Explorer panel press the Home toolbar button. This will select the "Objects" folder

where the image objects are located. Select the "Circle" sub folder. You can see the available

circle image objects in the Explorer panel.

Select the Circle folder

4. In this step we will drag the image objects to composite the image. The screenshots will

show the canvas window and also the Layers panel for easier overview.

Drag the "Shadow06.png" image to the Layers panel. This will be the shadow of the icon.

The shadow of the icon

Drag the "Circle - Blue Radial.png" image to the Layers panel. This will be the background

of the icon.

The background of the icon

Drag the "Reflection09.png" image to the Layers panel. This will be the reflection effect on

the icon.

The reflection of the icon

Drag the "Border Silver2.png" image to the Layers panel. This will add a border around the

icon.

The border of the icon

5. In the Explorer panel select the "Symbols" folder. Drag a desired symbol image to the

Layers panel. In this example we used "Cars Spades.png". Your image should look now like

this.

The finished image

If you dragged the images in different order then you can reorder them by dragging them to

the correct position in the Layers panel.

6. Create the icon from the image using the "Image/Create Windows Icon From Image" menu

item. On this window press the Recommended button. This will select all the needed image

formats for the icon. Press the Ok button. An icon is created with all the needed image

formats.

Create the icon form the image

7. Your icon is ready. Save it using the "File/Save" menu item.

The finished icon as displayed in Windows Explorer

Tips and tricks

Using the following tips and tricks you can customize your icons even further. It will teach

you how to customize individual image objects.

Change the background color

You can change the color of the background image object using the "Adjustments/ Hue and

Saturation" menu item. This will open the Hue and Saturation window where you can change

the color using the hue slider. Using the Brightness slider you can make the color lighter or

darker. Before opening the window make sure that the correct layer (the one that contains the

background) is selected in the Layers panel.

Change the color of the background

Change the symbol color

The problem with the symbol image objects is that they are white so that the Hue and

Saturation adjustment won't work on them. First use the "Effects/ Colors/ Red" menu item.

This will change the color of the symbol to red. After that you can use the Hue and Saturation

window to change its color like in the previous tip. Make sure that the correct layer is

selected.

Change the color of the symbol

Stronger/lighter texture

You can also add texture image objects to the background. Like "Texture08.png". The

textures are semitransparent images. If you would like to make it more transparent/lighter

then you can use the "Adjustments/ Opacity" menu item. Decreasing the opacity will make

the texture lighter. Make sure that the correct layer is selected.

Make the texture lighter

To make the texture stronger simply drag and drop it on the image more than once. The

textures will overlap each other making them seem stronger. On this image there are three

layers of "Texture08.png" over each other.

Stronger texture by adding it three times

Symbol with gradient

You can also have a symbol with a gradient. To do this create a new layer in the image and

hold the Ctrl key while dragging the symbol from the Explorer panel to the Layers panel.

This will not add the symbol in a new layer. It will create only a selection from the symbol.

The symbol as selection

Now you can use the Gradient tool to fill the selection with the desired gradient.

The gradient applied to the selection

Fadeout texture

Using the "Adjustments/ Fadeout" menu item you can fadeout layers. If you apply this to

textures then you can fade out textures of the image. Make sure that the correct layer is

selected.

Faded texture

Copyright © 2005-2013 IcoFX Software. All rights reserved.

Create an icon from an image

With the help of IcoFX you can convert your favorite image to icon.

To create icon from an image follow these steps:

1. Start IcoFX

2. Open the image that you would like to convert to icon, using the "File/Open" menu item.

You can use PNG, BMP, GIF, TIF, IFX, JPG or JP2 images.

3. The Import dialog will open, where you can select the part of the image that will be

converted to icon. Press The OK button.

Import dialog

The Import dialog will only open if the "Options/Preferences/Actions/Import" option is

set to "Show the Advanced Import dialog".

4. We want to make the background color (white) transparent. The only problem is that the

shirt of the dog is also white. We need to mask the shirt of the dog. First we select the whole

image using the "Edit/Select All" menu item. Then we change to quick mask mode by

pressing the "Quick Mask" button on the Tools panel. Using the brush tool we paint on the

area that we want to be masked, in this case the white shirt. The masked area will be

displayed as red by default.

We select the masked area (marked by red)

Exit the quick mask mode by pressing the "Quick Mask" button again. We can see that the

shirt of the dog is not selected anymore.

The selection now excludes the shirt

5. Open the Make Color Transparent dialog using the "Adjustments/Make Color

Transparent..." menu item.

Make Color Transparent Dialog

This adjustment will be applied only to the selected area. Set the color that we want to be

transparent (white), set a tolerance value and soft edge value to have nice softened edges.

Press the OK button when you are done.

The white background will be transparent now, while the shirt remains white.

The background is transparent

6. Your image contains only one image format. Use the "Icon/Create Windows Icon Form

Image..." menu item to add all the needed image formats to the icon. The default settings on

this dialog will do in most cases.

Create Windows Icon dialog

Use the "Icon/Create Macintosh Icon Form Image..." menu item if you would like to

create a Macintosh icon.

7. Save the icon using the "File/Save As..." menu item. On the save dialog choose the desired

output format in the "Save as type" combo box. Your icon is ready.

The icon displayed on the desktop

For more information about the used dialogs and the quick mask consult the help file of

IcoFX.

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Create an icon library

If you have many icons and you'd like to group them together you can create an icon library.

This way it is easier to handle and redistribute your icons.

To create an icon library follow these steps:

1. Start IcoFX

2. Open the Icon Resource Editor using the "Tools/Icon Resource Editor..." menu item.

3. To add icons to the icon library use the "Add" tool bar button. After you have added an

icon you can see the thumbnail of the icon. IcoFX will automatically number (name) the

icons.

Add icons to the Icon Resource Editor Window

4. By default the icon will have the name of the file. You can change this name in the

Resource Properties dialog. Press the "Properties..." tool bar button to open the Resource

Properties dialog. On this dialog you can change the name of the icon.

Change the name of an icon

5. After you have added al the needed icons you can save the icon library using the "Save"

toolbar button. In the save dialog choose a name for your library.

You can use the icon resource editor to edit/modify your existing icon libraries. Using

the "Open" toolbar button you can open existing libraries, and using the toolbar buttons you

can modify its content.

Using the same method you can create cursor libraries. In step 2 open the Cursor

Resource Editor using the "Tools/Cursor Resource Editor..." menu item.

For more information about the Icon Resource Editor dialog consult the help file of IcoFX.

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Change the icon of an application

If you'd like to change the icon of an application (exe file) you can do it with IcoFX.

IcoFX can only handle uncompressed 32-bit files. If you try to edit a compressed exe

file the behavior is unpredictable.

It is not recommended to edit exe or dll files. The file can be corrupted after the

editing. Use this feature at your own risk. It is a better practice to create a shortcut to the exe

file and change the icon of the shortcut. This way the exe remains unchanged.

To change the icon of an application follow these steps:

1. Start IcoFX

2. Open the Icon Resource Editor using the "Tools/Icon Resource Editor..." menu item.

3. Open the exe file using the "Open" toolbar button.

4. Select the main icon of the application and then press the "Change" toolbar button. In the

appearing dialog select a new icon for the application. The thumbnail of the icon will change.

Change the icon of an application

5. To save the file press the "Save" toolbar button.

For more information about the Icon Resource Editor dialog consult the help file of IcoFX.

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Extract icons from exe or dll files

Using IcoFX you can extract icons from exe files and save them as separate icon files.

To extract icons from exe or dll files follow these steps:

1. Start IcoFX

2. Open the exe or dll file using the "File/Extract..." menu item. The Extract dialog will

appear showing all the icons that the file contains.

Extract window

3. Select the icon(s) that you would like to extract and press the "Extract" button.

You can select more files if you hold down the Ctrl key when clicking on an icon.

4. The icons will be opened in IcoFX. Save the files using the "File/Save" menu item.

You can extract more icons without the need to save them separately using the Batch

Extract Icons or Cursors dialog ("Tools/Batch Extract Icons or Cursors..." menu item).

For more information about the Extract or Batch Process dialog consult the help file of

IcoFX.

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Working with gradients

IcoFX gives you the possibility to create custom gradients. In this tutorial we will create a

custom gradient, so that we see how to use gradients.

Creating a new gradient

1. Create a new gradient by pressing the "New Gradient..." toolbar button in the Gradients

panel. This will open the Gradient Editor dialog.

The Gradient Editor Dialog

We name the gradient "Yellow, Blue, Black" by entering the name in the Name edit box.

This name will be displayed in the Gradients panel.

2. We will create a gradient with three colors: yellow, blue and black. By default we have a

white and black color in the gradient. Click on the white color thumbnail under the gradient

preview. Click on the color box to change its color to yellow. We now have two colors:

yellow and black.

3. We will add the third color, the blue, in the middle of the yellow and the black. Click on

the thumbnail area under the gradient preview where the color thumbnails are. By clicking on

an empty area a new color thumbnail will be created. You can drag the color thumbnail to the

desired position. Click on the color box to change its color to blue. Now our gradient looks

something like this:

The Gradient Editor Dialog

4. We are finished with editing the gradient. Press the OK button to close the Gradient Editor

dialog. The new gradient is visible in the Gradients panel.

Fill an area of the canvas

5. In the Gradients panel select the gradient that we created in the previous steps.

6. Using the selection tools select an area of the screen that you would like to fill with the

gradient. You can combine selections if you select the "Add to selection" mode on the Tool

Properties panel. Also check the "Anti-alias" check box to have smooth edges. For example

this is a selected area created by a rectangle and an ellipse selection:

The Selected Area

7. Select the gradient tool on the Tools panel, and draw a gradient on the canvas. The gradient

will be applied only to the selected area.

The Selected Area Filled With Gradient

Create a gradient filled shape

Another method to fill an area of the screen with a gradient is to draw gradient filled shapes.

You can draw rectangles, ellipses, rounded rectangles and custom shapes filled with gradients

using the available tools in the Tools panel. We will create an ellipse filled with a gradient to

simulate a shiny button.

1. Create a new image using the "File/New Image..." menu item.

2. Select the Black and White gradient from the Gradients panel.

3. Select the Ellipse tool on the Tools panel.

4. Set the properties of the tool on the Tool Properties panel:

The Properties of The Ellipse Tool

We set the following properties of the Ellipse:

Set the outline to "Outline and fill" so the ellipse will have an outline, and it will be

also filled.

We set the fill type of the ellipse to radial gradient.

We set the center of the gradient (x and y coordinate) to 25% to have the center of the

gradient in the top-left corner.

Set the Focus Scale to 10%, so that the center of the gradient will be larger.

5. Draw an ellipse on the canvas. The finished ellipse should look something like this:

The Gradient Filled Ellipse

Copyright © 2005-2012 IcoFX Software. All rights reserved

Working with layers and the quick mask

In this tutorial we will create a round download button using a layered image.

Create a button with texture

1. In the first step we create a new layer based image using the "File/New/New Image..."

menu item. We select 256x256 as the image size and choose a transparent background.

The New Image Dialog

2. Select a colored gradient from the Gradients panel. This will be used as your button color.

IcoFX comes with many predefined gradients. Press the "Load Gradients" toolbar button on

the Gradients panel to load additional gradients. Load a gradient file Ex. Colors.grd. Choose

to append the new gradients to the already existing ones, don't clear the existing ones.

3. Select the ellipse tool from the Tools panel. Set the properties of the ellipse tool on the

Tools Properties panel.

Ellipse Properties

We set the following properties

Set the outline to "Fill only" so we don't have any outline for the ellipse

Set the fill to "Radial Gradient"

Set the x and y coordinate of the gradient center to 25% so that the center of the

gradient will be shifted to top-left.

4. Draw the button on the canvas

You can hold down the Shift key while dragging the ellipse to get a circle.

Gradient Filled Ellipse

5. Next we import an image as a new layer. This image will be used as texture for the button.

To import the image use the "Import From File" toolbar button on the Layers panel. Select

the image and a new layer will be created from the image.

New Layer

6. We want to have texture only on the button, so wee need to delete the extra parts from the

texture image. Select the Magic Wand tool on the Tools panel, set the tolerance to 70%.

Make sure that the button layer is selected and not the texture layer. Click on the top left

corner of the image. This will select the empty area around the button. If something went

wrong you can deselect the selection using the "Edit/Deselect" menu item and start over.

7. We want to soft the edges of the selection for a smoother appearance. For this we will use

the quick mask mode of IcoFX. Press the Quick Mask button on the Tools panel (last button).

This will show the selection as a mask and you can edit this mask. To smooth the edges we

use the blur effect on the mask. Use the "Effects/Blur/Blur" menu item. Exit the quick mask

mode by pressing the Quick Mask button again.

Quick Mask Mode

8. Now the selection is ready, we can delete the extra area of the texture. Make sure that the

texture layer is selected in the Layers panel. Use the "Edit/Delete" menu item to delete the

selected area. We can now get rid of the selection also using the "Edit/Deselect" menu item.

Extra Texture Deleted

9. To complete the texture we must change the blend mode and opacity of the texture layer.

Select the texture layer and open the Layer Properties dialog using the "Layer Properties..."

toolbar button on the Layers panel.

Layer Properties

We can set the name of the layer on this dialog. We set the blending mode of the layer to

"Overlay" and the opacity to 50%. Press OK to apply the changes. The button with the

texture looks like this:

The Textured Button

Create the arrow image

10. We create an arrow on the button to symbolize downloads. We do not create a simple

line, we want a gradient filled line. We add a new layer for the arrow using the "New Layer"

toolbar button on the Layers panel.

11. To create a gradient filled arrow we first create an arrow shaped selection and fill it with a

gradient. To create the arrow shaped selection we will use the quick mask again. Make sure

that the new empty layer is selected. Press the Quick Mask button on the Tools panel to enter

in the quick mask mode.

12. Select the line tool on the Tools panel to draw an arrow. Set the properties of the tool in

the Tool Properties panel.

Line Properties

We set the line width to 60 pixel, set the start cap of the line to an arrow and set the end cap

to rounded. Using this configuration we can draw an arrow. Draw the arrow on the mask

using a white color.

If you hold down the Shift key while drawing the line you can draw vertical lines.

Arrow on the Mask

Exit the quick mask mode by pressing the Quick Mask button again. If something went

wrong you can deselect the selection by exiting the quick mask mode and using the

"Edit/Deselect" menu item and start over.

13. Now we fill the arrow selection with a gradient. Select the gradient tool in the Tools panel

and select a black and white gradient in the Gradients panel. Fill the selection with the

gradient.

Gradient Filled Selection

14. We create an emboss effect for the arrow to get a 3d look. First duplicate two time the

arrow layer using the "Duplicate Layer" toolbar button on the arrow layer. Now we have

three layers with arrows.

15. Increase the brightness of the bottom arrow layer. Use the "Adjustments/Brightness And

Contrast..." menu item to increase the brightness of the image with 90.

Increase Brightness

Now using the Move tool move the whole layer down about 2 pixels so that the bottom of the

bright arrow will be visible a little.

Bright Arrow Visible

16. Now we select the middle arrow layer and decrease its brightness with 90. This will result

in a darker arrow.

Now using the Move tool move the whole layer up about 2 pixels so that the top of the dark

arrow will be visible a little.

Dark Arrow Visible

Create a reflection

17. Optionally you can add a reflection to the button. Add a new layer for the reflection using

the "New Layer" toolbar button on the Layers panel.

Using the ellipse tool with a gradient fill we create an ellipse on the button. For this we select

a white to transparent gradient from the Gradients panel. Set the fill of the ellipse to "Linear

Gradient" and set the gradient angle to -90 to get a top white and bottom transparent gradient

fill.

Finished Button

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Create a cursor

Using IcoFX you can create also cursors for the Windows operating system. Using many

drawing tools and more than 40 effects you can draw your cursor easily.

To create a cursor using IcoFX follow these steps:

1. Start IcoFX.

2. Create a new empty cursor using the "File/New cursor..." menu item.

3. On the New Cursor dialog select the size 32x32 and the data type True Color + Alpha

channel. You can select different sizes, but the Windows operating system will resize it to

32x32 because that is the standard cursor size. Select static cursor as the cursor type because

we will make a static cursor in this tutorial.

New Cursor Dialog

4. Draw your cursor.

5. Set the hot spot of the cursor using the Hot Spot dialog. Open the dialog using the

"Image/Cursor/Hot Spot..." menu item.

The Hot Spot Dialog

6. You can test the cursor using the Cursor Test dialog. Here you can draw on a small canvas

using your new cursor and can also test the look and feel of the cursor against different test

controls like buttons, edit boxes, etc. You can start the Cursor Test dialog using the

"Image/Cursor/Test Cursor..." menu item.

The Cursor Test Dialog

7. When you are done editing the cursor, save it using the "File/Save..." menu item.

For more information about the New Cursor dialog consult the help file of IcoFX.

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Creating a Macintosh icon from an image

Using IcoFX you can also create icons for Macintosh. IcoFX support Macintosh icon sizes up

to 1024x1024 compatible with Macintosh OS X 10.7 Lion.

Automatically create the icon

The easiest way to create a Macintosh icon from an image is to create it automatically. For

this follow the following steps:

1. Open the "Welcome" windows using the "Help/Welcome Window" menu item.

Welcome Window

2. On the "Welcome" window press the "Create Macintosh icon from an image" button.

3. This will open an "Open" dialog where you can select the image that you want to use for

creating the Macintosh icon. Select an image with a resolution that is larger or equals

1024x1024 because Macintosh OS X 10.7 Lion can use 1024x1024 icons.

4. If the image is larger than 1024x1024 then an "Import" dialog will pop up where you'll

have the option to resize or crop the image. Leave the option "Resize the image" selected and

press the "OK" button.

If you want to crop the image then select the "Show the Import dialog for more options"

radio button before pressing OK.

5. The icon will be automatically created in IcoFX including all the needed image formats.

The icon displayed in IcoFX

6. Save the icon using the "File/Save" menu item.

Manually create the icon

To manually create the Macintosh icon follow these steps:

1. Create a new empty Macintosh icon using the "File/New/New Icon..." menu item. This

will open the "New Icon" window where you should select "Macintosh icon" as the icon type.

The New Icon Dialog

2. Once the empty icon is created you can add the needed image formats to the icon. For the

list of needed formats for a Macintosh icon see the help page

Do not forget to add an 1024x1024 image for full Macintosh OS X 10.7 Lion

compatibility.

3. You can import new images to the icon using the "Image/Import Image..." menu item. This

will open an "Open" dialog where you can select the image. After that you can select the size

of the new image in the "New Icon Image" dialog.

The New Icon Image Dialog

If the image is larger than the selected size then an "Import" dialog will pop up where you'll

have the option to resize or crop the image. Leave the option "Resize the image" selected and

press the "OK" button.

4. Additionally you can create new icon images based on existing images. For this use the

"Image/Add New Image" menu item. This will open the "New Icon Image" dialog.

The New Icon Image Dialog

Using this dialog you can select the desired size of the new image and additionally you can

select the image (on the lower part of the dialog) that will be used as base for the new image.

5. Once the icon is ready save it using the "File/Save" menu item.

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Capture an area of the screen

Using IcoFX you can capture an area of the screen and create an icon from it.

To capture an area of the screen follow these steps:

1. Start IcoFX

2. Use the "File/Capture..." menu item.

3. On the New Image dialog select the desired size. This size will be used when capturing the

screen.

New Image Dialog

4. A semi transparent rectangle will help you to select the area to capture. The size of the

rectangle is the size that you selected in the previous step. The screen under the rectangle will

be captured.

Capture a 32x32 area of the desktop

You can change the color of the rectangle using the mouse scroll wheel.

5. After you selected the area to capture press the mouse button and the captured area will be

displayed in IcoFX as a new image.

6. Save the icon using the "File/Save As..." menu item. On the save dialog choose the desired

output format in the "Save as type" combo box.

For more information about the Capture dialog consult the help file of IcoFX.

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Convert Macintosh icons to Windows icons

Using IcoFX you can convert your Macintosh icons to Windows icons.

To convert Macintosh icons to Windows icons follow these steps:

1. Start IcoFX

2. Open your Macintosh icon (icns file) using the "File/Open" menu item.

3. Save the icon using the "File/Save As..." menu item. On the save dialog choose "Windows

Icon (*.ico)" in the "Save as type" combo box.

Save As window

Using this method you can also convert your Windows icons to Macintosh icons.

You can convert more icons at once using the Batch Create Icons Or Cursors dialog

("Tools/Batch Create Icons Or Cursors..." menu item).

For more information about the Batch Process dialog consult the help

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Create favicons for your website

A favicon is a small icon that is used by some browsers to identify bookmarked Web sites.

The favicon is an important part of each website. It helps in the branding process of your site

or blog.

Favicons in Firefox

Using IcoFX you can create favicons for your websites or blogs.

1. You can create an icon from scratch or from your favorite image.

2.Using Windows 7 and Internet Explorer 9 you have the option to pin web sites to the

taskbar.

Pinned Website under Windows 7

In this case the favicon will be displayed on the taskbar. To make sure that you favicon will

be displayed correctly make sure that it contains the following file formats:

Recommended: 16x16, 32x32, 48x48

Optimal: 16x16, 24x24, 32x32, 64x64

You can add all the needed image formats using the Windows Icon From Image dialog.

Windows Icon From Image Dialog

Make sure you select all the needed image formats for a favicon: 16x16, 24x24, 32x32,

48x48, 64x64. Press the OK button to create the icon containing all the selected formats.

3. Save the icon using the favicon.ico name.

4. When you have saved your icon add the following code snippet to the head section of your

website:

<link rel="SHORTCUT ICON" href="favicon.ico">

5. Upload the favicon.ico file in the same directory as your web page.

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Creating custom brushes

IcoFX gives you the possibility to create custom brushes. In this tutorial we will create a

custom brush that will paint stars.

Create the mask image for the brush

IcoFX uses an image as mask for the brush. The transparency of that image will be used as a

mask. The image has to be a 100x100 PNG image. In the first step we create the mask image

that will be used for the brush.

1. Create a new 100x100 image in IcoFX using the "File/New Image..." menu item.

New Image Dialog

On the New Image dialog select the custom size and enter 100 in the Width and Height edit

boxes. The background color has to be "Transparent". Pressing OK will create a new empty

100x100 image in IcoFX.

2. We need to create the star image that will be used as a mask. To draw the star we will use

the Text tool and draw a star using the Wingdings font.

First we select the star from the Character Map Windows application. This application is not

part of IcoFX. It comes installed with the Windows operating system. It is usually located

under "Start Menu/All Programs/Accessories/System Tools/Character Map"

The Character Map Application

On this dialog we can choose a character from a font. We select the Wingdings font and

double click the star symbol. Pressing the Select and then the Copy button we have copied

the star symbol to the clipboard.

3. We paste the star symbol to the Font tool properties window (it will not be displayed as a

star anymore).

The Text Tool Properties

We select the font Wingdings and a font size of 140. We are now ready to draw the star on

the canvas.

4. Select the color Black for a better visibility. Draw the star on the canvas: Click on the

canvas to draw a preview of the star. You can drag the star using the left mouse button until it

is fully visible on the screen. When you are done press the Apply button on the Tool

properties panel. This will draw the star on the canvas. The end result will look something

like this:

5. Save the image using the "File/Save" menu item as a PNG image. Select "Portable

Network Graphic" in the "Save as type" combo box. You have successfully created the mask

image.

Create the new brush

6. Create a new brush by pressing the "New Brush..." toolbar button in the Brushes panel.

This will open the Brush Editor dialog.

The Brush Editor Dialog

On this dialog we set the properties of the brush:

We enter "Stars" as the name of the brush. This name will be displayed in the Brushes

panel.

Load the mask image, that we created in the previous steps, in the Mask box. This

defines the shape of the brush. We can see the preview of the brush on the bottom part

of the dialog.

Set the default size of the brush to 50. This size will be used when you select the

brush from the Brushes panel.

Set the spacing of the brush to 100% so that we will have some distance between the

starts.

7. Next we set the dynamic properties of the brush. Select the "Shape Dynamics" tab on the

Brush Editor dialog.

The Shape Dynamics Tab of the Brush Editor Dialog

We set the size jitter to 50%, meaning that the size of the brush will change randomly by 50%

during drawing. This will result in different sized stars. We change the angle jitter to 100%

meaning that the star can be displayed at any angle. The stars will be displayed at random

angle during drawing.

8. On the next tab we set the color related dynamic properties of the brush. Select the "Color

Dynamics" tab on the Brush Editor dialog.

The Color Dynamics Tab of the Brush Editor Dialog

We set the hue jitter to 2% to allow a slight variation in the colors of the stars. We set the

saturation, brightness and opacity jitter to 20% to allow some variation in the saturation,

brightness and opacity of the stars during drawing.

9. On the last tab we set the scattering properties of the brush. Select the "Scattering" tab on

the Brush Editor dialog.

The Scattering Tab of the Brush Editor Dialog

We set the x and y position jitter to 50 pixels. This means that the stars will be drawn 50

pixels away from the mouse position. Using these parameters we can scatter the stars as we

draw. The stars will be drawn at random distance from the mouse pointer, but not more than

50 pixels.

10. We finished the brush, press the OK button on the Brush editor to close the dialog. Our

new brush is now displayed in the Brushes panel.

Test the new brush

11. Now all is left is to try out our new brush. Select the "Stars" brush in the Brushes panel.

Select the Brush drawing tool on the Tools panel. Set the size of the brush and select a color.

Start drawing on your canvas.

The Stars Brush

Copyright © 2005-2012 IcoFX Software. All rights reserved.

Batch create icons from images

To convert more images to icons easily you can use the Batch Process dialog of IcoFX.

To batch create icons from images follow these steps:

1. Start IcoFX

2. Open the Batch Create Icons or Cursors dialog using the "Tools/Batch Create Icons or

Cursors..." menu item.

Batch Create Icons or Cursors Dialog

3. Using the "Add..." button add the image files that you would like to convert to icons.

You can also add icons here. New icons will be created based on these icons. Using this

method you can batch convert Macintosh icons to Windows icons.

4. In the "Image Formats" group box you can select the image formats to include in the icons.

It is recommended to leave the default values.

5. Specify the output folder for the icons. The icons will be created in this folder.

6. Specify the file format of the icons. You have two options:

Windows Icon - This will create Windows icons from your images

Macintosh Icon - This will create Macintosh icons from your images

7. Press the OK button to start processing the files.

For more information about the Batch Create Icons or Cursors dialog consult the help file of

IcoFX.

Copyright © 2005-2012 IcoFX Software. All rights reserved.