How can I add a favicon to a bookmarklet in Firefox?












14














Bookmarklets, such as SuperGenPass don't have favicons, because they are javascript: links and Firefox doesn't know where it would obtain the favicon from. Is there any way to add a favicon to a JavaScript bookmarklet?










share|improve this question
























  • I don't think this is possible, but if you find a solution I'd certainly like to know (I have 100's of bookmarklets)
    – scunliffe
    Oct 18 '09 at 2:09
















14














Bookmarklets, such as SuperGenPass don't have favicons, because they are javascript: links and Firefox doesn't know where it would obtain the favicon from. Is there any way to add a favicon to a JavaScript bookmarklet?










share|improve this question
























  • I don't think this is possible, but if you find a solution I'd certainly like to know (I have 100's of bookmarklets)
    – scunliffe
    Oct 18 '09 at 2:09














14












14








14


5





Bookmarklets, such as SuperGenPass don't have favicons, because they are javascript: links and Firefox doesn't know where it would obtain the favicon from. Is there any way to add a favicon to a JavaScript bookmarklet?










share|improve this question















Bookmarklets, such as SuperGenPass don't have favicons, because they are javascript: links and Firefox doesn't know where it would obtain the favicon from. Is there any way to add a favicon to a JavaScript bookmarklet?







firefox bookmarklet favicon






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 13 '16 at 12:50









fixer1234

18k144681




18k144681










asked Oct 18 '09 at 1:59









Drew StephensDrew Stephens

455612




455612












  • I don't think this is possible, but if you find a solution I'd certainly like to know (I have 100's of bookmarklets)
    – scunliffe
    Oct 18 '09 at 2:09


















  • I don't think this is possible, but if you find a solution I'd certainly like to know (I have 100's of bookmarklets)
    – scunliffe
    Oct 18 '09 at 2:09
















I don't think this is possible, but if you find a solution I'd certainly like to know (I have 100's of bookmarklets)
– scunliffe
Oct 18 '09 at 2:09




I don't think this is possible, but if you find a solution I'd certainly like to know (I have 100's of bookmarklets)
– scunliffe
Oct 18 '09 at 2:09










7 Answers
7






active

oldest

votes


















8














You can try this trick:




  1. Find a normal link (without JavaScript) for the website with the correct favicon.


  2. Add that link to your bookmarks toolbar as a normal bookmark.


  3. Finally, change the properties of the bookmark you just added and change the location to be the actual JavaScript bookmarklet you want (you want the location from the bookmarklet that doesn't have the favicon).



Now you've turned the bookmark from step 2 into a bookmarklet with the desired favicon and JavaScript.






share|improve this answer































    7














    The Favicon Picker 2 extension will let you do this.




    How to Use: Just right-click any bookmark and select "Properties,"

    then click "Browse..." to select an icon or paste a URL to an icon.




    Bookmarklet icons



    Also, you can uninstall the extension when you're done and the icons will remain.






    share|improve this answer























    • Mucks up some other dialogs on Mac, but I was able to install the extension, set an icon, and uninstall it. Is there a way to change this using about:config or the like?
      – Drew Stephens
      Oct 19 '09 at 14:58










    • Unfortunately, the extension has been incompatible with the latest version Firefox, at least since May 2015, at most today.
      – thenonhacker
      Jul 20 '15 at 5:55





















    3














    Pelms' suggestion led me to find the possibly-related Favicon Picker 3, which works better on Mac OS X.






    share|improve this answer





















    • Works fine for me on Windows 7 x64 too
      – CAD bloke
      May 30 '10 at 23:24










    • Not available for Firefox 31
      – Chandrayya G K
      Aug 19 '14 at 5:32



















    3














    For Firefox 4+ use Bookmark Favicon Changer. The old Favicon Picker add-ons aren't updated.






    share|improve this answer























    • Dead link!!!!!!!
      – Chandrayya G K
      Aug 19 '14 at 5:34










    • Updated the link. It's hosted off of Firefox now.
      – GollyJer
      Aug 20 '14 at 14:00



















    0














    The easiest way is to hijack a bookmark. Just bookmark a page that has a favicon that you want to use. You may need to click on the bookmark to have it load the favicon from the site that it links to. Once you have the favicon, then, go to the bookmark, right click, and choose properties. You can then change the "location" to the javascript code for the bookmarklet you want to have associated with the favicon.
    Tip: To differentiate a bookmarklet from a bookmark, I change the "name" in the properties tab to whatever preceeded by M:, so for example, if the bookmarklet was for creating a shortened URL using goo.gl, I would name that "M:Goo.gl"






    share|improve this answer

















    • 1




      Amigo, is this answer substantively different from the answer by URLParser.com?
      – Mr.Wizard
      Jul 1 '12 at 8:11



















    0














    You can do this with userChrome.css:




    1. Go to about:support


    2. Under "Application Basics", "Profile Folder", click "Open Folder"


    3. If not exist, create folder chrome, then file userChome.css



    I use this style:





    :root {
    --amber: #FFC000;
    --chartreuse: #B2D733;
    --magenta: #BF1449;
    --teal: #158466;
    --vermilion: #FF4000;
    }
    #PlacesToolbarItems image {
    padding-top: 16px;
    }
    #PlacesToolbarItems toolbarbutton:nth-child(5n+1) image {
    background: var(--teal);
    }
    #PlacesToolbarItems toolbarbutton:nth-child(5n+2) image {
    background: var(--chartreuse);
    }
    #PlacesToolbarItems toolbarbutton:nth-child(5n+3) image {
    background: var(--amber);
    }
    #PlacesToolbarItems toolbarbutton:nth-child(5n+4) image {
    background: var(--vermilion);
    }
    #PlacesToolbarItems toolbarbutton:nth-child(5n+5) image {
    background: var(--magenta);
    }


    If you want to use images you can, just put them in same folder, then link like
    this:



    background: url("something.png");


    http://github.com/cup/bay/blob/33aed8d/firefox/userchrome.css






    share|improve this answer





























      -1















      1. Export bookmarks as HTML.


      2. Edit HTML, add ICON="data:image/png;base64,..." to your bookmarklet, i.e.



        <DT><A HREF="javascript:(function(){ ... })();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAABGdBTUEAALGPC/xhBQAAAAxQTFRFAQMAXV9chIaDx8nGZHRYHgAAADhJREFUCNdjYAAD8QkMDFz//zcw8P//f4CBNTTUgYHbZvMB3AS7TfEBBq5VqxpAxAQGztCwALBBALHhF442ZwQdAAAAAElFTkSuQmCC"></A>


      3. Import bookmarks from edited HTML.


      Works in Firefox as of now.






      share|improve this answer





















      • Tried it, it did not work
        – ctrl-alt-delor
        Oct 6 '17 at 18:35











      Your Answer








      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "3"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f56823%2fhow-can-i-add-a-favicon-to-a-bookmarklet-in-firefox%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      7 Answers
      7






      active

      oldest

      votes








      7 Answers
      7






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      8














      You can try this trick:




      1. Find a normal link (without JavaScript) for the website with the correct favicon.


      2. Add that link to your bookmarks toolbar as a normal bookmark.


      3. Finally, change the properties of the bookmark you just added and change the location to be the actual JavaScript bookmarklet you want (you want the location from the bookmarklet that doesn't have the favicon).



      Now you've turned the bookmark from step 2 into a bookmarklet with the desired favicon and JavaScript.






      share|improve this answer




























        8














        You can try this trick:




        1. Find a normal link (without JavaScript) for the website with the correct favicon.


        2. Add that link to your bookmarks toolbar as a normal bookmark.


        3. Finally, change the properties of the bookmark you just added and change the location to be the actual JavaScript bookmarklet you want (you want the location from the bookmarklet that doesn't have the favicon).



        Now you've turned the bookmark from step 2 into a bookmarklet with the desired favicon and JavaScript.






        share|improve this answer


























          8












          8








          8






          You can try this trick:




          1. Find a normal link (without JavaScript) for the website with the correct favicon.


          2. Add that link to your bookmarks toolbar as a normal bookmark.


          3. Finally, change the properties of the bookmark you just added and change the location to be the actual JavaScript bookmarklet you want (you want the location from the bookmarklet that doesn't have the favicon).



          Now you've turned the bookmark from step 2 into a bookmarklet with the desired favicon and JavaScript.






          share|improve this answer














          You can try this trick:




          1. Find a normal link (without JavaScript) for the website with the correct favicon.


          2. Add that link to your bookmarks toolbar as a normal bookmark.


          3. Finally, change the properties of the bookmark you just added and change the location to be the actual JavaScript bookmarklet you want (you want the location from the bookmarklet that doesn't have the favicon).



          Now you've turned the bookmark from step 2 into a bookmarklet with the desired favicon and JavaScript.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jul 11 '12 at 22:13


























          community wiki





          2 revs, 2 users 76%
          URLParser.com



























              7














              The Favicon Picker 2 extension will let you do this.




              How to Use: Just right-click any bookmark and select "Properties,"

              then click "Browse..." to select an icon or paste a URL to an icon.




              Bookmarklet icons



              Also, you can uninstall the extension when you're done and the icons will remain.






              share|improve this answer























              • Mucks up some other dialogs on Mac, but I was able to install the extension, set an icon, and uninstall it. Is there a way to change this using about:config or the like?
                – Drew Stephens
                Oct 19 '09 at 14:58










              • Unfortunately, the extension has been incompatible with the latest version Firefox, at least since May 2015, at most today.
                – thenonhacker
                Jul 20 '15 at 5:55


















              7














              The Favicon Picker 2 extension will let you do this.




              How to Use: Just right-click any bookmark and select "Properties,"

              then click "Browse..." to select an icon or paste a URL to an icon.




              Bookmarklet icons



              Also, you can uninstall the extension when you're done and the icons will remain.






              share|improve this answer























              • Mucks up some other dialogs on Mac, but I was able to install the extension, set an icon, and uninstall it. Is there a way to change this using about:config or the like?
                – Drew Stephens
                Oct 19 '09 at 14:58










              • Unfortunately, the extension has been incompatible with the latest version Firefox, at least since May 2015, at most today.
                – thenonhacker
                Jul 20 '15 at 5:55
















              7












              7








              7






              The Favicon Picker 2 extension will let you do this.




              How to Use: Just right-click any bookmark and select "Properties,"

              then click "Browse..." to select an icon or paste a URL to an icon.




              Bookmarklet icons



              Also, you can uninstall the extension when you're done and the icons will remain.






              share|improve this answer














              The Favicon Picker 2 extension will let you do this.




              How to Use: Just right-click any bookmark and select "Properties,"

              then click "Browse..." to select an icon or paste a URL to an icon.




              Bookmarklet icons



              Also, you can uninstall the extension when you're done and the icons will remain.







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Aug 30 '11 at 4:56









              3498DB

              15.7k114762




              15.7k114762










              answered Oct 18 '09 at 2:32









              pelmspelms

              6,53994772




              6,53994772












              • Mucks up some other dialogs on Mac, but I was able to install the extension, set an icon, and uninstall it. Is there a way to change this using about:config or the like?
                – Drew Stephens
                Oct 19 '09 at 14:58










              • Unfortunately, the extension has been incompatible with the latest version Firefox, at least since May 2015, at most today.
                – thenonhacker
                Jul 20 '15 at 5:55




















              • Mucks up some other dialogs on Mac, but I was able to install the extension, set an icon, and uninstall it. Is there a way to change this using about:config or the like?
                – Drew Stephens
                Oct 19 '09 at 14:58










              • Unfortunately, the extension has been incompatible with the latest version Firefox, at least since May 2015, at most today.
                – thenonhacker
                Jul 20 '15 at 5:55


















              Mucks up some other dialogs on Mac, but I was able to install the extension, set an icon, and uninstall it. Is there a way to change this using about:config or the like?
              – Drew Stephens
              Oct 19 '09 at 14:58




              Mucks up some other dialogs on Mac, but I was able to install the extension, set an icon, and uninstall it. Is there a way to change this using about:config or the like?
              – Drew Stephens
              Oct 19 '09 at 14:58












              Unfortunately, the extension has been incompatible with the latest version Firefox, at least since May 2015, at most today.
              – thenonhacker
              Jul 20 '15 at 5:55






              Unfortunately, the extension has been incompatible with the latest version Firefox, at least since May 2015, at most today.
              – thenonhacker
              Jul 20 '15 at 5:55













              3














              Pelms' suggestion led me to find the possibly-related Favicon Picker 3, which works better on Mac OS X.






              share|improve this answer





















              • Works fine for me on Windows 7 x64 too
                – CAD bloke
                May 30 '10 at 23:24










              • Not available for Firefox 31
                – Chandrayya G K
                Aug 19 '14 at 5:32
















              3














              Pelms' suggestion led me to find the possibly-related Favicon Picker 3, which works better on Mac OS X.






              share|improve this answer





















              • Works fine for me on Windows 7 x64 too
                – CAD bloke
                May 30 '10 at 23:24










              • Not available for Firefox 31
                – Chandrayya G K
                Aug 19 '14 at 5:32














              3












              3








              3






              Pelms' suggestion led me to find the possibly-related Favicon Picker 3, which works better on Mac OS X.






              share|improve this answer












              Pelms' suggestion led me to find the possibly-related Favicon Picker 3, which works better on Mac OS X.







              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Oct 19 '09 at 15:04









              Drew StephensDrew Stephens

              455612




              455612












              • Works fine for me on Windows 7 x64 too
                – CAD bloke
                May 30 '10 at 23:24










              • Not available for Firefox 31
                – Chandrayya G K
                Aug 19 '14 at 5:32


















              • Works fine for me on Windows 7 x64 too
                – CAD bloke
                May 30 '10 at 23:24










              • Not available for Firefox 31
                – Chandrayya G K
                Aug 19 '14 at 5:32
















              Works fine for me on Windows 7 x64 too
              – CAD bloke
              May 30 '10 at 23:24




              Works fine for me on Windows 7 x64 too
              – CAD bloke
              May 30 '10 at 23:24












              Not available for Firefox 31
              – Chandrayya G K
              Aug 19 '14 at 5:32




              Not available for Firefox 31
              – Chandrayya G K
              Aug 19 '14 at 5:32











              3














              For Firefox 4+ use Bookmark Favicon Changer. The old Favicon Picker add-ons aren't updated.






              share|improve this answer























              • Dead link!!!!!!!
                – Chandrayya G K
                Aug 19 '14 at 5:34










              • Updated the link. It's hosted off of Firefox now.
                – GollyJer
                Aug 20 '14 at 14:00
















              3














              For Firefox 4+ use Bookmark Favicon Changer. The old Favicon Picker add-ons aren't updated.






              share|improve this answer























              • Dead link!!!!!!!
                – Chandrayya G K
                Aug 19 '14 at 5:34










              • Updated the link. It's hosted off of Firefox now.
                – GollyJer
                Aug 20 '14 at 14:00














              3












              3








              3






              For Firefox 4+ use Bookmark Favicon Changer. The old Favicon Picker add-ons aren't updated.






              share|improve this answer














              For Firefox 4+ use Bookmark Favicon Changer. The old Favicon Picker add-ons aren't updated.







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Aug 20 '14 at 14:00

























              answered Apr 5 '11 at 4:56









              GollyJerGollyJer

              2,51132134




              2,51132134












              • Dead link!!!!!!!
                – Chandrayya G K
                Aug 19 '14 at 5:34










              • Updated the link. It's hosted off of Firefox now.
                – GollyJer
                Aug 20 '14 at 14:00


















              • Dead link!!!!!!!
                – Chandrayya G K
                Aug 19 '14 at 5:34










              • Updated the link. It's hosted off of Firefox now.
                – GollyJer
                Aug 20 '14 at 14:00
















              Dead link!!!!!!!
              – Chandrayya G K
              Aug 19 '14 at 5:34




              Dead link!!!!!!!
              – Chandrayya G K
              Aug 19 '14 at 5:34












              Updated the link. It's hosted off of Firefox now.
              – GollyJer
              Aug 20 '14 at 14:00




              Updated the link. It's hosted off of Firefox now.
              – GollyJer
              Aug 20 '14 at 14:00











              0














              The easiest way is to hijack a bookmark. Just bookmark a page that has a favicon that you want to use. You may need to click on the bookmark to have it load the favicon from the site that it links to. Once you have the favicon, then, go to the bookmark, right click, and choose properties. You can then change the "location" to the javascript code for the bookmarklet you want to have associated with the favicon.
              Tip: To differentiate a bookmarklet from a bookmark, I change the "name" in the properties tab to whatever preceeded by M:, so for example, if the bookmarklet was for creating a shortened URL using goo.gl, I would name that "M:Goo.gl"






              share|improve this answer

















              • 1




                Amigo, is this answer substantively different from the answer by URLParser.com?
                – Mr.Wizard
                Jul 1 '12 at 8:11
















              0














              The easiest way is to hijack a bookmark. Just bookmark a page that has a favicon that you want to use. You may need to click on the bookmark to have it load the favicon from the site that it links to. Once you have the favicon, then, go to the bookmark, right click, and choose properties. You can then change the "location" to the javascript code for the bookmarklet you want to have associated with the favicon.
              Tip: To differentiate a bookmarklet from a bookmark, I change the "name" in the properties tab to whatever preceeded by M:, so for example, if the bookmarklet was for creating a shortened URL using goo.gl, I would name that "M:Goo.gl"






              share|improve this answer

















              • 1




                Amigo, is this answer substantively different from the answer by URLParser.com?
                – Mr.Wizard
                Jul 1 '12 at 8:11














              0












              0








              0






              The easiest way is to hijack a bookmark. Just bookmark a page that has a favicon that you want to use. You may need to click on the bookmark to have it load the favicon from the site that it links to. Once you have the favicon, then, go to the bookmark, right click, and choose properties. You can then change the "location" to the javascript code for the bookmarklet you want to have associated with the favicon.
              Tip: To differentiate a bookmarklet from a bookmark, I change the "name" in the properties tab to whatever preceeded by M:, so for example, if the bookmarklet was for creating a shortened URL using goo.gl, I would name that "M:Goo.gl"






              share|improve this answer












              The easiest way is to hijack a bookmark. Just bookmark a page that has a favicon that you want to use. You may need to click on the bookmark to have it load the favicon from the site that it links to. Once you have the favicon, then, go to the bookmark, right click, and choose properties. You can then change the "location" to the javascript code for the bookmarklet you want to have associated with the favicon.
              Tip: To differentiate a bookmarklet from a bookmark, I change the "name" in the properties tab to whatever preceeded by M:, so for example, if the bookmarklet was for creating a shortened URL using goo.gl, I would name that "M:Goo.gl"







              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Jul 1 '12 at 0:55









              Amigo OmegaAmigo Omega

              1




              1








              • 1




                Amigo, is this answer substantively different from the answer by URLParser.com?
                – Mr.Wizard
                Jul 1 '12 at 8:11














              • 1




                Amigo, is this answer substantively different from the answer by URLParser.com?
                – Mr.Wizard
                Jul 1 '12 at 8:11








              1




              1




              Amigo, is this answer substantively different from the answer by URLParser.com?
              – Mr.Wizard
              Jul 1 '12 at 8:11




              Amigo, is this answer substantively different from the answer by URLParser.com?
              – Mr.Wizard
              Jul 1 '12 at 8:11











              0














              You can do this with userChrome.css:




              1. Go to about:support


              2. Under "Application Basics", "Profile Folder", click "Open Folder"


              3. If not exist, create folder chrome, then file userChome.css



              I use this style:





              :root {
              --amber: #FFC000;
              --chartreuse: #B2D733;
              --magenta: #BF1449;
              --teal: #158466;
              --vermilion: #FF4000;
              }
              #PlacesToolbarItems image {
              padding-top: 16px;
              }
              #PlacesToolbarItems toolbarbutton:nth-child(5n+1) image {
              background: var(--teal);
              }
              #PlacesToolbarItems toolbarbutton:nth-child(5n+2) image {
              background: var(--chartreuse);
              }
              #PlacesToolbarItems toolbarbutton:nth-child(5n+3) image {
              background: var(--amber);
              }
              #PlacesToolbarItems toolbarbutton:nth-child(5n+4) image {
              background: var(--vermilion);
              }
              #PlacesToolbarItems toolbarbutton:nth-child(5n+5) image {
              background: var(--magenta);
              }


              If you want to use images you can, just put them in same folder, then link like
              this:



              background: url("something.png");


              http://github.com/cup/bay/blob/33aed8d/firefox/userchrome.css






              share|improve this answer


























                0














                You can do this with userChrome.css:




                1. Go to about:support


                2. Under "Application Basics", "Profile Folder", click "Open Folder"


                3. If not exist, create folder chrome, then file userChome.css



                I use this style:





                :root {
                --amber: #FFC000;
                --chartreuse: #B2D733;
                --magenta: #BF1449;
                --teal: #158466;
                --vermilion: #FF4000;
                }
                #PlacesToolbarItems image {
                padding-top: 16px;
                }
                #PlacesToolbarItems toolbarbutton:nth-child(5n+1) image {
                background: var(--teal);
                }
                #PlacesToolbarItems toolbarbutton:nth-child(5n+2) image {
                background: var(--chartreuse);
                }
                #PlacesToolbarItems toolbarbutton:nth-child(5n+3) image {
                background: var(--amber);
                }
                #PlacesToolbarItems toolbarbutton:nth-child(5n+4) image {
                background: var(--vermilion);
                }
                #PlacesToolbarItems toolbarbutton:nth-child(5n+5) image {
                background: var(--magenta);
                }


                If you want to use images you can, just put them in same folder, then link like
                this:



                background: url("something.png");


                http://github.com/cup/bay/blob/33aed8d/firefox/userchrome.css






                share|improve this answer
























                  0












                  0








                  0






                  You can do this with userChrome.css:




                  1. Go to about:support


                  2. Under "Application Basics", "Profile Folder", click "Open Folder"


                  3. If not exist, create folder chrome, then file userChome.css



                  I use this style:





                  :root {
                  --amber: #FFC000;
                  --chartreuse: #B2D733;
                  --magenta: #BF1449;
                  --teal: #158466;
                  --vermilion: #FF4000;
                  }
                  #PlacesToolbarItems image {
                  padding-top: 16px;
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+1) image {
                  background: var(--teal);
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+2) image {
                  background: var(--chartreuse);
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+3) image {
                  background: var(--amber);
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+4) image {
                  background: var(--vermilion);
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+5) image {
                  background: var(--magenta);
                  }


                  If you want to use images you can, just put them in same folder, then link like
                  this:



                  background: url("something.png");


                  http://github.com/cup/bay/blob/33aed8d/firefox/userchrome.css






                  share|improve this answer












                  You can do this with userChrome.css:




                  1. Go to about:support


                  2. Under "Application Basics", "Profile Folder", click "Open Folder"


                  3. If not exist, create folder chrome, then file userChome.css



                  I use this style:





                  :root {
                  --amber: #FFC000;
                  --chartreuse: #B2D733;
                  --magenta: #BF1449;
                  --teal: #158466;
                  --vermilion: #FF4000;
                  }
                  #PlacesToolbarItems image {
                  padding-top: 16px;
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+1) image {
                  background: var(--teal);
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+2) image {
                  background: var(--chartreuse);
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+3) image {
                  background: var(--amber);
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+4) image {
                  background: var(--vermilion);
                  }
                  #PlacesToolbarItems toolbarbutton:nth-child(5n+5) image {
                  background: var(--magenta);
                  }


                  If you want to use images you can, just put them in same folder, then link like
                  this:



                  background: url("something.png");


                  http://github.com/cup/bay/blob/33aed8d/firefox/userchrome.css







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Dec 16 '18 at 14:06









                  Steven PennySteven Penny

                  1




                  1























                      -1















                      1. Export bookmarks as HTML.


                      2. Edit HTML, add ICON="data:image/png;base64,..." to your bookmarklet, i.e.



                        <DT><A HREF="javascript:(function(){ ... })();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAABGdBTUEAALGPC/xhBQAAAAxQTFRFAQMAXV9chIaDx8nGZHRYHgAAADhJREFUCNdjYAAD8QkMDFz//zcw8P//f4CBNTTUgYHbZvMB3AS7TfEBBq5VqxpAxAQGztCwALBBALHhF442ZwQdAAAAAElFTkSuQmCC"></A>


                      3. Import bookmarks from edited HTML.


                      Works in Firefox as of now.






                      share|improve this answer





















                      • Tried it, it did not work
                        – ctrl-alt-delor
                        Oct 6 '17 at 18:35
















                      -1















                      1. Export bookmarks as HTML.


                      2. Edit HTML, add ICON="data:image/png;base64,..." to your bookmarklet, i.e.



                        <DT><A HREF="javascript:(function(){ ... })();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAABGdBTUEAALGPC/xhBQAAAAxQTFRFAQMAXV9chIaDx8nGZHRYHgAAADhJREFUCNdjYAAD8QkMDFz//zcw8P//f4CBNTTUgYHbZvMB3AS7TfEBBq5VqxpAxAQGztCwALBBALHhF442ZwQdAAAAAElFTkSuQmCC"></A>


                      3. Import bookmarks from edited HTML.


                      Works in Firefox as of now.






                      share|improve this answer





















                      • Tried it, it did not work
                        – ctrl-alt-delor
                        Oct 6 '17 at 18:35














                      -1












                      -1








                      -1







                      1. Export bookmarks as HTML.


                      2. Edit HTML, add ICON="data:image/png;base64,..." to your bookmarklet, i.e.



                        <DT><A HREF="javascript:(function(){ ... })();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAABGdBTUEAALGPC/xhBQAAAAxQTFRFAQMAXV9chIaDx8nGZHRYHgAAADhJREFUCNdjYAAD8QkMDFz//zcw8P//f4CBNTTUgYHbZvMB3AS7TfEBBq5VqxpAxAQGztCwALBBALHhF442ZwQdAAAAAElFTkSuQmCC"></A>


                      3. Import bookmarks from edited HTML.


                      Works in Firefox as of now.






                      share|improve this answer













                      1. Export bookmarks as HTML.


                      2. Edit HTML, add ICON="data:image/png;base64,..." to your bookmarklet, i.e.



                        <DT><A HREF="javascript:(function(){ ... })();" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAABGdBTUEAALGPC/xhBQAAAAxQTFRFAQMAXV9chIaDx8nGZHRYHgAAADhJREFUCNdjYAAD8QkMDFz//zcw8P//f4CBNTTUgYHbZvMB3AS7TfEBBq5VqxpAxAQGztCwALBBALHhF442ZwQdAAAAAElFTkSuQmCC"></A>


                      3. Import bookmarks from edited HTML.


                      Works in Firefox as of now.







                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered May 4 '17 at 23:37









                      K3---rncK3---rnc

                      1736




                      1736












                      • Tried it, it did not work
                        – ctrl-alt-delor
                        Oct 6 '17 at 18:35


















                      • Tried it, it did not work
                        – ctrl-alt-delor
                        Oct 6 '17 at 18:35
















                      Tried it, it did not work
                      – ctrl-alt-delor
                      Oct 6 '17 at 18:35




                      Tried it, it did not work
                      – ctrl-alt-delor
                      Oct 6 '17 at 18:35


















                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Super User!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f56823%2fhow-can-i-add-a-favicon-to-a-bookmarklet-in-firefox%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Plaza Victoria

                      Puebla de Zaragoza

                      Musa