Strict Standards: Redefining already defined constructor for class wpdb in /home/riverguardian/rioleo.org/wp-includes/wp-db.php on line 57

Deprecated: Assigning the return value of new by reference is deprecated in /home/riverguardian/rioleo.org/wp-includes/cache.php on line 36

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/riverguardian/rioleo.org/wp-includes/cache.php on line 384

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 541

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 541

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 541

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 541

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 560

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 659

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 659

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 659

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 659

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el($output) in /home/riverguardian/rioleo.org/wp-includes/classes.php on line 684

Deprecated: Assigning the return value of new by reference is deprecated in /home/riverguardian/rioleo.org/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/riverguardian/rioleo.org/wp-includes/theme.php on line 540

Deprecated: Assigning the return value of new by reference is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 316

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263

Deprecated: Function eregi() is deprecated in /home/riverguardian/rioleo.org/wp-content/plugins/wptouch/wptouch.php on line 263
Tutorial: How to create favicons

Leave a comment


Apr 17, 2008 | Tutorial: How to create favicons


Strict Standards: Only variables should be assigned by reference in /home/riverguardian/rioleo.org/wp-includes/post.php on line 117

Favicons are those small icons you see in your browser right next to the URL in the address bar or whenever you bookmark a page, as shown below. It’s a great way to brand your site and it adds a subtle touch to your users’ online experience. They’re easy to make, but it doesn’t quite work as easily as renaming a .jpg or .gif file as a .ico. Here’s a quick tutorial on how to do it, using Adobe Photoshop. If you have the open-source equivalent, GIMP, you should already have an option in the “Save Image” dialog box.

Screenshot of browser showing favicons

  1. Download the free ICO format plugin for your appropriate OS.
  2. Save the .8bi (Windows) or icoformat, ICOFormat_cs2.plugin (Mac) into the appropriate folder:

    Adobe Photoshop » Plug-Ins » File Formats

  3. Quit and close Photoshop if you have it open already, and relaunch.
  4. Create a new item with dimensions 16 x 16, as shown below. Set the background contents to “Transparent” to avoid having unwanted color spots around your icon.
  5. New Icon creation in Photoshop screenshot

  6. Insert/draw your icon… (zooming in helps)
  7. Zoom in into Favicon work area

  8. … and save as a .ico file, as shown below:
  9. Favicon... save.. as

  10. Upload your favicon.ico into your root directory of your online hosting space.
  11. Refer and link to your favicon.ico so that the browser knows where to find it. It used to be that just placing the file in your root directory would work, but standards compliance makes sure it works with any browser. Place the following anywhere between your <head> </head> tags:
  12. <link rel="shortcut icon" href="favicon.ico" />

    Remember that this is a relative link as opposed to an absolute one, so if your favicon doesn’t show up, be sure to check where you saved it. Depending on your browser and cookie settings changes may not be reflected immediately, so try clearing your cookies and refreshing several times.

Final product... presto!
Yay for the smiley face! Click here to see it in action.

Alternative options: DynamicDrive has a free favicon generator which will convert a jpg or gif file into an ico.

Inspiration…: Smashing Magazine collected 50 of what they deemed to be some remarkable favicons.

… or lack thereof: Check out a bunch of free icon sets I’ve assembled that you can use for favicons without infringement of licenses.

Also written on this day..

This entry was posted on Thursday, April 17th, 2008 at 9:40 pm, EST under the category of Web design. You can leave a response, or trackback from your own site.