Favicon.ico How To Create Your Own Favicons!

| June 28, 2013 | 0 Comments

What is a Favicon? (Part 1)

A favicon is a tiny bookmark icon that is captured by your browser from a specific file on your website called a favicon.ico which is a16x16 icon. You can usually see it displayed right beside the website address in the URL bar.  However, depending on which type of browser you are using it can be seen a few different ways.  Usually it sits at the top left corner of your browser tab(s).  The favicon is also the icon image (.ico file) that is displayed when you create browser pin tabs and/or bookmark any web page (in your bookmarks folder or toolbar).  It’s just another component used for developing a properly branded website.

Why Use Favicons?

A favicon.ico is a great way to help brand your website, and is used specifically for that purpose.  It also helps visitors quickly find your site in future when they’ve bookmarked your webpage and helps your web address (web link) to your web page stand out in their vast see of other bookmarks.

favicons, favicon.ico, website branding, chrome, firefox, safari, ipads

Favicons help brand your website!

How Do I Create My Own Favorite Icons = Favicons?

Creating your very own favorite icon is actually quite is easy to do.  Searching for “How to generate a Favicon” in Google will bring up many different websites that offer the tools on how to generate a free favicons directly from your computer.  Most of these auto generating websites out there can produce very poor quality icons, so be sure to try more than just one just to be sure.  At least until you find the one that works best for what you are looking to accomplish in terms of quality.

Personally I like to use www.convertico.com as it is quick and easy to use, and produces high quality .ico files in a variety of different sizes of my choosing.  It also doesn’t have a lot of added options to make it confusing (as some favicon generating sites do), you just upload the file you want to convert as your favicon.ico file, click submit, and download your file in a matter of seconds.  It’s that simple, it’s that quick and yes it’ that easy.

Another added bonus of using www.convertico.com is that it also generates icons that I can utilize as windows desktop icons.

If you are an avid WordPress user you can also download a simple plugin that will automatically create your favicon files for you, as well as have the added ability to create specialty favicon formats necessary for a high quality favicon when people save your website when they use their IPADS and/or other mobile devices. (Part 2 of this article will tap into the more in-depth variety I am currently speaking of).

WordPress users can download this favicon plugin I am referring too by clicking here, it is called the All-In-One-Favicon and works great – I use it for all my WordPress websites.

What Browsers Support Favicons?

Pretty much all modern web browsers out there today (ie: Firefox, Google Chrome, Opera, Safari, Internet Explorer and others) support favicons as a feature. Even mobile browsers support the favicon feature such as iPhones/iPads, Blackberry and Android etc.

favicon.ico generator

Generate your own Favicon

How to Install My Favicon.ico File?

Installing your favicon is fairly simple to do… after you have gone to www.convertico.com and created your own personal favicon.ico file, downloaded it and unzipped it, you need to open your FTP program and navigate to your website root directory (your root directory is where your index file is located) and upload it.

Next you need to open your webpage(s), or your header file and between your <head> and </head> tags enter the following piece of code:

<link rel=”shortcut icon” href=”favicon.ico”>

This tells the browser where your favicon.ico file is located and what to do with it.  If for some reason you don’t see your favicon file right away, you will need to clear out your browser cache files and revisit your website; this will usually correct the issue.

.ico Recap!

A favicon is a bookmark icon that is capture by your browser to help users visually identify (also brands) your website apart from others.  This is especially useful when users have many bookmarks in their browser favorite’s folders.

URL: www.convertico.com:  Easily create your own favicon online.

URL: All-In-One-Plugin: WordPress users download the plugin (All-In-One-Favicon) that will instantly setup your favicon file for you (Download directly from WordPress.org)

Share this article

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Category: Web Tools

Leave a Reply

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