Wild Apricot Blog

View: Tags | Archives

How to Give Your Website a Favicon

Lori Halley 28 February 2008 10 comments

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 (if you're still working on your nonprofit's logo, check out this list of the 75 best nonprofit logos).

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!

Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

Posted by Lori Halley [Engaging Apricot]

Published Thursday, 28 February 2008 at 3:28 PM


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

    Thursday, 28 February 2008 at 9:12 AM
    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.

  • James - Creare said:

    Monday, 03 March 2008 at 6:43 AM

    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.

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Monday, 03 March 2008 at 8:03 AM

    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.

  • Jason King said:

    Tuesday, 04 March 2008 at 12:26 PM

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

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Wednesday, 05 March 2008 at 12:14 PM

    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.

  • Healing the Body said:

    Thursday, 19 June 2008 at 9:15 AM

    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.

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Friday, 20 June 2008 at 5:56 PM

    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!

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Monday, 11 August 2008 at 2:58 AM

    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!

  • Ashley said:

    Monday, 27 April 2009 at 12:58 PM

    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

  • Rob Marchant said:

    Tuesday, 29 November 2011 at 7:47 AM
    Ahh the delightful favicon. Making web browsers just that little bit more interesting.
Sorry, this blog post is closed for further comments.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Scroll to top