Adding a Little Bling to Your Site

January 26, 2007 | In Merchant Questions, Tricks |

I’ve seen a few merchants ask how to add a favicon to their site. If you don’t know what a favicon is, it’s the small icon that appears for some sites in the address bar of your browser or in the bookmarks or favorites listings.

favicon in address bar
Figure 1: Favicon appearing in the Address bar

favicon in bookmarks
Figure 2: Favicon appearing in Bookmarks.

Adding this to your store is pretty simple. Here are some instructions.

Step1: Create your favicon

You can skip ahead if you already have a favicon ready to go. Creating your favicon can be easy. There are sites that will generate a favicon for you from an image that you upload. Dynamic Drive has one such tool. If you are generating a favicon from an image you have though, make sure it is an appropriate size and design. Your final image size will be 16 x 16 pixels—not much room to work with. As such, you need to start with an image that is square so when it is resized, things stay proportional. Also, while the image you start with may look good at 100 x 100, it may be unreadable when resized. Start with a simple design for best results.

If you are more adventurous and wish to create your own favicon from scratch, there are sites that offer online favicon creator tools to do so. If you want a favicon, but don’t know where to start, many of our Yahoo! Store developers offer graphic design services and can easily help. Once you have your favicon, upload the file (either in the Files area of the Store Editor or the File Manager in the Web Hosting portion of your account).

Step 2: Adding the code for the favicon

After you have your icon, you need to add the link to your favicon.

Store Editor

Add the following code to the Head-tags variable:

<link rel="shortcut icon" href="http://enter-url-here-to-your-store/favicon.ico" type="image/x-icon" />

Building on the Web Hosting side

Add the above code between the <head> and </head> tags of each page in your store.

Notes:

  • Be sure to name your file favicon.ico
  • Be sure to replace the URL listed in the code sample with the full path to your favicon.
  • IE users: You may need to add your site to your favorites, close your browser and then revisit the site to see your favicon appear the first time.

Paul Boisvert
Yahoo! Small Business

P.S. If you need some inspiration in terms of what your favicon could look like, here is a link to a site with a large collection of favicons to use for inspiration in creating your own.

39 Comments »

