Creating A Favicon

In this tutorial I will teach you how to create a favicon for your site. A favicon is a little icon that appears in the address bar of your internet browser on the left-hand side. Our site has one, if you're unsure what they are, just look at the top of your browser right now, and look the the left of the text in the address bar. See it? That's a favicon. Okay. Now I'll walk you through making your own.

1) First off, favicons are 16x16 in size, but it's hard to work with an image that small to start, so create a new document with the size of, say, 64x64.

2) Make or resize your logo to fit the 64x64 document, or just play around with adobe until you get something that you like, and will look nice (and make sense) as a favicon. Also note that your favicon may include transparency.

3) Now all you have to do is resize it to make it 16x16, like I mentioned earlier. To do this, go to Image > Image Size, and type in 16 for Width and 16 for Height. Press the OK button.

4) Now you should have a 16x16 image. Now here's the tricky part. This image needs to be an Icon file, and Adobe can't read and right .ico (or Icon) files. So you need to download a simple plugin for Adobe Photoshop that allows it to read and write Icon files. You can either search Google for Adobe Photoshop plugins until you get what you are looking for, but you will probably turn up emtpy-handed. That is why I am here to help you out. You can download a free plugin here if you are having trouble finding one.

5) Now that you have your plugin installed, here's what you've gotta do. open up your image file, it should be 16x16 (if it's not, see Step 3). Now go to File > Save As... and change the file type to Windows Icon (ICO) and save it with the filename "favicon". you can type "favicon.ico" if you'd like, but technically it doesn't matter.

6) Okay, so you've got your 16x16 favicon.ico file. Good. Now upload it to your server in your main folder, make sure it's not in any subfolders (unless the file it's going to be linked to is in the same subfolder). Now open the file that you want to insert your favicon into. Here's the HTML part.

7) In the and tags type in the following code:


(You might need to retype that code, but you might be able to copy and paste it.) Now save your document and upload it.

8) You are done. Hope this tutorial has helped. Sorry that it was only part Adobe and had some HTML in it. I hope you had enough HTML knowledge to get through this tutorial without any troubles. If not, feel free to contact me. See below for details.

Thanks For Reading.

- Surf Lessons LA - Surf Lessons Los Angeles - Surf Lessons Santa Monica -
- Stand Up Paddle Surfing Lessons Los Angeles - Santa Monica Surf Camp -

- Alzheimer's Florida - Dementia Florida -

- Lower East Side Shopping - Best Online Boutiques -

- Rosie Rodriguez Makeup - Rosie Rodriguez Beauty Services - Eyelash Extensions NYC - Brow Shaping NYC -

- Alexandre Herchcovitch - Tsumori Chisato - United Bamboo - Sabrina Dehoff - Iosselliani - Florian -

- ALIFE NYC - ALIFE PRESENTS - Di Fara Pizza In Brooklyn - ARC NYC - HIGH LINE ENTRANCE -

- Bicicleta De Carrera - Pista Ciclabile - Piste Cyclable - NJS - ピスト - 競輪 -

- Lower East Side Shopping - Best Online Boutiques -