Favicon with css?

cormie · 17-05-2009 11:31pm #1

Hi there,
I'm trying to add a favicon to my site, I made a 16x16px bmp and named it favicon.ico and uploaded to root directory of site.

I tried googling but no joy. I read I need to call it using php in a css so I've made favicon.php aswell and uploaded to the root directory.

I've read this is what should be in the CSS:

<?php include "favicon.php" ?>

and then in the php file, should be:

<link rel="shortcut icon" href="favicon.ico" />

I'm having no joy as I've read you have to put favicon in the head, but don't see any head in the css style sheet.

This is the code that's in the first bit of my style sheet:

/* Vantasks Stylesheet */

html{ padding:0px; margin:0px; }

body{ font-family: Arial, Helvetica, sans-serif; padding:0px; margin:0px; background:#252a2d; }

p.breadcrumbs{ color:#333; }

form{ text-align:left; padding:10px 0px 0px 20px; margin:0px auto; }
form p{ padding:0px; margin:0px; }

div#wrapper{ width:800px; margin:10px auto 0px; padding:0px; position:relative; }

div#header{ width:800px; height:170px; margin:0px auto; background:#252a2d url(images/header.gif); text-align:center; position:relative; }
div#header a#homelink{ width:250px; height:150px; display:block; text-decoration:none; position:absolute; top:10px; left:30px; }
div#header a#homelink:hover{ text-decoration:none; }

If anyone can see any reason why this isn't working and could point me in the right direction, I'd really appreciate it

DonkeyStyle \o/ · 17-05-2009 11:52pm

Put it in the <head> of your html.

I like this one where you can use a png...
<link rel="icon" type="image/png" href="ficon.png">

cormie · 18-05-2009 12:12am

Do you mean to put it in the head of each individual page? I don't think I can as my pages are stored in a database?

I made this thread, checked back after about half an hour and closed it and all the windows in firefox etc to leave it till tomorrow, checked the site and now the icon is there

:o

Axwell · 18-05-2009 12:18am

You needed to clear your cache to see the fav icon, you would have seen a cached version of your pages in your browser unless you cleared the history or opened it in a different browser.

cormie · 18-05-2009 1:15am

Ok this is odd! I was trying to get the above codes to work and everything and when I gave up for the time being (after having pressed f5 repeatedly, closing browser {which clears my firefox history} etc), I just reverted the code back to the way it was in the stylesheets, there was nothing about a favicon in them, no reference to the ico file at all in the style sheets, then when I went back to the site, the icon was there :eek:

I wanted to make it transparent so I uploaded another one and now the transparent one is on the site. But there is no code anywhere pointing to the favicon file as far as I know... strange..

Axwell · 18-05-2009 2:01am

cormie wrote: »

Ok this is odd! I was trying to get the above codes to work and everything and when I gave up for the time being (after having pressed f5 repeatedly, closing browser {which clears my firefox history} etc)

Unless you have it set to clear it simply closing down the browser will not clear the history and the cache. I still think what you are seeing is a cached version after making changes and hence while you have no link in your code to the site you see a fav ico however its the last cached one from previously. It wouldnt make sense that with no code pointing to it that your fav ico would be there otherwise.

Ive checked your site now and there is none - which goes with the fact you dont have any in your code suggesting it definitely was a cached page you were looking at. I checked your code and css too for any sign of one and didnt find any.

cormie · 18-05-2009 2:04am

I have it set to clear the cache on closure of firefox

I asked folks on msn if they could see the icon on their browsers/computers and they could but one on IE7 said he couldn't.

Are people here seeing it?

Axwell · 18-05-2009 2:08am

cormie wrote: »

I have it set to clear the cache on closure of firefox

I asked folks on msn if they could see the icon on their browsers/computers and they could but one on IE7 said he couldn't.

Are people here seeing it?

I can see it now on Firefox and chrome but not on ie7

cormie · 18-05-2009 2:16am

Thanks for reporting back. Could you not see it before on ff/chrome? Still very strange about none of the code pointing to it.

I wonder why it's not working on IE7

Axwell · 18-05-2009 2:32am

I had only checked it in ie7 beforehand - what did you use to make the ico and is it definitely a .ico as oppose to a png or gif??
Also is it 16x16 or 32x32??

cormie · 18-05-2009 8:05am

I made it with photoshop in a 16x16 canvas size with indexed colour chosen, saved it as a png and then uploaded it to some website that converts pngs to .ico's, then just uploaded it to my directory. Got the instructions off another site on how to make a transparent favicon so kinda puzzled as to why it's not working on IE but it is on the others?

Thanks again for the continued help

Dades · 18-05-2009 11:03am

Not sure if this helps, but Photoshop (CS2 onwards) allows you to create an .ico file using the "Save As" option. Can't remember if that function is a plugin you have to install though, but handy nonetheless.

cormie · 18-05-2009 2:15pm

No option in mine unfortunately

Any other ideas why it mightn't be showing up in IE?

Eoin · 18-05-2009 6:07pm

I think that Firefox automatically looks for favicon.ico in the directory, but IE doesn't and needs the HTML tag.

Off topic:
In fact, browsers used to only display the favicon when the page was bookmarked, not when the page was just viewed. That meant you used to be able to search your webserver log files for requests for favicon.ico which would tell you how many people had bookmarked your site.

cormie · 18-05-2009 6:42pm

Hmm, it appears firefox does just grab it from the root directory, which I suppose leads me back to the initial question... how can I put it in that css coding

Axwell · 18-05-2009 6:46pm

Why do you keep wanting to put it in the css coding though? This isnt the norm and isnt the way it works. You put the code for it in the <head> section of your code and it gets picked up from that and you leave the favicon.ico in the root directory. Messing around trying to put it elsewhere is just going to cause you more unnecessary hassle.

cormie · 18-05-2009 7:09pm

See all my pages are in a database, so I can't actually get in to edit them, or at least I don't know how. Do I need to add the code to the head of every single page on my website or will just one do? I thought by adding it to the stylesheet, it would add it to all the pages automatically and these being the pages I can't actually access anyway?..

Eoin · 18-05-2009 7:14pm

Do you have access to JavaScript on each page? You could use that to write a tag to the head section maybe.

Axwell · 18-05-2009 7:15pm

Are all your pages not created via the index.php page? If you just put the code in the <head> tage of that it should suffice with the favicon.ico in the root directory.
Once people visit your site its downloaded to their pc anyways so chances are they will enter your site via the index page anyways.

Liam Byrne · 18-05-2009 7:16pm

Axwell wrote: »

so chances are they will enter your site via the index page anyways.

Not if Google has indexed the site properly, they won't!

Axwell · 18-05-2009 7:20pm

Liam Byrne wrote: »

Not if Google has indexed the site properly, they won't!

His site seems to just use an index page and pull in content for the main body so surely no matter what way its indexed the index.php page is always being called and once the code is in the <head> of that it should work fine?

Liam Byrne · 18-05-2009 7:48pm

Axwell wrote: »

His site seems to just use an index page and pull in content for the main body so surely no matter what way its indexed the index.php page is always being called and once the code is in the <head> of that it should work fine?

Had a look back to see where the link was and finally copped via the comented reference in the CSS.

Yes, it appears that the site only uses a single page, so index.php is called for any page URL.

But there could be any number of includes within that, possibly conditional ones, and there could be either templates or code snippets.

OP - your best option is to do a search of all files that are in the website folder for "", and add the favicon.ico code into whatever file you find that in.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link REL="icon" HREF="favicon.ico" TYPE="image/png">

cormie · 19-05-2009 8:09am

Hi,
Thanks very much for the replies. I never even thought of the index.php, I remember messing with it before to change the copyright year, just tested it again by changing hotpebble to hottpebble, and it was hottpebble on all pages once I saved it

It also contained pretty much the exact code you mention above with the charset and everything, so I put the favicon code just below that, unfortunately I don't have IE so can't test it on anything but firefox (where it showed up for me all the time).

If somebody could please let me know if it shows in IE that would be great

All this fuss over a little icon :pac:

Axwell · 19-05-2009 9:41am

Its not at the minute but dont go changing anything, if it works in all other browsers leave it be, IE can be awkward with fav icons and there are numerous accounts on the web about them not showing up then suddendly working so leave it as is and see does it work later

Eoin · 19-05-2009 10:17am

Doesn't work for me, but I'm not sure that IE supports PNG for icons.

Liam Byrne · 19-05-2009 10:55am

Sorry - image type is a typo...

<link REL="icon" HREF="favicon.ico" TYPE="image/x-icon">

You could also try

<link rel="shortcut icon" href="favicon.ico">

Also make sure that the icon is daved as a .ico and that it's uploaded to the same folder as the index.php file.

cormie · 20-05-2009 12:46am

Thanks, just replaced the code with the right code you mentioned above. I don't have IE7 myself, do pages like google and youtube have an icon beside them in IE7? I only have whatever IE is installed with XP which doesn't appear to do favicons for sites?

niimae · 02-06-2009 7:22am

Internet Explorer automatically pulls the file named favicon.ico from the root directory of your website...it does not operate by html meta tags or by css code like FF, GC, Opera etc...To have a favicon display in Internet Explorer you need to:

1 - Upload the .ico file to the root directory of your site.
2 - The file must be named favicon.ico.

To accomplish this, open the root directory of your website (almost certainly a folder named "index") and upload your favicon.ico file into the "index folder." If don't have the software to make .ico files you can download Gimp Photo Shop (http://www.gimp.org/) a free opensource software capable of converting your photos to .ico format.

Cheers!

Ben Sullivan

Eoin · 02-06-2009 10:18am

Firefox pulls it down automatically once it's called favicon.ico, but you can overwrite the filename with markup. IE used to only pull it down when it was bookmarked, but maybe that has changed.

corkie · 02-06-2009 1:27pm

niimae wrote: »

To accomplish this, open the root directory of your website (almost certainly a folder named "index") and upload your favicon.ico file into the "index folder." If don't have the software to make .ico files you can download Gimp Photo Shop (http://www.gimp.org/) a free opensource software capable of converting your photos to .ico format.

And here is a guide for creating them in gimp

niimae · 02-06-2009 9:53pm

Internet Explorer 7 and 8 do support favicons in both tabbed browsing and the navigation bar, but will only pull the file if it is located in the root directory of your site ("index" folder) and named "favicon.ico." Other browsers utilize the same pull method.

However, to provide universal browser compatibility, create a 16X16 p or 32X32 p* file "favicon.ico" and add this text to your HTML (anywhere between the <head> and </head> section):

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

I have tested this on IE 7 & 8, Safari, FF, Chrome, Opera, and KDE - it works perfectly.

Cheers!

Ben Sullivan

* The 32X32 p format adds standard compatibilty for desktop shortcuts.

Favicon with css?

Comments