• Welcome to Overclockers Forums! Join us to reply in threads, receive reduced ads, and to customize your site experience!

favicon.ico how to get this to work.

Overclockers is supported by our readers. When you click a link to make a purchase, we may earn a commission. Learn More.

ZGOZZ

Member
Joined
Dec 4, 2003
Location
NJ USA
Hi are you doing.
Well we started our own clan, for all diffrent games not just BF2 well we have a BF2 server 32 man ranked and a TS Server.
Xtreme Gamers Clan Server
IP: 66.199.227.164:16567

Xtreme Gamers TS
IP: 70.87.198.58:878

And I am working on a Sipmle portal page to the forum.
What I am trying to do is get the favicon to work, keep messaging something up.
 
got it using wrong line.
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
This is the right one.

http://www.winterdrache.de/freeware/png2ico/favicon.html

How To Create And Install A favicon.ico
What is a Favicon

Favicon is short for "Favourites Icon" ("Favorites Icon" for you Americans ;). The name is derived from the bookmark list for Microsoft Internet Explorer which is called Favorites/Favourites list. When you add a site to your Favourites/Favorites list, Internet Explorer (version 5 and above) asks the server if it has a file called favicon.ico. If present, this file will be used to provide an icon that is displayed next to the bookmark text.

Other browsers such as Mozilla have also added support for favicons. Depending on the browser, the favicon can appear in a variety of places, not just in the bookmarks list (in fact, it may not even appear in the bookmark list at all). It may be shown in the address bar or the title of a browser tab, for instance.
How to create a Favicon

To create a favicon.ico simply create a 16x16 .PNG file and convert it to an icon resource with png2ico. If you want, you can add more images to the same icon resource to provide alternative resolutions. Most browsers only use a 16x16 image but in a different context (e.g. when you drag a URL from the address bar onto your desktop) a larger icon may be shown. If the icon resource only contains a 16x16 image, this will be scaled to the appropriate size, so technically there is never a need to add alternative resolutions. However, doing so can increase the quality of the displayed icon.

Keep in mind that for a user with a slow modem a favicon.ico may increase the page loading time by a few seconds if it is too large, so don't overdo it. Adding a 32x32 alternative should be enough to make sure the image will look good even in contexts with larger icons. Adding even more and larger alternatives is unnecessary bloat. Try to keep the number of colors below 16 and create a 16-color icon using the --colors 16 switch of png2ico (or even create a b/w icon with the --colors 2 switch). This will result in a smaller file that loads faster.

When you create the images to include in your favicon.ico, don't forget that the icon may be composed against various background colors so you should use transparency rather than a solid background if you want to avoid that your icon appears inside a box. Note, that icon resources only support binary transparency, i.e. a pixel may be visible or invisible but not something like 30% translucent.
Installing your Favicon

To add your new favicon.ico to a web page put it on the server into the same directory as the web page it is for (e.g. www.example.com/foo/favicon.ico for www.example.com/foo/index.html). That is the first place a browser will search. If it doesn't find an icon there, it checks the top-level directory of the server (www.example.com/favicon.ico for the www.example.com server), so by putting it there you can have a default favicon for all the pages in your domain. Depending on browser and configuration, the favicon.ico is not always rendered, even if it is in one of the above locations, unless the web page explicitly declares its presence. To declare that your web page has an icon, you add the following 2 lines into the <head> section of your page:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 
I just put it in the top directory [ / ] with the index page. Any browser that supports favicon.ico picks it up. IE is a turd when your working with favicons. I don't need to add any code. For IE all I do is bookmark the page and it shows. The rest just pick it up.
 
Last edited:
Opera works also with just adding the top level. IE likes to have it bookmarked first. Don't know why it is like that, but it is. lol Working on web pages. You will find a need to be tolerant of IE and its quirks or it will drive you nutzo.
 
wow 57 errors but have no idea what they mean, see what a novice web builder does wrong LOL
 
Read what it is telling you. If there is a term or atrribute you don't know. Find out. This is more then just making sure your pages work right and are compliant. It willl help you hone your skillz.

First thing you need to do is declare what type of doc it is. There is a link to show you an example what to do. You cna pick a few types depending what your going to be doing with the page. Most of the errors will go away once you make the declaration.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>Title</title>
</head>

<body>
<!-- ... body of document ... -->
</body>

</html>
 
Enablingwolf said:
Read what it is telling you. If there is a term or atrribute you don't know. Find out. This is more then just making sure your pages work right and are compliant. It willl help you hone your skillz.

First thing you need to do is declare what type of doc it is. There is a link to show you an example what to do. You cna pick a few types depending what your going to be doing with the page. Most of the errors will go away once you make the declaration.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>Title</title>
</head>

<body>
<!-- ... body of document ... -->
</body>

</html>

Sorry I am a little lost how would you do it on my page in that text?
I would like to thank you for your time on this matter.
 
Instead of just having this at the top of the page:

<html>

Insert in its place:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

your page shows:

<html>

<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Welcome To Xtreme Gamers Clan</title>
<link rel="stylesheet" href="style.css" type="text/css">

It should look like this or there abouts: (from one of my pages)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="shortcut icon" href="Assets/favicon.ico" />
<title>www.enablingwolf.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="Assets/styles.css" />
</head>

Take notice how I have a directory called Assets... It helps keep page crap out of the main and the ftp cleaner and easier to navigate. Once a site grows and gets complex. Having clean directories that eare easy to navigate are a blessing later on. You can lump all the files in one spot if you choose. I wanted to point the differance out between what you might see in my html versus yours. The js needs to be addressed as it is used per application. I think you need to wrap the js inside the head also in your case. :D

Here is a live example of a (simple page for my father in law), I have going:
http://enablingwolf.com/Dale/BluegrassPage.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bluegrass page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="Assets/styles.css"
<link rel="stylesheet" href="lightbox.css" type="text/css"
<link rel="stylesheet" href="lightbox.css" type="text/css" />
<script type="text/javascript" src="lightbox.js"></script>
<style><!--BODY{cursor:url("Assets/guitar.cur");}--></style>
</head>

If you look at the source of various pages you can see how it should look and how it is done. :D
 
Last edited:
IE favicons dont work or something b/c they dont even show up in google for me :-\
 
It has to be bookmarked for it to work in IE. It is a quirk of the browser where it will only show if bookmarked. Then you load the bookmark and it shows. :D
 
http://www.w3schools.com/html/default.asp

This should get you in the right direction.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>Welcome To Xtreme Gamers Clan</title>
 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="/text.css" />
</head>


Then insert your <SCRIPT LANGUAGE="JavaScript"> where it needs to be. See if the copy/paste fixes the favicon.ico issue. :thup:
 
I think I fixed that part thansk for your help man and your sites are sweet.
 
Back