Favicons are a staple of the modern web. The newer versions of every major browser support them and they are just another way for web designers to further customize the sites they design.
If you don't know what I am talking about, favicons are the little (16px by 16px) images that show up on the tabs of a web page (if you have a tabbed browser), show up in the address bar next to the address, and even show up in your bookmarks/favorites. Firefox, Safari, Opera, and even the newest version of IE support them.
To do them in drupal with the PHPTemplate engine is relatively easy.
First, you need to create the favicon.ico file. This is the file containing your image. You can create a 16px by 16px bitmap file and name it favicon.ico with your image but I use a much simpler method. I take an image I want to use, sometimes right from the site itself, that is about the shape of a square. Then I head over to Dynamic Drive, upload my image, and download the properly formatted favicon.ico.
Now, to add it to drupal with a theme using the phptemplate engine is easy. Just upload the favicon.ico file to the base directory of your theme. The same directory your style.css file is in. Drupal will automatically detect it and do the work to make it display on your site.
If you are using something other than drupal than to have your favicon display will need one more step. Once the file is uploaded to the sever, the following piece of code needs to be up on your web pages in the <head>:
<link rel="shortcut icon" href="/path/to/favicon.ico" type="image/x-icon" />Just change the /path/to to the path to your favicon.ico file and your all set.
Additional Info
Ok, you missed two important parts of the your tip...they are:
1. You can't just use any ol' bitmap file and name it favicon.ico. It has to be in the Windows Icon (.ico) format. Photoshop has this format included in it's 'save as' dialog and you must save it as an .ico for it to work. Renaming won't do the trick.
2. You actually need to put the icon in 2 places on a drupal install. You mention putting it in the root directory, that's one. But you also need to put it in the misc folder as well. That way you'll be assured it will show up correctly.
Word.
drupal and favicons
Good tip with photoshop.
But, for drupal you don't want to put it in the misc folder or the root directory. Not if you are using PHPTemplate (and you are with your drupal 4.7 sites). When you put the favicon.ico file in the folder for the theme you are using drupal detects the file and adds the proper code to your pages to make the favicon display.
The reason behind this is that drupal was designed to be able to use one code base for many sites. There are companies running over 1,000 different sites off of one code base install. In order for every site to be able to have it's own favicon drupal has this ability. The favicon file in the misc folder doesn't need to be touched.
When I updated my favicon for this site by dropping the file in the themes folder the update showed on the next page load, too.
Ico file tips
Hi, guys
Here are couple of tips:
1. ico and bmp are two different formats, you cannot just rename the file
2. you do not need to keep ico file in two places in Drupal. Number of Drupal default themes have
<link rel="icon" href="misc/favicon.ico" type="image/x-icon"/><link rel="shortcut icon" href="misc/favicon.ico" type="image/x-icon" />
directives, so if you have your real ico file there it will work, but many browsers are looking for ico file in the root directory first, so ideally you should keep ico file in the site root directory and modify your template to
<link rel="icon" href="favicon.ico" type="image/x-icon"/><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
3. If one has no Photoshop, there are free options:
http://www.eecs.wsu.edu/paint.net/ - free tool for png files creation
http://www.winterdrache.de/freeware/png2ico/data/png2ico-win-2002-12-08.... - free convertion tool png to ico
4. If you change your ico file, you may be suprised by seeing the old version. Re open your browser, it's just cache
5. see olso:
http://www.favicongenerator.com/ - ico file generator
http://www.chami.com/html-kit/services/favicon/ - picture to ico utility
http://sunshine-slots.com/ - my site
thanks for the tips
Thanks for the info.
The only thing here is if you are running more than one site off of a single drupal install. Having the icon file at the root directory won't allow you to have a different favicon for each site.
And, the code I provided in the text will show the browser where your icon file is. When a browser doesn't find it at the root the page will tell it where to look.