Nove-Noga Info Post

Create Your FavIcon for Free With GIMP

If you found this page useful,
Please Like and Share. Thank you.

Your support of Nove-Noga is greatly appreciated.

Info Post at Nove-Noga.comCreate Your FavIcon for Free With GIMP

Time has passed since my first venture with the *Free GIMP Tool. (GNU Image Manipulation Program) I have refined the notation and have decided to apply it to the earlier projects.

*Free Means Free!
Graphics by GIMP

The primary change in this version of my favicon instructions is the use of a clear marker for the Click-by-Click instructions and some additions to Notation Methods. As described in the Notation Methods, all Click-by-Click instructions will begin with "#) ".

Nove-Noga Favicon Image

From the first line of code for my website, I wanted to create a FavIcon to use with it. I had in mind a simple text with a stylized font to make a nice, simple, image using "n-n". Even before I found IBO Toolbox, I knew that my success would depend upon branding.

Notation methods:
Each instruction line is usually in two parts. Verbal then Symbols.
"#)" The Symbol line will begin with "#)".
EG: #) >>File->Open("Name" = 'work image')[Open/Enter]

">>" Means Select, from the main menu if no {Dockable Dialog} or other source is indicated.
The square brackets mean [click this button].
The parenthesis mean (your entered info) E.G. (picname.xcf)
"Rt>" Means Right Click with your Mouse
"->" Click or Select
"->>" Double Click
">v" Click DropDown button
"^>" Shift + Click
" "literals" " The quotes usually contain what has been referred to as "Literals" meaning that that is exactly/literally what you should see.
" 'Described Item frequently an Icon' " EG: IBO Edit Icon 'Paper&Pencil'
[Action/Enter] is for the Option to Click the button or Hit the Enter key.

"*NB:" is for the Latin "Note Bene" which I interpret as Good Note or Note Well.*
"EG:" is for the Latin "Exempla Gratia" I use it when illustrating an example. See above.
Selection Synonyms: Click, Select, Choose,...

For more info on notation and standard practices see: "GIMP Notation and Descriptions"

1) Fire up your GIMP Tool.
#) >>GIMP

2) Select Foreground and Background colors: (Default is Black on White.)
In {Toolbox-Tool Options} Choose the Foreground Icon, Set your Color and Click [OK].
#) >>{Toolbox-Tool Options}[Foreground Panel] {Change Foreground Color} (HTML 0000ff) [OK]

*NB: At the bottom of the tool palette are two rectangles positioned one over the other. Naturally the one in front is foreground. Click it and choose the foreground color from the popup tools or enter the HTML notation. [OK]*

Then repeat for the background color:
In {Toolbox- Tool Options} Choose the Background Icon, Set your Color and Click [OK].
#) >>{Toolbox- Tool Options}[Background Panel] {Change Foreground Color} (HTML 00bfff) [OK]

*NB: One of the nice things about GIMP is that it will remember recent colors so that you only need to choose from the tiles displayed.*

*-*-* Please Note: The standard favicon sizes are 16x16 pixels and 32x32 pixels. To reduce problems I decided to create my new image using a 64x64 px box. *-*-*

3) Create a New 64x64 px Image using {Create a New Image}
#) >>File->New Width(64) Height(64) [OK]

*-*-* Select the Text Tool from {Toolbox} and set it up in {Tool-Options} *-*-*

*NB: Somehow my {Tool Options} have become separated from the {Toolbox} if you do not see {Tool Options} when you need it, >>Windows ->Dockable Dialogs ->Tool Options, to make it reappear.*

4) Set up Text Tool; Font=Alba Matter; Size 40px; Justify=Centered.
In {Toolbox Tool-Options} dialog select [Text Tool] (the "A" Icon).
#) >>{Toolbox Tool-Options}[Text Tool]
In {Tool Options} dialog Click the Font Button and choose Font.
#) >>{Tool Options} [Aa]-> "Alba Matter"
In {Tool Options} dialog Set Size to 40 px
#) >>{Tool Options} Size = 40 px
In {Tool Options} dialog set Justify to Center
#) >>{Tool Options} Justify = [Centered]

*-*-* Click the body of your new image towards the upper left corner and enter your text for the Icon. Mine is "N-N". In Alba Matter, they appear like a normal small "n". *-*-*

