Favorites Icon ( favicon bookmark icons )

[B.SkiLLs]

Favorites Icon Tutorial


So here's a very easy way to make favicon's in PS for all you web designers out there

But what the heck is a favicon?

-A favicon (short for favorites icon) is an image placed in the server that shows up in your browser's URL Address bar and on the bookmarks or favorites folders

Favorites Icon ( favicon bookmark icons )

Ok so let's start...

1. Go to File > New or press Ctrl + N, make it 150px X 150px with a transparent background and click Ok

2. If you already have a logo for your favicon place it in your document by going to File > Place or drag it from other document pressing and holding Shift if you already have it opened so that you place it in the center of your document

I'm using this image as an example of a favicon for a website

Favorites Icon ( favicon bookmark icons )

Favorites Icon ( favicon bookmark icons )

I strongly recommend resizing it to 16px X 16px, why? first so that it doesn't get "pixelated" if you upload it that big, second it will only be like a 1-3kb image so it will download much faster and third you will be able to see in PS how your final image will look like

3. So resize your image by going to Image > Image Size make sure you have the Scale Styles, Constrain Proportions and Resample Image check box checked and type 16 in the width value and click Ok

Favorites Icon ( favicon bookmark icons )

4. After resizing your image save it as a .psd with the name of favicon.psd cause you will need to install a PS extension for this to work

Thanks to Ed for posting this on MCH you can get the extension here

5. Quit PS, download the extension, extract the [ICOFormat.8bi] from the zip file and paste it in this route:

C: > Program Files > Adobe > Adobe Photoshop > Plug-Ins > File Formats

The Red part depends on the hard drive that PS is installed in your computer

6. After pasting the file open PS again and the extension should be already installed in PS, if for some reason you want to make sure of that go to Help > About Plug-In and look in the plug-in's list for ICO (Windows Icon), open your favicon.psd and go to File > Save As and in the Format drop down look for [ICO (Windows Icon) (*.ICO)] name it favicon.ico and click Save

7. The next thing to do is upload the favicon.ico to your server in your main root directory and as for the code for your .html page here it is:

<link rel="shortcut icon" href="IMAGE URL HERE"/>


Note: Some servers do not need to have the above code added to each page as they automatically recognized the file named as: favicon.ico and will appear where it belong anyways with out the code being added, but it's always good to add the code also, just in case and to ensure it shows up on all browsers


Well have fun with your favicon's   

[B.SkiLLs]

NOTE to self... Must redo / fix this one and repost. [after copy over from old site / domain]