How to Create and Upload a Favicon to your Site

Learn How to Create a Favicon for your Driving School Website

L Plates ~ Learner Plate

A favicon is the cute little icon which sits on the left side of the web address at the top of your web browser. For example, on the website you are currently viewing, the favicon is the small red 'L' plate graphic you can see at the very top of your screen.

Here is a great description of a favicon, provided by Wikipedia.

• In Google Chrome, they are displayed on the Bookmarks Bar.
• In Microsoft Internet Explorer, also known as IE, they presented in the Favourites Bar (Favorites Bar).
• In Mozilla Firefox, they are shown in the Bookmarks Menu.

Only 16 Pixels

There are 2 important technical considerations:

1. A favicon is only 16 pixels square.
2. It must be saved in the correct technical format, which is favicon.ico.

...and that's it!

A favicon is not a JPG or a GIF picture. However, you can import a JPG or a GIF image into a favicon creator (favicon generator software program) and then export/save your image as a favicon.ico.

It must be exactly 'favicon.ico', all in lower case characters (because nothing else will work).

How to Create a Favicon

This is our favourite favicon creator and it is completely free.

• You can either create a new favicon image from scratch, or import an existing logo or picture, by clicking on 'Import Image'.
• There is a preview window at the bottom of the screen, where you can view your work at the actual size (remember, it's only 16 pixels square).
• When you are finished and you want to add it to your website, just click on 'Download Favicon' and save the file on your computer.
• Next, log into QuickontheNet.com and go to 'Picture/document upload'.
• Finally, scroll down to the bottom of the screen to the 'Favicon' section and click on 'Choose File' to get the file on your computer and then click the 'Upload' button.

...you're done!

Now you can view it on your web browser.

Hot Tips

• Keep it simple! Remember, you only have 16 x 16 pixels square (or very small 16 x 16 dots) to play with.
• Consider using just the first letter from your company name for your favicon image. 
• For example, the favicon for 'Facebook' is only the letter 'f' and not the entire word 'Facebook'. Likewise, the icon for QuickontheNet.com is just the letter 'Q'.
• You will struggle to get more than 2 letters in your icon (because of the limited picture size).
• A graphic or a symbol can work rather well, but once again, keep it ultra-simple for the best results.

Where is my Favicon?

Please go to Firefox or Chrome (close and re-open) and refresh your browser to see your new favicon.

Unfortunately Internet Explorer (IE) tends to cache up the old favicon and it does not easily display the new one. But don't worry, it's there, it will show eventually and new visitors to your website using IE will see it immediately.

Favicon Examples

Please click and browse through the favicon screen shot examples on this web page.