How To Insert A Favicon In A Website

how to nsert a favicon in a website,i tried a lot of code but it didn't show in my browser.plz tell me ,what may be the size and how to create a favicon in a website.???also how to make a favicon?????

Are you using .ico file for favicon? Other image formats won't work. Design your image with 16px X 16px and then convert it into ico format, and then try again. Google for some image convertors. By the way are you just using html? or any CMS? Please post what you've tried and we'll try to troubleshoot that..

Traditionally the favicon is called favicon.ico and inserted into the same folder as the web page. Browsers then automatically pick it up. As xpress has said, you'll need to find some software that can create ICO files. Alternatively there are a few websites that let you create a basic icon and download the ICO file. Newer browsers are now adding support for PNG, GIF and JPG files as icons, although you will need to tell the browser where these are stored with the following code:

<!-- For a .ICO file --><link rel="icon" type="image/vnd.microsoft.icon" href="http://forums.xisto.com/no_longer_exists/; /><!-- For a .PNG file --><link rel="icon" type="image/png" href="http://forums.xisto.com/no_longer_exists/; /><!-- For a .GIF file --><link rel="icon" type="image/gif" href="http://forums.xisto.com/no_longer_exists/; />

For Internet Explorer you need to use the following code, because Microsoft just hates standards...

<link rel="SHORTCUT ICON" href="http://forums.xisto.com/no_longer_exists/; />

Wow.... what's with all the professional coding??? o_0But anyway... yeah, like the two different moderators said, if you want to get a favicon for your site, you will have to create a image that ends with .ico instead of the normal extensions like .png and .jpg. I believe that you can do that on photoshop, though I'm not sure.... :-/ But anyway the main problem will be getting the image favicon to end in a .ico extension. Of course, if you can't do that, you can always use rvalkass's pro coding skills and intergrate that into your site.... :)Good luck!!!! :D

On the subject of software that can create them:You need to make sure the image is square, usually 16x16, 32x32 or 64x64 pixels. You will also most likely need to limit the palette of the icon to the colours you actually use. Then save it as an ICO file. The GIMP can create and save ICO files, and is a fully-featured image editor. There are also plenty of tools out there to create ICO files, and tools to convert other images files to the ICO format.

Hey, this is new information. I don't know whether you use Photoshop or not, but anyway, after reading your favicon.ico thread, I realised that I need to change my own favicon.ico on my site as well, because it is the default Drupal one.

 

It turns out that Photoshop does NOT support .ico files, but I have read somewhere that there are tools out that that is able to covert you picture for you, and I tried it and it worked. Okay, so here are the steps....

 

1) Firstly, make a 16 x 16 (pixels) picture on any image creator (like Photoshop or Paint or any free software on your computer)

2) Secondly, save it as a .jpg or a .png file. I think that .png would be better because it allows a transparent background. Doesn't apply to me, but anyway, I still use .png over .jpg because I like it better and I think it has better quality. :D

3) Search Google for "Favicon Generators". Alternatively, you can go here:

 

http://forums.xisto.com/no_longer_exists/

 

Because I used this site, I will continue the tutorial with this site.... I love it a lot!!!

 

4) Upload your premade 16px X 16px onto the site.

5) Wait until the website loads again.

6) Now, you won' t be able to see it there. You will have to scroll DOWN to get your prize. Took me a little while to figure that out. Download the image. It should be in .ico format...

7) Upload it up onto your site via FTP. I don't know, I use the Drupal CMS, so I only had to upload it. But it seems like if you are not using any CMSs, you may have to do some coding, like what rvalkass did, and alternatively, (again), there are instructions on the website that I have provided if you scroll down to the bottom as well....

 

And that's all I can do for you. The rest is up to you... Good luck with your favicon.ico!!! Check out the one I have made on my site/blog. Rather plain, but I like it.

Just to help out even more, here are some tips and steps.

1. Make a 16 x 16 .ico file using your favourite Graphics Editor, make sure it is 16 x 16 or it will be too big.
2. Upload it to your website, make sure you take not of the exact URL of where it was uploaded to.
3. Go into the head part of your HTML document, and add this:

<link rel="icon" type="image/vnd.microsoft.icon" href="ICO LINK GOES HERE">

Of course, IE hates following the web standards, which makes it a pain, but dont worry, there is a fix, add this as well:

<link rel="SHORTCUT ICON" href="ICO LINK GOES HERE"/>

Hope I helped you out

It turns out that Photoshop does NOT support .ico files, but I have read somewhere that there are tools out that that is able to covert you picture for you, and I tried it and it worked. Okay, so here are the steps....

Yes, Photoshop by default, doesn't support .ico files. But you can use the ICOFormat plugin to create .ico files in Photoshop. Its a free plugin and just 27kb in size.

Download it from here Download ICO format plugin for photoshop . then extract and copy the ICOFormat.8bi file to File Formats folder in Photoshop Plug-ins directory. Now you can create and save .ico files in photoshop.

Yes, Photoshop by default, doesn't support .ico files. But you can use the ICOFormat plugin to create .ico files in Photoshop. Its a free plugin and just 27kb in size.

Download it from here Download ICO format plugin for photoshop . then extract and copy the ICOFormat.8bi file to File Formats folder in Photoshop Plug-ins directory. Now you can create and save .ico files in photoshop.

Hey, nice!!! And there is a version just for Macintosh computers as well!!! Well, I don't actually need it, since I can use the .icon generator mentioned above, but I'll download it down anyway just for the sake of it... And it is much, much, more convenient too!!! Thanks for sharing it with us!!! Cheers.

very useful information. although, i added my favicon a whole ago. but didn't know that i should add a different code for internet explorer. in fact after i read this post i checked my website in internet explorer 6 and OOPS.. it doesn't show. even i test my website in many browsers including internet explorer, every time i add a simple code. but i really didn't noticed that my favicon didn't show in internet browser at all.

any way, here is how i made and add my favicon:
first i slice a part of my website header to make it an image that i can use it as a favicon, i did that because i want something related to my website or you can make some kind of letter or symble refer to your website.

after that i resize it to 32*32 pixel and save it as gif. i did all that in photoshop cs3, i hope you know how to use it.
then i upload the image to the media library because i am using wordpress, i don't know about you but you should put it in the images folder.
then add this code to the header file (header.php) or the head tag in HTML

<link rel="icon" type="image/png" href="yourlink">

i hope that will helpful for you

if you don't own a host you can find icoj.com and upload it tere plus it has a lot of free favicons that are ready to use, but creating your own would be unique

i hope that will helpful for you

 

http://dp.g.doubleclick.net/apps/domainpark/domainpark.cgi?client=&domain_name=ww1.tutorials99.com&channel=&drid=&output=html

 

http://dp.g.doubleclick.net/apps/domainpark/domainpark.cgi?client=&domain_name=ww1.tutorials99.com&channel=&drid=&output=htmltutorials/HTMLCSS/Tips--Tricks-/page_1