Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Anyone interested in a Favicon Tutorial?

Anyone interested in a Favicon Tutorial?

Locked

Views: 1,621

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
19 Oct 2009, 11:47 AM
#1
cafman avatar

cafman

New Zenner

Join Date:
Jul 2009
Location:
Melbourne, Australia
Posts:
80
Plugin Contributions:
0

Anyone interested in a Favicon Tutorial?

I've just worked out how to get Favicons to show up in several browsers including IE. Favicons are those tiny icons you often see in address bars. Probably most people here already know how to do this, but everyone's been so helpful to me I wanted to give something back. I'll put a step by step tute up here if anyone's interested.
Caf

19 Oct 2009, 2:08 PM
#2
rstevenson avatar

rstevenson

Totally Zenned

Join Date:
Nov 2006
Location:
Dartmouth, NS Canada
Posts:
2,400
Plugin Contributions:
0

Re: Anyone interested in a Favicon Tutorial?

Sure! There are lots of favicon tutorials on the web, but I'd be interested in seeing what may be unique to Zen Cart. So I'd like to read it.

Rob

20 Oct 2009, 4:14 AM
#3
cafman avatar

cafman

New Zenner

Join Date:
Jul 2009
Location:
Melbourne, Australia
Posts:
80
Plugin Contributions:
0

Re: Anyone interested in a Favicon Tutorial?

Okay, here it is.

FAVICON TUTORIAL

First I made the icon on Photoshop after finding a tutorial here:
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
and downloading a free icon-making Photoshop plugin from here:
http://www.telegraphics.com.au/sw/

Next, I used an FTP program to upload the icon (named favicon.ico) to /var/www/html/shop

Finally I copied these two lines of code:

<link rel="icon" href="http://www.my-bookcafe.com/shop/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.my-bookcafe.com/shop/favicon.ico" type="image/x-icon" />

and pasted these two lines into the file after line 27 in
/var/www/html/shop/includes/templates/CUSTOM/common/html_header.php

It fits in like this:

23<head>
24<title><?php echo META_TAG_TITLE; ?></title>
25<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
26<meta name="keywords" content="<?php echo META_TAG_KEYWORDS; ?>" />
27<meta name="description" content="<?php echo META_TAG_DESCRIPTION; ?>" />
28<link rel="icon" href="http://www.my-bookcafe.com/shop/favicon.ico" type="image/x-icon" />
29<link rel="shortcut icon" href="http://www.my-bookcafe.com/shop/favicon.ico" type="image/x-icon" />
30<meta http-equiv="imagetoolbar" content="no" />
31<meta name="author" content="The Zen Cart™ Team and others" />
32<meta name="generator" content="shopping cart program by Zen Cart™, <http://www.zen-cart.com> eCommerce" />

And it works beautifully in Opera, IE, Firefox and Safari. :clap:

20 Oct 2009, 4:34 AM
#4
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
177

Re: Anyone interested in a Favicon Tutorial?

cafman:

First I made the icon on Photoshop after finding a tutorial here:
http://www.photoshopsupport.com/tutorials/jennifer/favicon.html
and downloading a free icon-making Photoshop plugin from here:
http://www.telegraphics.com.au/sw/Thanks for the tips on some resources to make favicons.

cafman:

Next, I used an FTP program to upload the icon (named favicon.ico) to /var/www/html/shop

Finally I copied these two lines of code:

<link rel="icon" href="http://www.my-bookcafe.com/shop/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.my-bookcafe.com/shop/favicon.ico" type="image/x-icon" />

and pasted these two lines into the file after line 27 in
/var/www/html/shop/includes/templates/CUSTOM/common/html_header.phpThe rest of what you stated is automatically handled by Zen Cart without requiring edits to html_header.php

Related FAQ: https://www.zen-cart.com/tutorials/index.php?article=52

22 Oct 2009, 7:38 AM
#5
cafman avatar

cafman

New Zenner

Join Date:
Jul 2009
Location:
Melbourne, Australia
Posts:
80
Plugin Contributions:
0

Re: Anyone interested in a Favicon Tutorial?

DrByte:

The rest of what you stated is automatically handled by Zen Cart without requiring edits to html_header.php

Related FAQ: https://www.zen-cart.com/tutorials/index.php?article=52

I thought so too, because I had read about it, but for some unknown reason the icon never showed up until I'd put the code in the header file. <shrug> I don't know what I was doing wrong, but it works now, so I'm happy!

3 Nov 2009, 4:09 AM
#6
cafman avatar

cafman

New Zenner

Join Date:
Jul 2009
Location:
Melbourne, Australia
Posts:
80
Plugin Contributions:
0

Re: Anyone interested in a Favicon Tutorial?

Well, now I feel rather daft for having started this thread. :oops:

Don't know how I could have overlooked the Ultimate Zen Cart Favicon Tutorial at https://www.zen-cart.com/tutorials/index.php?article=52

I've re-vamped my own tutorial now, based on that really good tutorial, so I figured I'd better update this thread.

As Dr Byte pointed out, it is unnecessary to add those two lines of code to shop/includes/templates/CUSTOM/common/html_header.php

So don't add them. Just make sure you FTP your finished favicon to the root (ie: "public_html" or "httpdocs" etc) directory of your web server. Not your 'shop' folder where had I daftly put it.

After I had fixed these two issues my favicon showed up in Opera and IE, but not Firefox and Safari.

So it's back to the really good tutorial. Which advises:
QUOTE [If you wish to have each page setting the favicon data explicitly, you can simply open your /includes/languages/english/YOURTEMPLATE/meta_tags.php file and uncomment the define for FAVICON as shown:

// favicon setting
// There is usually NO need to enable this unless you wish to specify a path and/or a different filename
define('FAVICON', 'favicon.ico');

With that set, Zen Cart will explicitly mention the favicon settings on every page, automatically."] UNQUOTE

So I did that, and now my favicon shows up in Firefox but still not in Safari.
I've given up on getting it to show in Safari.

But I'm a lot happier with this result because it doesn't mess with the code in common/html_header.php

caf

3 Nov 2009, 5:28 AM
#7
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
177

Re: Anyone interested in a Favicon Tutorial?

Many times if the browser isn't showing the icon just by visiting the site, if you bookmark the site, the icon will then show since it gets cached.

4 Nov 2009, 1:09 PM
#8
cafman avatar

cafman

New Zenner

Join Date:
Jul 2009
Location:
Melbourne, Australia
Posts:
80
Plugin Contributions:
0

Re: Anyone interested in a Favicon Tutorial?

Thank you Dr B! :smile: