PDA

View Full Version : Browser Icon in URL Bar



lechef66
02-11-2007, 07:37 PM
I would like to know the specifics of adding a branded type logo or image beside a website address in the URL address bar. Just look up at your own address bar to see the Dynamic Drive logo to the left hand side of the web site address. This is the sort of thing I would like to add into my own website.

BLiZZaRD
02-11-2007, 07:50 PM
It's called a favicon. Instructions and guides to make one (including an automatic version) are right here on DD. Look to the right from the main forum index and you will see the favicon generator link :)

lechef66
02-11-2007, 07:58 PM
Thanks for the really quick reply, I'll check this out right now.

lechef66
02-11-2007, 07:59 PM
Thanks for the really quick reply, I'll check it out right now.

BLiZZaRD
02-11-2007, 08:04 PM
You can make your own, although the DD version is a little quicker. Just to let you know how it works:

16 pixles by 16 pixels is standard, 32 X 32 is used as well.

Take ANY picture you want, resize to those dimensions and rename it to "favicon.ico"

Upload to your root directory and you are pretty much done.

See the link I mentioned above for some IE hacks (codes) to include on your pages to ensure it appears in all browsers.

You can take a gander at my site (http://cleverwasteoftime.com) to see that even animated favicon's are possible.

Have Fun!

djr33
02-11-2007, 11:16 PM
Well... it would need to be in .ico format. I don't think any gif or jpg that happens to be that size and named .ico would work.

BLiZZaRD
02-12-2007, 06:43 PM
I beg to differ :D I made my animated ones with Animation Studio, using a 96 X96 image gif resized to 16 x 16, animated them together into one gif, renamed to ico and it has been up for almost 2 years now :)

Which reminds me... time for a new one...

djr33
02-12-2007, 10:17 PM
Interesting. I wasn't aware of the simplicity of the .ico files.
Just gif? Or jpg? png? bmp?

BLiZZaRD
02-13-2007, 06:12 PM
From all the ones I have made (only about 6) it doesn't seem to matter. I have used png, jpg and gif so far, just renamed as favicon.ico and it's up and active :)

djr33
02-14-2007, 12:36 AM
Very interesting.

MStrong
09-08-2008, 05:13 PM
Good Day, Guys.
I realize that this thread is a bit antiquated, however I believe that I could use some advice.
I'm having a problem enabling a url-bar/favorites Icon (favicon).
I've followed the instructions in this thread, as well as threads on many other sites, and I've even used your online favicon icon creater (among other methods) to create an icon for our companies web page.
I've attempted to add the code snippets that were recommended on the favicon maker page (as well as other versions of the same code from other forums / websites); Placing the code (in various forms and in various places) in the {Head} section of my page code (Used {'s so not to look like actual code).
I've tried identifying the favicon.ico file in the code by href.=ht.tp://domainurl\favicon.ico, href.=ht.tp://domainurl\images\favicon.ico and simply with href.=favicon.ico. (Again deformed strings to not emulate actual code).
Our company uses IE7.0 (with all updates) as the only sanctioned browser within our enterprise. For security purposes our website files are not located in the default inetpub location, however I've placed the favicon.ico file in: inetpub, inetpub\wwwroot, webs\internal (the sites root folder), the \images\ folder of our site, and copies everywhere inbetween. I'm running our companies web server in-house (Win Svr 2003 Std w/ IIS 6.0 +frontpage extensions installed) and I've designed the page in Frontpage 2003 (FPage 6.0).
I can browse to the url\favicon.ico and successfully view the image on in a blank page.
Frankly, I'm at a loss as to what I'm doing wrong.
I'm hoping that someone may be able to suggest to me another avenue to explore that I may be able to troubleshoot why my icon is not showing up. As I've mentioned, I've created several versions of the icon file: 16x16 x8bit color, 32x32 x32bit color, etc.) I can post a copy of the HEAD portion of my page's code if you think it'll be of assistance, but I've not been able to find any reason why this shouldn't work.

TIA! Any advice will be greatly appreciated even if it's wrong :)

BLiZZaRD
09-08-2008, 05:29 PM
upload the favicon (which should be named favicon.ico ONLY) to the root directory of the SITE. so on same level where I would see the index page of your site if I went to http://www.yousitename.com .

In the HTML of your pages you want it to look like this:



<html>
<title>Page Title</title>
<head>
blah blah
<link rel="shortcut icon" href="favicon.ico" />
</head>

<body>


The trick is to be patient. While Firefox and others will usually show the icon immediatley (and even without the <link rel="shortcut icon" href="favicon.ico" /> line) IE can and does take upto 72 hours to display icon files.

Simple as that.

MStrong
09-08-2008, 06:08 PM
All is as you have described.
I'm even using the version of favicon.ico that was made by DD's favicon maker (which was vastly superior to the quality of others).
Is there a chance that another line in the HEAD code could be interfering with it? (it's all metadata created by frontpage).
The TITLE line WAS placed in the HEAD portion of code by Frontpage, I've moved it to above as you've described.
The only other thing that confuses me is why IE specifically would take so long to show such a thing. As I've said, my web server is in house and I restart IIS to recache the pages at various times as I make changes to the code so that I can be assured that the server's cache is not causing my changes not to show. I also check the page source with notepad after each change to verify. I've also deleted my browser cache in the hopes that may make a difference.
I've been working on this since last week and have allowed this past weekend to test for the described delay.

--Still at a loss. Thank you anyway for your advice

BLiZZaRD
09-08-2008, 06:57 PM
Well, that was an error on my part. Title does go in head, I just got excited



<html>
<head>
<title>Page</title>
...


The other data won't cause problems. IE is just a pain, basically plain and simple. IE doesn't always show my favicon's either, and my site has been up since 2005 with a favicon on it.

One must remember that IE is like a small child with ADD, it is cute, can do what it needs to do, but is very literal. As such, favicons were designed at first NOT to be in the URL but in the favorites list. IE does this, and although can and dos display the icon in the URL, it was not designed to do so, and will cause problems. I would set it all up, use an absolute URI ( <link rel="shortcut icon" href="http://thewholesite.com/favicon.ico"> ) and just wait.

MStrong
09-08-2008, 07:09 PM
Right on... I'll set that up and, since i'm the network admin, install firefox to test and see if it makes a difference.
Thank you again for the assistance!!!

***Update:
That was it: Firefox displayed the icon right away. IE - Still nothing. (Thank's again Micro$oft).

At least, now I know that my coding wasn't the problem.

Thanks again for all your input and info!!

-Peace!