Tilted Forum Project Discussion Community - Making personal website have it's own "icon"

- Tilted Technology (https://thetfp.com/tfp/tilted-technology/)

- - Making personal website have it's own "icon" (https://thetfp.com/tfp/tilted-technology/88407-making-personal-website-have-its-own-icon.html)

Making personal website have it's own "icon"

In Firefox (and other browsers), many websites (TFP included) have a custom icon that is displayed next to the URL in the address bar, as well as on the quick link bar below it. How do I assign an icon like this to my own personal website?

http://www.thesitewizard.com/archive/favicon.shtml

Quote:

How to Create a "Favicon.ico" File

1.Create an image 16X16 pixels in size. Yes, it is really small and you can't really draw much in it. You should also restrict yourself to the standard Windows 16 colours, although I suspect that 256 colours will work fine.

If you like, you can also create a 32X32 pixel icon, which will be scaled to size for the Favorites menu and the location bar. You can even put both 16X16 and 32X32 pixel icons into the same icon file. Windows will use the former for its menus and the latter when the user opens up a folder that is set to display large icons. It's probably not really necessary to do this if you can't be bothered.

2. Save the image as an ICO file (named "favicon.ico", of course).

3. Upload it to your website. You don't need to upload one to every directory of your site if you don't want to waste space - simply put it in your root directory and IE will apparently locate it eventually. You can also upload it into your images directory, but you will need to modify your web pages if you do. See later in this article for more information on this.

Sweet. Even I used that in less than 5 minutes after reading this!
There was a little detail I never paid attention to that was straight-forward and easy.

Ok, that worked for the address bar, but not for the quick links part under it. I'll keep futzing around with it.

I was just about to ask this.

You have to click on it again, when the browser fully loads the page it will show the link with the icon in front of it.
If you're still having trouble, even with that, then you could try removing and re-adding the link, then visiting the page. That should do the trick.

Quote:

Originally Posted by RelaX

Neither of those worked. And on my other quick-links, they took the custom icon the first time I visited the site automatically.

Wait, now I got it. I erased the quick link. Made a new quick link. Then visited the site via the quick link. Now I just need to fix my icon so the background is clear instead of white...

Thanks, that was really useful. I didn't know how this was done. I also like thesitewizard site; there was other good stuff there!

It doesn't even have to be an ICO file if you use the following LINK tag:

Code:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

The type attribute could be changed to image/gif, image/jpeg, etc., and it would still work as long as the image was 16x16 pixels.

If you must have it in ICO format and your paint program doesn't have an ICO export ("Save As...") filter, here's an online PNG-to-ICO converter:

http://www.degraeve.com/favicon/

The LINK tag thing doesn't work in IE. Best to dumb it down for Microsloth and just stick the favicon.ico file in your document root, as previously suggested.