|
Webicons How to make your own website icon! |
|
What's a webicon?
It's that teeny tiny picture, or icon, on the left side of the address bar and the page title. Why a webicon? website icons give a distinction between sites and give the sites' visitor a feeling that "this website is professional," which can lead to higher sales or whatever it is they're coming to your site for. Caring webmasters will use special hand made versions of their own for those reasons. Skip to the bottom of the post for information if you do not want to make one yourself. How to make one yourself: First, you'll need a icon design program. I reccomend IcoFX, a simple yet effective program for making an icon for a website. Options: Importing a picture as your icon: In IcoFX go to File -> Import Image... and then a window will appear. Navigate to the picture of your choice and click open. Another window will appear with a few options. I reccommend using True Color + Alpha Channel (32 bits) if you want any transparency. Select True Color (24 bits) for a picture without transparency. Then select 16 x 16 because this is the size of a webicon. Clicking OK will activate yet another new window. This time with a picture preview. This time the default settings are fine. Warning: do not be alarmed when you click OK this time. It simply resizes the picture you selected to 16 x 16 and you see it zoomed probably 3200%. Designing your own: In IcoFX click on the empty paper button in the top left corner or press File -> New or press CTRL+N. A window will appear. I reccomend using True Color + Alpha Channel (32 bits) so you can have transparency (very useful and professional). Also, select 16 x 16 for that is the size of a webicon. You will then see a lightly checkered background (meaning transparent). Now if you start to draw on this canvas, you will very uickly find out it makes huge black squares. Do not worry. To the left of the top left corner of the canvas is a blue rounded square in which is an actual size preview so you can see what it will look like in the browser. Draw around and experiment with the tools and different colors using the right hand side toolbars. Be sure to save your new icon in a place you can remember. You can name it anything you want. (As long as you remember the name.) Uploading your new icon: You will need an FTP server. I use Filezilla, a free File Transer Protocol (thats what FTP stands for). This is how you'll upload your icon to the Internet, which is neccesary. Drag the file the same folder in which your home page is stored in your site. Putting it on your site: In the site builder of your choice, (I use KompoZer, also free) open your page, go to your page source code, and somewhere in the HTML page header, between the <head> and </head> tags, copy and paste this code: <LINK REL="SHORTCUT ICON" HREF="insertfilename.ico" type="image/x-icon"> Now where it says "insertfilename.ico" insert your own icons' file name. Be sure it has the same name as the one you uploaded. Checking: Go to your site and see the new webicon you just created. If something is wrong, check to see if you missed any steps. Getting this on all your webpages: Open Notepad and paste the code above into it. Change the file name to your own filename, the same one you used before. Copy this new code of yours and paste it into every page in the same spot as the first time and make sure you're in the source code view. You can close Notepad without saving because you don't need it. ================================================================= Custom Icon Information: I can make you a personalized icon just for you, and upload it to your site if you want me to. If you have a WordPress blog with your own web address I can still add a webicon. You will just have to specify the exact name of your theme (for uploading) as well as the information below. Here's how it works: You can email me at josh {at} 7eaglesfly {dot} com. Include your name in the email (if it's not automatically inserted) so I'll know who to send t to. If you want an icon from an image, include the image in the email as an attachment. If you want me to make the icon, describe in the email what kind of picture you want. For example, "I want it all brown with a transparent background and the letter J in a box." Or something like that. If you want me to upload it on your site, include in the email your web address, site username, and site password (the one used to log in to your file uploader.) Also include the webpages you want me to put it on or just say "all of them." Once I'm done creating/designing your personal icon, I will send it to you and ask you if you want it that way. If not, tell me what's wrong with it and I'll redo it. If yes, I'll send you a link where you can pay the $5 via a PayPal button and upload it to your site. Yes, it's only $5. Enjoy! Josh Meyer, Webmaster |
|
josh {at} 7eaglesfly {dot} com |