Photoshop Tutorials: Miscellaneous

Web Designers Library- Tutorials and Articles

Tutorial Search
		Advanced Search

Tutorial Menu


	Video Tutorials
	· Dreamweaver
	· osCommerce
	· Installations

	Photoshop
	· Tutorials
	– Photoshop Basics
	– Special Effects
	– Text Effects
	– 3D Effects
	– Textures & Patterns
	– Web Layout
	– Drawing Techniques
	– Color Management
	– Photo Editing
	– ImageReady Animation
	– Miscellaneous
	· Articles

	Web Design Basics
	· Design Principles
	· Website Usability
	· Color Theory
	· Templates & Tuning

	osCommerce
	· osCommerce Knowledgebase
	– Catalog Area
	– Installation and Upgrades
	– Administration Tool
	– General Information
	– Developers Section

What's New

Latest Tutorials and Articles

Video Tutorials

osCommerce Tutorials

Template installation with cPanel and Ipswitch

Photoshop

Photoshop CS3: Output Sharpening

Change Color on an Object

Sunlight Effect

Autumn Effect

Eyes in Green Pea Pod

Web Design Basics

A To Z About RSS

Elements of Great Websites

The Next Generation Website Model

Why Use a Web Design Template?

Web Site Templates and Their Benefits

osCommerce

SSL - This page contains secure and non secure items

Post-Installation

Security - .htaccess

SSL - This page contains secure and non secure items

Tax Proposal

Photoshop : Tutorials : Miscellaneous

Last Updated: Apr 15th, 2008 - 18:38:37

Make a Favorites or Bookmarks Icon
Author: Alex
Authors Website: www.strabes.com
Jan 29, 2007, 19:12

Email this article
Printer friendly page

Here you are going to learn how to make an icon that will show up when your site is added to the user's favorites with Internet Explorer and Mozilla Suite/Firefox. In Mozilla Suite/Firefox it will also show up on the tabs.

1. Download this plugin for Adobe Photoshop, and put it in your "Photoshop/Plug-Ins/Abode Photoshop Only" folder. The full path to that directory on my computer is: C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\Adobe Photoshop Only. This plugin will allow you to save your image in the correct format.

2. Restart Photoshop.

3. Make a 16x16 picture that you want to be your icon. This is the one that Strabes.com is using right now:

4. Go to File, Save As, and select the Windows Icon (*.ico) filetype, just as if you were saving it as a gif or jpg or whatever. Save it as "favicon.ico".

5. Now add the following line of code in between the tags of your index file:

6. Upload your new index file, and upload favicon.ico to the same directory you typed in your line of code above. Open a new browser window, go to your site, and you should see it in the address bar of your browser. If you don't, read the troubleshooting guide below before you contact me to ask a question.

Troubleshooting

I have been getting tons of questions about this tutorial, so before you ask, read this troubleshooting guide!

1. Make sure that the icon is 16x16 and you saved it in Photoshop as a .ico (NOT renamed it)

2. Make sure you copied the line of code correctly.

3. Make sure your line of code is in between the tags.

4. Make sure that the icon is in the same directory as the page that you want it to show up on. This is usually your main index page.

Top of Page