logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

How to Post a Favicon on Your Site

Guest Author - Elizabeth Connick

The favicon, or shortcut icon, is the tiny picture that appears next to a site's url in your browser's address bar. It also appears next to the site's name in your Bookmarks or Favorites list, and if you are using a tabbed browser it may show up on the tab as well.

Posting a favicon to your site is a nice way to add a bit of personality, and it's actually quite easy. The most difficult part of the process is choosing an image to begin with! If you have a good eye for graphics, you might design your own. If not, you can always pick an image from the web. If you decide to use an existing image, do NOT simply download a graphic from another site and post it to your own – you'd be infringing on that webmaster's copyright and could end up in serious trouble. Instead, grab an image from one of the free sources on the Internet.

Your favicon must be a specific size to work – either 16X16 pixels or 32X32 pixels. This is really tiny, so when you select your base image be sure it’s one that will look all right shrunk down to postage-stamp size. Bright colors and simple shapes usually work best. You must also save your image in one of the accepted favicon formats: .png, .gif or .ico. Most web developers use .ico because your favicon will likely be the only file on your website with that extension, so it will stand out when you skim through your site’s directories.

You can use one of a number of free web tools to convert your image to a correctly sized .ico file. I use one offered by the makers of HTML Kit, which allows you to create both static and animated favicons. There's a link to the favicon tool below this article.

Now comes the easy part – adding the favicon to your site! You have two options for displaying the favicon image. The first and most secure option is to put the following code in the head section of every page where you want the favicon displayed, replacing the 'href' portion with the url of your favicon:

<link rel="icon"
type="image/ico"
href="http://example.com/myicon.ico">

The second option is to name your favicon "favicon.ico" and place it in your root directory (this is usually the same directory as your homepage). With this method you don’t even need to add code to your webpages, and nearly all browsers will pick up the icon – however, certain browsers (usually older ones) will not display the favicon if you use this method.
This site needs an editor - click to learn more!

Add How+to+Post+a+Favicon+on+Your+Site to Twitter Add How+to+Post+a+Favicon+on+Your+Site to Facebook Add How+to+Post+a+Favicon+on+Your+Site to MySpace Add How+to+Post+a+Favicon+on+Your+Site to Del.icio.us Digg How+to+Post+a+Favicon+on+Your+Site Add How+to+Post+a+Favicon+on+Your+Site to Yahoo My Web Add How+to+Post+a+Favicon+on+Your+Site to Google Bookmarks Add How+to+Post+a+Favicon+on+Your+Site to Stumbleupon Add How+to+Post+a+Favicon+on+Your+Site to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor