Wild Apricot Blog

View: Tags  |  Archives

Sign up to have the latest blog posts sent straight to your inbox!

    or RSS feed:  

How to Give Your Website a Favicon

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.

 
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!

Get a Special Report on Simplifying Membership Management

Enter your e-mail and receive this special report in your inbox.

Learn how to stop doing all those tasks manually.

Get frustration-decreasing, time-saving, stress-relieving membership management tips in your inbox.

Comments

  • Guilherme Z&amp;#252;hlke O'ConnorGuilherme Z&amp;#252;hlke O'Connor

    Guilherme Z&#252;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.

    Thursday, 28 February 2008 at 9:12 AM
  • James - CreareJames - Creare

    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.

    Monday, 03 March 2008 at 6: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.

    Monday, 03 March 2008 at 8:03 AM
  • Jason KingJason King

    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/.

    Tuesday, 04 March 2008 at 12: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.

    Wednesday, 05 March 2008 at 12:14 PM
  • Healing the BodyHealing the Body

    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.

    Thursday, 19 June 2008 at 9:15 AM
  • 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!

    Friday, 20 June 2008 at 5:56 PM
  • Rebecca said:

    Here's another quick Favicon generator that's easy to use and seems to do a good job of image conversion:  GenFavicon (http://www.genfavicon.com/). You can crop or select just a section of an existing image to use as your favicon - quite a useful feature!

    Monday, 11 August 2008 at 2:58 AM
  • AshleyAshley

    Ashley said:

    Hi I'm Ashley, I'm 12,and I made a "favicon" for my website! yay! lol Its only a simple A.C but A.c are y initals, wich stands for Ashly cole.. No not the footballer, me :D lol I am seriously called ashly cole, dispite my lack of intrest in the sport altogether.. oh well cheack out my website here: http://ashleyswebsite.isa-geek.com  You may not be ably to access the site as my mum wont let me have my computer on 24/7

    Monday, 27 April 2009 at 12:58 PM
  • Rob MarchantRob Marchant

    Rob Marchant said:

    Ahh the delightful favicon. Making web browsers just that little bit more interesting.
    Tuesday, 29 November 2011 at 7:47 AM
Sorry, this blog post is closed for further comments.
Membership Software - Wild Apricot For sales and support questions,
schedule a callback
Not a big talker?
email support@wildapricot.com
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7