Using a favicon with Safari

Posted by Pierre Igot in: Macintosh
November 24th, 2003 • 4:33 am

Some of you might have noticed that, over the past few weeks, I have been experimenting with using a “favicon” for my Betalogue web site:

favicon

I think I got it to work in most situations now, but I must admit I am still not entirely clear about the whole thing. I would probably need to do more research on the issue, but now that it’s working, the incentive is just not there. I just thought I’d mention a few things I noted along the way, in case they can be useful to other people.

  • As far as I understand, in theory there is more than one possible picture size for favicons. The “.ico” file that you’ll use for your web site can actually contain several different icon sizes. I am not sure what the purpose of these different picture sizes is (I read something about large sizes being used for bookmark file icons in Windows), but I don’t think Mac users have any uses for sizes other than the default size. So I narrowed it down to that default size, which is 16×16 pixels. It’s always best to keep things as lightweight as possible.
  • On the Web, you will find tutorials to create a favicon using various software titles, including GraphicConverter. I ended up using Photoshop and the free Photoshop plug-in provided by Australian software company Telegraphics.
  • I created a 16×16 icon, and then converted it to the BMP format (just in case), and then changed the mode to “Indexed Color” and chose the Windows system color palette. I then saved the file as an “.ico” file using the above-mentioned plug-in.
  • It wasn’t entirely clear to me right away, but the file must be named “favicon.ico”. It cannot be called anything else. (I tried “betalogue-favicon.ico” at some point, but that didn’t work.)
  • I put the file in my site’s root folder at www.latext.com/ and added the needed HTML code to my index page. After this, the icon would appear correctly in the title bar in Camino, but not in Safari. As I understand it, if you put the file at the root level of your web site, it’s supposed to “trickle down” and appear in the address bar for any page in your web site. Well, this does seem to be true for Camino, but not for Safari.
  • In order to make the icon appear in the address bar for Betalogue at www.latext.com/pm/betalogue, I actually had to put a copy of the file inside the pm/ folder and add some HTML code to the betalogue file as well.

So there you are. As far as I can tell, the favicon now appears properly in Safari and in Camino. Favicons don’t appear to be supported by Internet Explorer for the Mac. I haven’t tested things in Windows yet.


17 Responses to “Using a favicon with Safari”

  1. Citizen Keith says:

    You’ll find that IE for Mac or Windows doesn’t work. However, you it will indeed work in Mozilla for both systems, plus Linux.

  2. Will says:

    I only get the favicon on the main page and the “story with comments” page, but NOT on the page that is linked to from NetNewsWire.

    Is there any way to have the link from NetNewsWire to the “story with comments” page? At the moment it’s a bit annoying having to reload the story with the comments just in order to read the comments that are there — I don’t think you’re losing out on anything by having the comments always shown.

  3. Pierre Igot says:

    Keith: Any idea why it wouldn’t work in Windows? It’s all a bit puzzling to me.

    Will: Unfortunately, pMachine doesn’t let me customize the RSS feed at this point. I agree that a direct link to the story with comments would be better. I just haven’t ventured into pMachine hacking territory just yet :-).

    I also hope that version 3.0 (whenever it comes out) will have more options for RSS feeds.

    Not sure why you are not getting the favicon with the post-only pages either. Weird.

  4. Robert says:

    The favicon appears in Opera 7.0 for windows for the main page. (http://www.latext.com/pm/betalogue) But not for this page. When it appears, it does look nice!

  5. Pierre Igot says:

    Boy, it looks like there are as many different behaviours as there are servers and browsers.

  6. ozean says:

    Pierre: In your screenshot the favicon seems to be green and having an egg-shell colored background. Using both Camino and Safari on my machine the B is black, not green although the background seems to have the egg-shell color (which looks a bit awkward against the otherwise white URL field IMO)…

  7. Pierre Igot says:

    Mmm, this is getting weirder all the time…

    I agree about the egg-shell background. It matches the background used for the site, but is not really suitable for a favicon. My next goal is to learn how to do transparency :).

    As for the colour of the symbol, I have no idea. :-(

  8. Toby says:

    Hi,
    I wrote the Photoshop ICO plugin. Early versions had a bug relating to transparency. The current version works fine. If you’re getting “weird” results with transparency, download the current version.

    Toby

  9. ben says:

    I am having alot of trouble getting this to work. I am using photoshop cs with the telegraphics plugin, saving the 8bit, 16×16 pixel icon as a .bmp then as an .ico, and even pasting the exact HTML code (customizing of course) as above. Could someone email me with the possible solution (or leave it here)?

    I am running mac osx panther with safari 1.1.1, they do not show up on a windows xp machine with explorer either.

    It is a tad frustrating spending three hours trying to get something as tiny as this to work, it is driving me crazy!

    HELP!

  10. Micky says:

    Some may find this helpful:

    Microsoft favicon documentation

  11. Toby says:

    I have seen some sample code (and how-tos) that incorrectly suggest a MIME type of “image/ico”. The correct MIME type is “image/x-icon”. Perhaps this will help some of the reported difficulties:

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

  12. Brian says:

    I has simular problem with getting favicons to work.

    I was able to get them to work in Safari with:

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

    and the tag

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

  13. zro says:

    wow….. ive been trying to do this for like 4 hours now….. CANNOT get it too work…
    but this is by far one of the nicest ”tutorials” on it ive found……. cool awesome thanks.

  14. Gman says:

    I have been trying to get this to work and have followed every bit of advice on this page, but cannot make the favicon work! I know that I have correctly saved the favicon and I have have used the html script on this page, but all I get is a favicon that looks like a safari page. I am using Safari 1.2.2. I am putting the html on the line right after the <head> tag in my code. Can anyone give me any more ideas? This is rather frustrating for something that should be so simple!

  15. Toby says:

    Gman – Try quitting Safari; try emptying its cache. It’s often hard to get Safari to flush cached info & update from the server.

  16. Pierre Igot says:

    Please note that the favicon cache is located here:

    ~/Library/Safari/

    It’s the folder called “Icons”.

  17. grommett says:

    If you have tried all the above suggestions and Safari STILL won’t show your favicon, make sure you have removed any ‘old’ bookmarks. By that I mean if you bookmarked a site that did not have a favicon and then you add one, the bookmark seems to remember there was no favicon.

    I was having hell with this until I removed all ‘old’ references in in my bookmarks, then suddenly it should up beautifully!

Leave a Reply

Comments are closed.