Brand your site with a favicon
Favicons are those eye-catching little pictures that appear in your web browser’s address bar, favorites list (hence the name favicon, short for “favorites icon”), and, with modern tabbed browsers, on tabs.
Instantly recognizable when designed well, favicons represent the brand identity of sites that use them.
Examples
Wikipedia uses the “W” from its logo:
Digg’s favicon represents a person holding a shovel, an image that seems to have been created especially for the favicon:
Usability in a tabbed, multitasking world
Tabbed browsers, such as Firefox and Internet Explorer 7, can show many page-tabs at once, squishing a site’s descriptive text.
Below are examples of tabs without favicons. What sites are they? I don’t know.
These have favicons. At a glance I see a seated robed figure (meditation site), a stylized “Ti” that I recognize as my private TikiWiki site, and a picture of me, which (if I can stop admiring its beauty for a moment), I know represents my blog.
Create your own mini work of art
Favicons are ordinary graphics, generally 16×16 pixels in size, named favicon.ico. How to make them? I found an easy method that even non-artists can use.
The free site Favicon Generator allows anyone to convert a normal-sized graphic into a favicon. Instructions:
- Go to Favicon Generator.
- Click the “Browse…” button to select an image from your computer’s hard drive.
- Click “Create Favicon.”
- When it’s ready, click the “Download the generated favicon” link to get the files.
- Download the zip file and extract favicon.ico to your computer. Then transfer that file, via FTP or your preferred method, to your website’s root folder (often /public_html or /www).
- View your website with its new addition! (You might have to press the refresh button to make the favicon appear.)
Show your art
If this article inspired you to create a favicon, please add a comment here with the link to your newly enhanced site.
Yes, place the favicon in your document root along with index.php.
Apache should be configured to allow static (non-PHP) files such as .ico, .js and .gif. Here are the commonly used directives:
RewriteEngine on
RewriteBase /
RewriteRule !\.(js|ico|txt|gif|jpg|png|css)$ index.php
Let me know if that answers your question.
How could I implement favicon in Zend environment. Favicon should be in root folder while zend denied all files except index.php from the root.
Would appreciate your reply.
Thanks.
Here’s one: http://statenislandcsa.org/. Worked great.
The instructions worked flawlessly. Thanks, Alan!
Now, if I could just get the rest of the page to load correctly, we’d be fine….
I wanted to create a favicon for my husband’s website, and your article provided easy to follow instructions. For others that may use Fav Icon from Pics, I suggest that you start by cropping your source picture into a square. You can see our fav icon at http://www.robsnotebook.com.