5) Click Image. Key-in text "N-N" beginning at the 0,5 pixel Position according to the indicator at the bottom of the {untitled.xcf} Dialog Box
#) >>{Untitled.xcf}(image body @0,5)
Enter Text "N-N"
#) (N-N)

6) Select Alignment tool from Toolbox and Drag a selection box over element.
#) >>{Toolbox}[Alignment Tool] ;Drag a selection box over element
Center horizontally.
#) >>{Tool Options}[Align Center of Target]
Center Vertically.
#) >>{Tool Options}[Align Middle of Target]

*-*-* When you save a file for the first time during a project, GIMP will save it in "My documents" as the default directory. I strongly recommend that you put each project in a separate directory inside a "GIMP" directory. I like to number my files and save the clean name for the final project. *-*-*

7) Save as "FavIconBase1.xcf" in /my documents/GIMP/FavIconBase/
#) >>File->SaveAs ("FavIconBase1.xcf") ->( "Places" = "My Documents") ->>("Name" = "GIMP") ->[Create Folder] ("FavIconBase")[Enter][Save/Enter]

*NB: Do Not change the Extension. If you cannot see the [Save] button, just hit [Enter] to complete the save.

*-*-* Be Patient, we are nearly done.

8)Export the image to png or jpg. The default is png. I am going to use jpg.
#) >>File->Export(FavIconBase.jpg)[Export]{Export Image as Jpeg}[Export]

*-*-* Remember that the Exported Image should be in the same folder as your first save. For the paranoid, check that location for your new image. If it is all good, close GIMP and we can move on to the next step. *-*-*

9) Now that we have the image that we want to use to create our new favicon, we are ready to go to a site that can create your new favicon from a picture.

*-*-* On this page you will see a nice box with the header "Create a FavIcon from any picture" with a place to Browse for your pic and a Generate button. Browse your way to your selected picture, then click [Generate FavIcon.ico]. This will take you to the next page displaying your new favicon as a Still and an Animated favicon. They have a lot to offer on this page. I was happy to add my site to their Favicon Gallery. *-*-*

10) Near the top and to the right you will see a red caption, "To add this favicon to your site:" With a Download link just below it. The instructions that you will need can be found in the readme.txt that comes with the download. NB: I always drop my downloads into a special folder so that I can easily find them. Click the download link, make a note of the file name and Save it to your selected folder.

11) GoTo your selected folder on your computer and Open the favicon_### file. READ the ReadMe.txt file. In the ReadMe you will find the code you need to add to your html files.*

*NB: When posting this PR, I discovered that my favicon was no longer working on the root directory files. I dropped them into images and added the image reference to the html. ("images/favicon.ico") Problem solved. I do not understand the Works/Don't Work of this. It works now. C;-)*

*-*-* Point of Order. I am building my own pages and keep everything related to the website in that folder. I copied my new favicon.ico and animated_favicon1.gif to my working folder. I find it easier when doing my uploads. *-*-*

12) Copy the html from the ReadMe. (See *NB: above if you have problems.) Open your page file (s)(index.html) and add the new code between the "head /head" tags. *NB: Html tags are always enclosed by "<>" but they cannot be displayed properly on IBO Toolbox. They probably would confuse the browsers.* I placed favicon code just below the meta tags. Save your file(s) and upload them to your website. Please Note: The code provided in the ReadMe assumes that your new icons will be in the same directory as any page that is calling on them. Each directory will need a copy (Or even a different set of Icons.)


(From *NB: above. The favicons worked on my first test. When testing my PR links, only the favicons in the secondary folders were working. To err is human... To really screw up takes a computer.)

I use FileZilla that I downloaded for free for all of my uploads. It is very easy to use once you have entered the access information. If you are totally lost, you may want to talk to your webmaster. Your other option is to GoTo for lessons and reference on html.

Nove-Noga Favicon Image

To work with an existing image, try Image Resize With GIMP. Resize your image to 64x64 px and go to step 9.

GIMP Tutorials at Nove-Noga.comFor more information on GIMP
and a working list of my GIMP Tutorials,
go to:
Time is your most precious commodity.
Do as much with your time as you can.
Nothing Ventured - Nothing Gained.