Wild Apricot Blog : How to Give Your Website a Favicon


	This blog is for volunteers, webmasters and administrators of associations, clubs, charities, communities and other groups. We discuss issues and trends in modern web technologies that help your organization achieve more with less. This blog is sponsored by Wild Apricot membership software: a set of tools for membership administration, event registration, website management, online fundraising - with friendly and knowledgeable tech support. See for yourself how affordable and easy it is to use: - Take a tour!

How to Give Your Website a Favicon

wild apricot favicon screenshot 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="http://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.

Published Thursday, February 28, 2008 3:28 PM by Rebecca

Filed under: Non-profit technology, Wild Apricot, nptech, images, websites, icons

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

	Guilherme Zühlke O'Connor said: Sixteen pixels square is a very small size, so you'll want to choose a simple image. And you want to chose it wisely too, because those modest 256 pixels carry on their shoulders the responsibility to identify your site among many others among favorites, blogrolls and all kind of crowded spaces. February 28, 2008 2:12 PM
	James - Creare said: Great tutorial Rebecca, it is also worth pointing out that when making a .ico in Photoshop, you can also save with PNG quality transparency, meaning that if your not utilizing all 16x16 pixels with color pixels, you don't have to have it framed on a white background. Looks great on Firefox 'new window' tabs without the white box. March 3, 2008 11:43 AM
	Rebecca said: Thanks, James - a good tip for making a non-square favicon look great against a coloured background. And for those who don't have/use Photoshop, you can use a combination of (1) any graphics program that can make a transparent GIF or PNG, and (2) one of the online favicon generators (such as Dagon Design's favicon tool (http://www.dagondesign.com/tools/favicon-generator-tool/) that is able to convert your image to a favicon and retain its transparency. Two steps here, rather than the simple one-step process with Photoshop - but it's always good to know there is a low-budget way to get the same great effect. March 3, 2008 1:03 PM
	Jason King said: Thanks for the tutorial, I've already shown it to two clients. Designing the favicon is on of my favourite web design tasks! I've started a list of interesting favicons from not-for-profit organisations: http://www.kingjason.co.uk/blog/index.php/charity-websites-favicons/. March 4, 2008 5:26 PM
	Rebecca said: Jason, I'm so glad that you found this post useful - and thanks so much for the link back! It's a great collection of favicons you've got on your site, a useful sample for anyone trying to figure out what image might work at such a small size. March 5, 2008 5:14 PM
	Healing the Body said: We found our static favicon so successful (our little red angel), that we created an animated flying favicon, and it was successful on Firefox, but, whoops, Explorer didn't like it, and knocked it out, so it was back to the static favicon. You can see it here. http://www.cathetel.com/gif/angel2.gif . It still serves as a tiny linking image and it's a bit harder to create, but anyone interested can contact us at our website for the formula. June 19, 2008 1:15 PM
	Rebecca said: I'm interested in how you've turned the favicon into a tiny little advertising graphic by encouraging people to "add an angel" to their websites: very creative! June 20, 2008 9:56 PM

Name (required)
Your URL (optional)
Comments (required)
Remember Me?
Submit

RSS feed:

We write on web technology and social media tools for non-profits - charities, associations, clubs and other organizations

How web masters and administrators can do more with less
Web 2.0 and Social Media trends
Ease of use - technologies that delight you and those that frustrate you
Industry news and upcoming events
Case studies and best practices

You will also see occasional posts about Wild Apricot product but we strive to be unbiased and helpful and focus on broader issues of interest to member-based, charitable and community organizations - so they can use web technology more efficiently.

About me - 'Curious Apricot'

I'm Rebecca Leaman, and it's my pleasure to join the Wild Apricot blog team in exploring how to use the internet and web 2.0 tools more effectively. Currently I am the primary blog writer. I work with Bonasource's Wild Apricot marketing team.

Please feel free to contribute non-profit technology tips and ideas by commenting on blog entries.

How to Give Your Website a Favicon

Comment Notification

Comments

Guilherme Z&#252;hlke O'Connor said:

James - Creare said:

Rebecca said:

Jason King said:

Rebecca said:

Healing the Body said:

Rebecca said:

Leave a Comment

Guilherme Zühlke O'Connor said: