How to Create an Icon in a URL Window
Ever notice how your favorite websites have a small icon appearing to the left of the URL in the URL window at the top of your browser? These favorites icons, or favicons, are essential to running a successful website and building brand identity. Making a favicon isn't as simple as just choosing an image. There is a specific process needed to create and upload a favicon to appear next to the URL on your own website.
Other People Are Reading
Instructions
-
-
1
Put some serious thought into the brand identity you are creating for your website. The favicon appearing in the URL window is a key part of that identity. Think of some simple images to represent key concepts of that identity and jot them down.
-
2
Open your favorite image-editing software such as Adobe Photoshop or GIMP. If you don't have any image editing software, download free software such as GIMP from download.com.
-
-
3
Create a new file that is exactly 16 by 16 pixels, and 16 colors or 16 shades of gray. It is vitally important that you choose these exact dimensions and color set in order for your icon to properly display in the URL window.
-
4
Experiment with some different designs using the ideas you fleshed out in Step 1. Remember that the favicon will display every time users pull up your website, as well as in their bookmarks. It can be difficult to design an image that looks professional at such a small size. Blow up the image to a much larger size as you work, making sure to check it at its real size periodically.
-
5
Try using similar colors to create depth, or creating your type in different shades of gray while adding a background color. You shouldn't change your favicon once it is uploaded, as this will negatively affect brand identity. Make sure you are completely satisfied before you move on.
-
6
Save your image as a JPG file, and then turn it into an icon file using a favicon generator such as Adsen Favicon. Adsen Favicon is software available at no charge. When the software prompts you for a source file, open the JPG file you created. If you use Adobe Photoshop, you can save directly into the .ico format detailed in Step 7 and will not need separate software.
-
7
Convert the JPG to ".ico" format using Adsen Favicon or Photoshop, and save the file as "favicon.ico". Do not title your icon as anything other than favicon.ico as this is the only file name that will cue your browser to display the icon in the URL window.
-
8
Use your favorite FTP client to upload the favicon.ico file to the root directory of your website. This is the main folder, the same one that houses the "index.html" file. This is the only place you can put the file to have it display in the URL window. Take a minute to see how the favicon blends with your website, and tweak it as necessary.
-
1
Tips & Warnings
Follow the directions exactly for the file size, color set, name and location to avoid frustrating problems with your favicon.
