How to Make a Free Favicon for a Website
A favorites icon, better known as the "favicon," is the small image that appears in the top left corner of your computer screen when signing into a website. A favicon helps a user quickly identify the website they are browsing from memory, and help create brand identity for your website. Free favicons are easy to make, and no expert knowledge is required to make or to implement them into your website design. Read on to learn how to make a free favicon for a website.
Other People Are Reading
Things You'll Need
- Website, self-hosted blog or any other server where you have full upload rights through FTP or other means
- Image editing software, such as Photoshop or GIMP, or even Microsoft Paint
- A good idea of the overall "identity" you are going for with your website
- Adsen Favicon software (free)
Instructions
-
Creating the Favicon
-
1
Decide what information is most important for your website. The favicon will shop up in the top left corner of your user's browser while they are on your site, and in their bookmarks list if they have bookmarked your site.
-
2
Create a 16 pixels x 16 pixels image using 16 colors, incorporating the graphical information you have decided is most important, and save it as a ".jpg" file. Make sure you are using 16 colors, and that the file is exactly 16 pixels x 16 pixels in dimensions. This is the only size that web browsers will be able to read.
-
-
3
Download and install program called Adsen Favicon, using the link provided, or running a Google search on "Adsen Favicon" and picking one of several shareware and freeware websites that host the favicon generator program. Adsen Favicon is tested to be safe, and will carry out this simple task for free when similar programs charge to make favicons.
-
4
Run Adsen Favicon, and you will be given a dialog box where you can upload the 16 x 16 jpeg image you have created. Choose the image from your hard drive, and hit "Save Icon."
-
5
Title your new free favicon "favicon.ico" and nothing else. The favicon absolutely has to be named favicon.ico in order for web browsers to be able to read it and use the information to put the file in the proper place.
Uploading the Favicon
-
6
Access your website via your ftp server--note that you cannot use your own free favicons on Blogspot blogs or other websites that you do not have upload rights to--and upload your new "favicon.ico" file into your website's root directory. This is the same directory that houses the "index.html" file for your website's home page.
-
7
Open your browser. First, clear the cache, and then access your website. There your favicon will be, and your site will be branded to be quickly identifiable to your users, which means more repeat traffic.
-
8
Take a look at your favicon as a finished product with your website. If you don't feel like your favicon captures the feel of your website perfectly, start fresh and repeat the process. Once you have decided on a favicon, it is risky to ever change it. This will make your readers lose brand identity with your website.
-
1
Tips & Warnings
Making a good favicon is a very difficult art to master. Keep it very simple, or your user will be confused by the time you're all through.
Do not simply take your .jpg or .gif file you have made in an image editing program and rename it with an ".ico" extension. This is not the same as creating an actual ".ico" file, which is Microsoft speak for icon.
Resources
- Photo Credit Jesse Sears
