Add an easy favicon widget

There should be an option in the theme to add a favicon. Just like there is for a header picture, etc.
3 people like
this idea
+1
Reply
  • Greetings again Marc,

    This is a great idea and I have already suggested this to our developers. My hope is we will see something like this soon. I am sorry I don't have a firm time frame right now.

    However, you can use Java Scrip to do this on your site right now if needed. Here are those instructions.

    The code to add an icon to the WebStore is:

    Instructions:

    Save an image file as a .ico using an image editor (not compressed .png)
    Upload this file to your file library.

    Click on the file in your file library, then click on the link/URL at the bottom of the page, this will pop up a new window and display the icon. Copy URL out of the browser. It should look something like this:

    https://images-na.ssl-images-amazon.c...

    Now go back to merchandising and layout.

    Make sure the "Go to" bar indicates (and only that, so the change is site wide): My WebStore >

    Drag and drop an html widget onto the page, and insert the code, and replace the URL in the code. The result should look something like this (according to my previous example):

    Click apply to save widget changes and publish the WebStore.

    It will give an advanced HTML error but it will display properly on the live site if you are published to an external domain or have advanced html enabled.

    I hope this helps!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • This reply was removed on 2012-01-07.
    see the change log
  • This reply was removed on 2012-01-11.
    see the change log
  • This reply was removed on 2012-01-11.
    see the change log
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • 2
    After scouring the internet, I could not find a way to add a favicon to my webstore. After a day of deliberation, I theorized that it may be possible to add a favicon using javascript. Here is my code, free to use:

    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon....;
    document.getElementsByTagName('head')[0].appendChild(link);

    Instructions for use:
    1. create a favicon using a favicon generator (like http://www.favicon.cc).

    2. Upload this favicon.ico file to your images in your webstore file library (copy down the path for future use)

    3. Create a new document in a text editor like notepad and paste the script above

    4. Edit the 4th line of the script to put the path to your favicon.ico image that you saved in Step 2.

    5. Save this file as favicon.js on your desktop

    6. Go to your Merchandising and Layout page and click on the master page My Webstore.

    7. In the top right corner click "properties" > "CSS and Script Links"

    8. Click on the button next to Link JS files: that says Add

    9. Click Theme Files > Active > JS and then hit Upload File

    10. Find the favicon.js file you saved to your desktop in Step 5 and upload.

    11. Click finish and you'll see It has been added to the long grid of JS files. Find the favicon.js script in this list, it will be in alphabetical order.

    12. Click on the favicon.js icon and click Select. Then Click OK.

    13. Publish!

    When it is done publishing you will have your favicon!
    • Thank you ThinkFastToys!
      I've followed your steps (not Amazon's) & I am waiting to publish (because I am waiting for seller support to fix something that involves the technicians).
      It is perplexing to me why 1 we (the users) have to do this work, 2 why we have to finish Amazon's own solution reply, & 3 why this thread is marked as implemented. I wonder if this response will be removed ... maybe an independent forum should be started, or maybe I should just start using one of the numerous alternates to Amazon Webstore.
    • You know, you're right, this has been marked as implemented. It SHOULDN'T be because it only works 100% of the time in Firefox. Chrome and IE pick and choose if and when they allow the favicon to be overwritted with javascript.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • There are 2 threads on this topic and I have tried most of the suggestions on both and can't get it to work (I have favicons working on all my other sites...).

    Does anyone have the correct CURRENT method to implement/display the favicon feature?

    This thread was answered as 'implemented' but I don't see the implementation...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • This reply was removed on 2012-06-13.
    see the change log
  • 1
    Did my previous post not help? I have the javascript method (posted step by step above) implemented on our sites http://thinkfasttoys.com and http://thinkfastbaby.com
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m Ecstatic - A site without a favicon is like a school without a mascot!
    1
    OK, I finally got this to work - THANKS!

    Initially, I was getting a 'requires approval' message - and it didn't work

    I also had to change the/my domain name per another post:

    ================================================

    https://getsatisfaction.com/amazonweb...

    "It looks like you are currently on the webstorepowered domain. On this domain, there is actually a JavaScript approval process in place. If you opt to use the EC2 Proxy, you can upload unrestricted JavaScript without an approvals process.

    This is a simple process that only requires you to change your domain name to a different amazon sub-domain.

    To change your domain name:

    1. Click the Settings tab.
    2. Click the Control Panel link.
    The Control Panel is displayed.
    3. Click the plus sign to the left of the General Webstore settings section.
    4. Click Domain Name.
    The Configure your domain name page is displayed.
    5. Select the option Use your own domain name
    6. Enter your store name followed by hostedbywebstore.com
    For example: beetailer-test-store.hostedbywebstore.com
    7. Confirm that you own the domain.
    8. Click Submit.

    After you have done this, you should be seeing your JavaScript perform as expected when you preview the site. Switching to this domain also allows the use of Advanced HTML."

    ================================================

    BTW, Nicely done site (your's)! How many development hours do you have invested in it?... (rhetorical, lol).
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I’m Glad to help!
    4
    Thanks! We have about 4 weeks/8 hour days M-F from sketch to developed theme for each site. The Amazon platform is frustrating at first, the documentation for developers is non-existent. However I do have to say that Amazon Webstore is much more polished than other channels theme builders.

    If you are doing more than basic color swapping, and want to delve into a fully customized css, I strongly recommend creating your own CSS files for each page type, not trying to amend the existing overrides.css like many people do.

    Use the basic theme, and keep all of the existing css in place,
    then create a master.css,which you would link to your My Webstore Master Page. Keep your master template styles in here.

    Then create a css file for each Master Page type, such as three-column-category.css, product-pages.css, search-page.css etc. and link them to their respective master files

    This is not in accordance with most development standards, and I wouldn't advise it for any other platform, but this system will make your life much easier when it comes time to make edits and bug-fix. Otherwise you'll end up with a huge overrides.css file and you'll have no idea where anything is.

    Good Luck!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I have found that just adding the following to an html widget on the "My Webstore" root page does the trick.

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • I just discovered a issue that might arise when when attempting to do this on your site.

    Be sure you are using an empty slot on your Webstore master page that is not being used by any other widgets on your individual pages.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • Alex (Official Rep) October 29, 2012 19:05
    We have a help topic available that should show you step-by-step to insert a favicon.

    It took me 15-20 minutes from start to finish to have an icon appear.

    US: https://sellercentral.amazon.com/gp/h...

    UK: https://sellercentral-europe.amazon.c...

    Hope this helps,
    -Alex
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • We have tried everything but the favicon still does not appear in Chrome. It shows up in both Explorer and Firefox. Our store is http://betterra.com Please help.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • No luck yet. I have been struggling with this for months. The missing favicon drives me NUTS and I think chrome is the most popular web browser now. It would be nice if an Amazon employee would offer advice.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • Mine only works in FireFox. I even added the http://domain.com to the path with no luck.

    Please Amazon take a look.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • Hi Bob,

    It should work without any problems, however there are certain things you need to do first:

    1. make sure your webstore is switched to advanced html proxy: xxx.hostedbywebstore.com

    2. make sure you've added the script via html widget into the empty header in masterpages

    3. It will work by default for everything except Chrome

    4. If there are any problems in IE make sure it's a proper .ICO file and not just a jpg file with changed file extension - that won't work in IE even if it does in most other browsers. For IE you need to actually convert your image to .ico file first and then upload - you can use any of the free online converters available.

    5. For Chrome you need to use a java script but please note that it will appear in the TAB not in the main chrome window (this is Chrome design issue due to security constraints)

    Here's the code:


    jQuery.noConflict();

    jQuery(document).ready (
    function() {
    jQuery('head').append('<link rel="icon" href="/media/Site%20Files/Merchandising%20Files/favicon.ico" type="image/x-icon" />');
    jQuery('head').append('<link rel="shortcut icon" href="/media/Site%20Files/Merchandising%20Files/favicon.ico" type="image/x-icon" />');
    jQuery('head').append('<link rel="shortcut icon" href="/media/Site%20Files/Merchandising%20Files/favicon.ico" type="image/vnd.microsoft.icon" />');
    }
    );


    you need copy it into the txt file, then save it as .js file and upload into the file library. Then you need to add it to the masterpage through properties link. Once that's done just publish your webstore and it will appear for sure :)

    I hope this helps,

    Regards
    Andrew
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • The javascript worked for Chrome! I am so excited and thank you.

    Although I am still a little irked that:
    a.we can't simply upload an ico file to the root
    b. these instructions weren't included on the official Amazon support page.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • Hi,

    Just to let you know, the new updated help page on this topic is being worked on at the moment.

    Cheers
    Andrew
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated happy, confident, thankful, excited