Adding a Favicon to Your Site

Including a favicon on your web site helps visitors recognize your site-brand in both their browser tabs and as a desktop icon, if they happen to drag your url onto their desktop.

I found a terrific Favicon & App Icon Generator on Dan’s Tools site. It’s just one of many amazing (and free!) webdev tools he provides. Click here to use the Generator.

If you don’t have an image to upload, Dan has provided a valuable icon editor/creator. It includes a handy preview to eliminate guesswork:

Once you generate the .ico file, drag it to your root folder and paste this code into your HTML header:

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

If you need to generate an App Icon, more files in different formats will be needed for the variety of platforms in use, and the amount of code needed in your HTML header increases. On Dan’s Tools, just choose the appropriate radio button on the upload page:

. . . and follow the straightforward download and copy/paste directions he provides on his next screen.

Click here to visit Dan’s site for more information on how to generate Windows .ico files and App icons.

What is a Favicon?

“A favicon /ˈfæv.ɪˌkɒn/ (short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons,[1] associated with a particular website or web page.[1][2] A web designer can create such an icon and upload it to a website (or web page) by several means, and graphical web browsers will then make use of it.[3]Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks.[3] Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as a desktop icon.[1]

— Definition: Wikipedia

About Dan Abercrombie

I have been developing web application since the late 1990’s. Over the years I have used many tools in testing, debugging, and development that you see available on this site. It came to me one day that if I found them useful, perhaps someone else would as well. To that end, I have brought all these tools together onto a single site to make it quick and easy to use.

Please keep in mind that just about everything is in a constant state of improvement.

Web site:
On Twitter: @danstools00

Leave a Reply

Your email address will not be published. Required fields are marked *

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