More than just a colorful decoration for your website, a favicon (short for favorites icon) can help to create a unique identity for your website.
Those little 16 x 16 images are a powerful and visual way to help "brand" your organization, and to keep your website visitors in touch with whose site they are on. For example, on every page of www.WildApricot.com, you'll see our apricot icon shown right before the URL in the web browser's location bar and next to the site's name in the browser tab. You'll also see favicons next to the names of websites in your Bookmarks or Favorites lists.
To create a favicon for your own website, draw it "from scratch" with an online icon-drawing program such as Favicon.cc, which has a handy preview feature so you can see changes as you draw.
Or, you might prefer to convert an existing image to an icon, using a free online favicon generator such as FavIcon from Pics.
Sixteen pixels square is a very small size, so you'll want to choose a
simple image. It makes sense to use your organization's "team colours"
for the favicon, to help to identity your site. If it's not too complex, your group's logo may work for an icon image with just a little editing -- your logo is a good place to start, at any rate.
To add a favicon to your website:
1. Download the 16x16 icon you've created, and save it on your computer as favicon.ico.
2. Next, upload the favicon.ico to the root directory of your webspace.
3. Finally, add a line of HTML to the header of your web pages, in between the <head> and </head> tags: <link rel="shortcut icon" href="https://www.wildapricot.com/favicon.ico" /> This serves to identify the favicon to web browsers, so they can display it reliably whenever someone visits a page on your website.
Wild Apricot users, similarly, will upload the icon as you would with any document or file, and insert it into a web page. Right-click on the image to find its URL, then add the favicon link to the global meta tags for your site. (See our Knowledge Base for step-by-step details.)
And that's all there is to it!
If you want to double-check your favicon, however, Favicon Validator is a free online validation service to sort out any problems with link tags, make sure your favicon file is readable, and generally help to troubleshoot.
Want to learn more about how your non-profit organization can make the most of social media on a small budget? Get updates from the Wild Apricot non-profit technology blog by RSS feed or by email, free!