How to make and set a Fav Icon

Posted at January 6, 2014 at 6:28 pm

How to Make and Set Your Own Favicon

Having your own custom Favicon is something most website owners should have.  It is a small bit of customization, but it can help to set your site apart from the competition.  Not only does it look nice, but it shows that you’re taking your site seriously, and can even help your website appear more professional.

What is a Favicon?

In case you’ve never heard the term before, a Favicon is the small icon that is displayed in the browser tabs, as well as in the favorites and bookmarks of your browser.  The Favicon for InterServer looks like this:

fav1

Favicons are always 16×16 pixels in size, but beyond that, they can look like just about anything you want.  Most companies use their logo, or a portion of their logo, to create the Favicon.  It can be difficult, however, to have anything that is too complex, because of the limited number of pixels you have to work with.  With some trial and error, however, you can have a beautiful Favicon created and added to your site quickly and easily.

Creating a Favicon Image

The first thing you need to do is to create the image you want to use as the Favicon.  You can start with any image, or logo that you have, and simply shrink it and format it into the proper size.  There are many free tools online that will automatically shrink any image down to the proper size, but we recommend the Favicon Generator, sound at http://favicongenerator.com.  It is 100% free, and works very well.  Follow these simple instructions to have your Favicon made in just minutes:

  1. Choose your image – Find an image that you want to turn into the Favicon.  At this point, it just needs to be perfectly square, but it doesn’t matter how big.
  2. Go to FaviconGenerator.com – Go to FaviconGenerator.com and browse to your saved image.  Once selected, hit Generate Favicon.
    fav2
  3. The site will display an ad, but undernieth it says “No Thanks, just give me my Favicon.”  Click the “Grab Favicon” button.
    fav3
  4. When you click that button, it will pop up with your newly formatted Favicon.  You can see how it will look right on the screen.  If you like it, you can right click the Favicon, and save it to your computer.  If not, just close the window and start this process over.  Repeat until you’ve found one you like.
    fav4
  5. If you right click the image, and select save image, you can choose where to save it.  Just make sure it saves as a .ico file.

Now you’ve got your Favicon created, and saved on your computer, all ready to add to your website.

Adding Your Favicon to Your Website

The way to add your Favicon to your website will vary based on the type of site you have.  The following are the most common options available.  If none of these work, please don’t hesitate to contact the support team for further assistance specific to your site.

Uploading the File to the Root of your Page

The easiest way to update your Favicon is to simply name the file ‘favicon.ico’ and upload it to the root of your page.  This can be done through any FTP program, such as FileZilla, or through most file management tools on your web server.  In almost all cases, the root of your web server will be a folder called “public_html.”
fav5

If there is an existing Favicon.ico file in there, it will ask you if you want to overwrite.  Just tell it that you do. Once the file is dropped in there, it is available to be displayed.  With many types of sites, including WordPress and other popular content management systems, the Favicon will automatically start being displayed.  *You may have to clear your cache for it to display as Favicons are typically cached by browsers*

If you’re not using a content management system, you may have to add in a simple line of code to your website’s html or php file(s).  This is extremely simple.  On the pages where you want the Favicon to display, find the <head> tags, and paste this somewhere within them. “<link rel=”shortcut icon” href=”/favicon.ico” >” Once this is done, clear your cache and see if the Favicon is displayed.

In the vast majority of cases, simply uploading the file to your Public_HTML folder will cause the Favicon to be displayed, so we highly recommend trying that first.

You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply