Favicon examples

How to create a favicon

When setting up your site, remember to add a custom favicon. Favicons are the little icons you see displayed either in the address bar or tabs of your web browser. They are a geat way of adding branding to your site. They also help provide a sense of legitimacy and professionalism. Below are the steps needed to create a custom favicon.

Creating a favicon

1.) Create either a .GIF or .PNG file at 16×16 pixels. I recommend a PNG-24 file. You can save your image with either a solid or transparent background.

2.) There are several free sites for creating favicons. I recommend using http://tools.dynamicdrive.com/favicon/.

3.) Select your image to upload.

4.) Click “Create Icon”.

5.) Review your favicon in the preview pane below. If you are satisfied click “Download.” If you want to tweak your image a bit, go back to steps 1-4.

6.) Once you click “Download” select a location on your computer and save your file.
*NOTE: Do not change the file name of “favicon.ico” when saving.

7.) Upload your file to the main directory of your website.

8.) Now add the below code to the head of your site’s index page.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

*Note: Most up-to-date browsers will find your favicon without this code as long as the .ICO file is in the main directory of your website. However, this will make sure there is no issue.

9.) You are now finished. Usually it takes a few minutes for the favicon to display within your browser. Give it at least 24hrs (though ususally it will display within 5-10min).

Easy and simple, your site now has that little extra something that viewers have come to expect when browsing the web.

Share your thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.