RSS feed for comments on this post.

  1. Paul-
    Thanks for a great example of one of the little things that can make a difference in helping a site look ‘finished’ and complete! Many of the sites we see it is a bit of an afterthought but it is very nice to get the individual brand reinforcement both in bookmarks and in the address bars. Unfortunately not every site has a unique little icon, but when they do—it can help reinforce and ultimately make the visit be a little bit more memorable!

    Also, thanks for mentioning the Yahoo! designer directory. We love helping folks look good and our technical folks like to help make everything work better! :-)

    Comment by Matthew Ledford — January 30, 2007 #

  2. I followed the instructions and still no luck, only the Yahoo! logo. Do I need to place that code on every page or will the Header in the variables work?

    Comment by Mike F — January 30, 2007 #

  3. Nevermind. I found that copying the exact text (and font) off of your website creates the wrong type of quotation mark. Readers beware!

    Thanks for the help with getting our icon in the toolbar, let alone all the other many topics this blog has helped us with.

    Comment by Mike F — January 30, 2007 #

  4. Great catch Mike. Sorry about that. I have enclosed the code sample in a code formatted tags so the quotation marks are compatible for merchants copying the code directly from the page.

    Paul

    Comment by Administrator — January 30, 2007 #

  5. Very cool!

    But….one more thing…

    If you are using the Editor, you must be sure to:

    1. Name the image “favicon.ico” because that is how it is referenced in the code snippet.

    2. When replacing the name of your store in the code snippet, reference the entire image URL, for example:

    http://lib.store.yahoo.net/lib/mystore/favicon.ico

    Thanks for sharing this nifty little trick!

    Comment by Lynn — January 31, 2007 #

  6. Thanks Lynn. Better to be overly explicit in the instructions than leave something up to interpretation. I have added your points to the Notes section.

    Paul

    Comment by Administrator — January 31, 2007 #

  7. This is cool! We’ve been wanting to add this to our site for a while now. I agree, it helps make the site looks more “polished”, keep ‘em coming!

    Comment by Tim — February 2, 2007 #

  8. awesome! Thanks for the tip!

    For those having trouble copying and pasting, just dump it from this page into notepad, then into your store editor.

    Joe

    Comment by Joe — February 2, 2007 #

  9. For the life of me, I cannot get the favicon to appear. I’ve read all of the notes, created and recreated the favicon, uploaded it into files, placed the link in the Head-tags variable…done everything as instructed, but I continue to only get the Yahoo! favicon. Any ideas as to what I am doing wrong??

    Comment by Greg — February 5, 2007 #

  10. Your icon is accessible in your Files area, but I do not see the code that references the ico when viewing your source code. Two possibilities:

    1) you need to publish or republish your store so the contents of the head-tag variable get added to the published page code. Try updating your Variables which will force a republish for every page in your store rather than just the pages with changes.

    2) your store is using custom templates (nice site BTW). You will want to make sure your templates are still calling the head-tags variable. They may not anymore in favor of other page-specific head-tags.

    Try option 1 first and if no luck, dig into your templates or send your developer an email and ask if your templates are still calling the head-tags variable.

    Paul

    Comment by Administrator — February 5, 2007 #

  11. The orginal message was garbled so I will try again:

    For Microsoft IE only, bookmarking the homepage does not use the home page’s title to name the bookmark entry associated with the favicon, instead it creates this:

    the favicon image followed by http–www.daxstores.com- as the name, which is not the page’s title.

    Why? Firefox does not do this, and non-homepage pages bookmark with the title in IE as I would have expected. It only happens with the store home page, which has a rather long title. Using HTML in the tag, is there any way to force the title associated in the favicon of a page to be something more sensible?

    Mark

    Comment by Mark — February 14, 2007 #

  12. Mark,

    Not sure what is happening there for you. Obviously the code for the favicon is working, just that IE seems to be ignoring your title tag on the home page. The only differences I see are the home page title is quite a bit longer and includes a colon. I don’t think the colon is causing a problem as it should just be another character. The problem may be that IE only uses the title for a Favorite if it is under a certain number of character. You may have good SEO reasons for having a long title tag but it may be worth trimming your title down to see if that is the problem.

    Paul

    Comment by Administrator — February 14, 2007 #

  13. One more problem that I have noticed. On the latest 2. version of Firefox, the favicon only shows after the second trip to a page. That is, if I go to a page and bookmark it in Firefox, the favicon is missing (blank) when you look at the bookmarks. If I go to that page again using Firefox, the favicon is then filled in. Is there any way to get the favicon to fill in on the original click to bookmark it in Firefox? It seems like Firefox is not remembering the favicon reference in the head tag from the orginal view of the page, but it fills it in on the re-reference as it executes the head code again. This behavior is different from IE, which does not have this problem.

    Mark

    Comment by Mark — February 14, 2007 #

  14. Hello. First of all I want to tell you how happy I was to find your site!
    There was blood sweat and tears for something that seamed to be so simple. It just wasn’t.
    I kept missing the part where I had to DOWNLOAD the file into the website through the File Manager first. UGG! Then verify it was there by going to the actualy address. Jeeeesh. :)

    It was the fault of the operator I’m sure but if I can help anyone else out there with the same issue I was having, I’ve got to say that the generator on, http://www.chami.com helped me the most (besides this wonderful blog of course!) because it was a zip file download.
    Please keep help going on the Yahoo Store stuff. WOOOOOO, I’m forever greatful! BRAVO!
    Cheers,
    Shari

    Comment by Shari — February 17, 2007 #

  15. Now, if only there were some way to use the personalized favicon during the Cart and checkout process.

    It’s discouraging to see that Yahoo favicon re-appear the moment you go to the Cart…

    Comment by Rick — February 21, 2007 #

  16. Mark–I’m not sure the issue is not browser-related. I tried bookmarking several other non-Yahoo! sites and I see the same behavior so it may not be a server setting on our side.

    Shari–glad to hear you were able to get this working.

    Rick–You can actually add the favicon to checkout as well. Merchants using Checkout Manager (as your site does) can add the favicon code snippet to the HTML Head area. Go to Checkout Manager, select Page Configuration, and add the favicon code to the HTML Head field. You will need to do this for each page in your checkout.

    The flip side to this is that buyers who are familiar with Yahoo! stores do gain some comfort with seeing Yahoo! in the URL (along with the favicon) during checkout. The high value Yahoo! places on security and privacy lends some measure of credibility to sites that may be new to buyers.

    Thanks for the comments–Paul

    Comment by Administrator — February 21, 2007 #

  17. Excellent - thanks! Personally, I like the extra degree of continuity better than I like looking like another Yahoo customer.

    Comment by Rick — February 21, 2007 #

  18. and trying again…
    please substitute a right bracket for the + and remove the + from the h r e f

    I’m having some trouble with this. The favicon is only showing in FireFox, not in IE or Opera. In FF, it appears in both store and checkout sections. In Opera it appears in neither.

    I have the following code showing in Variables Head-tags:
    <link rel=”shortcut icon” href=”http://lib.store.yahoo.net/lib/gwheellift/favicon.ico” type=”image/x-icon” />

    After publishing and cache-clearing repeatedly, here’s what I see in View Source in both IE and FF:
    <link rel=”shortcut icon” href=”lib/yhst-77503485839888/favicon.ico” type=”image/x-icon” />

    And the favicon.ico only appears in FF.

    What am I doing wrong?

    Comment by Rick — February 21, 2007 #

  19. I can see the favicon for your site in IE 7 and IE 6 and Firefox looking at the home page and checkout (I don’t have Opera installed to test on that). I’ll ask a few others to see if they can see it.

    The code you listed for the published page is correct. The other URL is not valid for Merchant Solutions stores.

    Paul

    Comment by Administrator — February 21, 2007 #

  20. Thanks for checking.

    I discovered that I kept changing the Variable, but had overwritten the Html-head on my home page. My bad. That explains whey it looked the same.

    However, the favicon continues not to display in IE6 or Opera for me, even after a re-boot to clean out any caching I don’t know about. Windows is soooo weird.

    Comment by Rick — February 21, 2007 #

  21. I asked an engineer that sits close to me to check and he was able to see your favicon in Opera and IE 6. No arguments here on Windows being weird at times.

    He mentioned that favicons previously did not get cached if over a certain size but he was uncertain if that problem had been resolved by various browsers.

    Paul

    Comment by Administrator — February 21, 2007 #

  22. I am probably the only person who can not make this work! I have tried everything but I am missing something. I think I need more specific step-by-step instructions.

    I made the favicon and saved it to my files which now show - lib/mysite/favicon.ico - I went into the Variables page and added it under the Head section, it looks like this - I have updated and published, opened a new browser and still no luck, just the Y comes up. Any help would be appreciated.
    Linda

    Comment by Linda — July 12, 2007 #

  23. Linda,

    Your favicon shows up fine in Firefox. When trying to view in IE, I do not see the favicon. When viewing the url for the image directly, I see a broken image in IE. In Firefox, I see the image but looking at the properties your image shows as a JPG file. This is likely the reason your favicon does not appear in IE. I would suggest re-saving your ico file using an ICO file generator so you are sure to get a valid ICO file.

    Paul

    Comment by Administrator — July 12, 2007 #

  24. Thank you for the help Paul but I still can’t get it to work. I didn’t have a program to save it as an ICO so I downloaded a program and converted it but it still is not working. Am I still doing something wrong?

    Comment by Linda — July 12, 2007 #

  25. Linda–
    Your favicon is appearing for me in IE. Keep in mind that favicons in IE will only load if you bookmark them and then access the site from the bookmark at least once. I can now see your favicon after doing so. If you do the same and still see the old favicon, I’d suggest clearing your cache and trying again. Should be working for visitors though now.

    Paul

    Comment by Administrator — July 12, 2007 #

  26. Thank you Paul! It works.

    Comment by Linda — July 12, 2007 #

  27. Hello,
    I have the favicon.ico in the webroot on the webserver and the icon itself comes up fine on IE and FF.

    But if I tried to access the icon iteslf from FF as in “http://www.ascofoundation.org/favicon.ico” I get a garbled message on the screen, but when I do the same on IE…its just fine.

    I tried replacing our icon with CNN icon and the same thing happens.

    Any clues or insights will be greatly appreciated.

    Thanks,
    Naveen

    Comment by Naveen — August 2, 2007 #

  28. Naveen,

    The problem would seem to be with your image. When I download your image and another ico file I am able to see the properties of the other ico file and view the image. For your image, no properties appear and the file cannot be previewed. So, I would look to the program you used to save the file.

    On the other hand though, and I hope this is not too harsh sounding, why would you care? The ico appears file in both browsers so what is the concern around direct access to the file? Does this cause a real problem?
    Paul

    Comment by Administrator — August 2, 2007 #

  29. Could anyone do me a big favor and detail the exact steps for adding the favicon, if you simply using the yahoo store editor?

    Comment by mike — August 27, 2007 #

  30. Mike,

    Assuming you have created and uploaded the ico image and are in the Store Editor, the only exact steps missing are:

    1) Click the Variables button in the Editor toolbar.
    2) Find the Head-tags variable.

    Then simply paste the code as shown, change the url to your domain to reference your ico file, and click Update.

    Paul

    Comment by pboisver — August 28, 2007 #

  31. Help! I’ve been trying to add a favicon to our Yahoo! store for a week. It sounds so easy, but I’ve tried and tried and can’t get it to work. What am I doing wrong???

    We have a grandfathered classic Yahoo store (not Merchant Solutions). I created my favicon easily enough. Here is a link to it:
    http://lib.store.yahoo.net/lib/atlashomewares/favicon.ico

    Using the file upload in the manager I uploaded the favicon(see the URL above). I tried adding the code in the head tags section, to no avail. I think that it must have something to do with the file name, although I’ve tried it dozens of different ways. I even tried uploading it to another site of ours:
    http://www.onlineknobs.com/favicon.ico. But no luck with that idea either.

    Can you tell me what I’m doing wrong?

    Comment by Valerie — November 5, 2007 #

  32. Valerie,

    The source code of your page shows you have inserted the favicon code within another script tag. You need to ensure the HTML code for this is not within this other script.

    Do that and it should work.

    Paul

    Comment by pboisver — November 5, 2007 #

  33. Not sure what I did, but I played around a bit more and finally got it!

    Comment by Valerie — November 5, 2007 #

  34. I have tried doing this step-by-step, and we don’t have a head-tags option in our Yahoo store variables. Have they changed this option?

    Comment by Jill — February 1, 2008 #

  35. Jill,

    If you don’t see the head-tags variable, be sure you are in the advanced mode of the Editor by clicking the red arrow at the end of the Editor toolbar. Some variables are not visible to edit unless you are in advanced mode.

    Paul

    Comment by pboisver — February 1, 2008 #

  36. when i add an item from catalog manager or by uploading I cannot find the field to put my item in a catagory….. where is it?

    Comment by paula lewis — February 3, 2008 #

  37. Hi, This sounds so nice - and I’ve implemented it, except that most browsers don’t need the whole in there at all. But now yahoo has automatically installed it’s flavicon in place of mine on my website! I’m totally stumped. I hope they can soon change this back to normal. I want my own favicon, not the yahoo one.

    Comment by Katinka - Spirituality — February 22, 2008 #

  38. I have read through every step. I have uploaded the .ico image through strore editor “files”.

    I have pated the following into the head tags on my variables:

    http://lib.store.yahoo.net/lib/autographedprosportsmemorabilia/favicon.ico

    While using Firefox and opening a new tab, typing my url directly into the address bar, no bookmarks, my site shows up with NO yahoo icon but a windows icon.

    Any ideas?

    Thanks

    Comment by Steve — May 11, 2008 #

  39. Steve,

    The path to the ico file in your code is not correct. You referenced your domain name but the lib files will be under your store id: yhst-17417515235717

    If you try to access the file directly you will see it doesn’t work. Fix the path and publish and this should work.

    Paul

    Comment by pboisver — May 12, 2008 #

Leave a comment

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Disclaimer and Reminder. The opinions expressed here are not necessarily the opinions of Yahoo! and we assume no responsibility for such content. Yahoo! may, in our sole discretion, remove comments that are off topic, inappropriate or otherwise violate our Terms of Service. Please do not post any private information unless you want it to be available publicly and never assume that you are completely anonymous and cannot be identified by your comments.

Copyright © 2006 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.
Copyright © 2006 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service