The following userscript will replace the default badge icons with little rubber ducks

enter image description here

enter image description here

// ==UserScript==
// @name        StackExchange, replace badge icons
// @match       *://*.askubuntu.com/*
// @match       *://*.mathoverflow.net/*
// @match       *://*.serverfault.com/*
// @match       *://*.stackapps.com/*
// @match       *://*.stackexchange.com/*
// @match       *://*.stackoverflow.com/*
// @match       *://*.superuser.com/*
// @exclude     *://api.stackexchange.com/*
// @exclude     *://blog.stackexchange.com/*
// @exclude     *://blog.stackoverflow.com/*
// @exclude     *://chat.stackexchange.com/*
// @exclude     *://chat.stackoverflow.com/*
// @exclude     *://data.stackexchange.com/*
// @exclude     *://elections.stackexchange.com/*
// @exclude     *://openid.stackexchange.com/*
// @exclude     *://stackexchange.com/*
// @exclude     *://*/review
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `

      /* change icons of badges */
      .badge1, .badge2, .badge3 {
         background-image: url("https://svgshare.com/i/9LE.svg") !important;
      }

` );

Caveat:

For a reason unknown to me, the ducks are cut off on some sites. For example they work fine on sites like

  • tex.stackexchange.com
  • codereview.stackexchange.com

but are cut off on

  • stackapps.com
  • meta.stackexchange.com

(these problems have been fixed in the answer https://stackapps.com/a/8117/54601 by Brock Adams)

  • See the revised answer. Also, I added some metadata to your post; reference stackapps.com/a/8113/7653 and stackapps.com/questions/tagged/script?sort=active. – Brock Adams Nov 17 at 5:52
  • @BrockAdams You are the best! Thanks a lot also for adding the meta information to my question, I was not aware of this possibility! – samcarter Nov 17 at 13:01
  • You're welcome; glad to help. – Brock Adams Nov 17 at 16:44
  • PS: I'm amazed at how much having duckies everywhere makes SE sites a little better. Thanks for the idea. – Brock Adams Nov 19 at 18:31
  • 1
    @BrockAdams I feel the effect too, I'm much more relaxed with low quality post etc. if there are lots of ducks in my field of view :) Maybe making this the default design would be much more effective then all this welcome wagon initiative thingy :) – samcarter Nov 19 at 20:52
up vote 3 down vote accepted
+50

Feel free to incorporate any of this into the question post, if you wish.

Made some tweaks as follows:
November 13, 2018:

  • Fixed the icon cutoffs.
  • Streamlined the @excludes.

November 16, 2018:

  • Switched to proper SE image host because svgshare.com was crashing and "exceeding quota".
  • Restored scripts to review paths, since they need duckies too.
  • Moved the script to GitHub, where we can support it more effectively.

Source:

See GitHub: Stack Exchange, replace badge icons with duckies... and post bug reports and pull requests there.

Install: Install from GitHub


Version 2 reference (See GitHub for any future versions):

// ==UserScript==
// @name        Stack Exchange, replace badge icons with duckies
// @description Does what it says on the tin.
// @match       *://*.askubuntu.com/*
// @match       *://*.mathoverflow.net/*
// @match       *://*.serverfault.com/*
// @match       *://*.stackapps.com/*
// @match       *://*.stackexchange.com/*
// @match       *://*.stackoverflow.com/*
// @match       *://*.superuser.com/*
// @exclude     *://api.stackexchange.com/*
// @exclude     *://blog.*.com/*
// @exclude     *://chat.*.com/*
// @exclude     *://data.stackexchange.com/*
// @exclude     *://elections.stackexchange.com/*
// @exclude     *://openid.stackexchange.com/*
// @exclude     *://stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// @version     2.0
// @history     2.0 Switch to SE image server for more reliable hosting.
// @history     2.0 Placed script in GitHub. Review gets duckies too.
// @history     1.5 Fix icon cutoff problem that many sites had.
// @history     1.0 Initial release
// @author      Samcarter
// @homepage    https://stackapps.com/q/8116/7653
// ==/UserScript==

GM_addStyle ( `
    /* change icons of badges */
    .badge1, .badge2, .badge3 {
        background-image: url("https://i.stack.imgur.com/zm5Pg.png") !important;
        margin: 0 !important;
        width: 14px !important;
        height: 14px !important;
    }
    .badge1 { background-position: -39px 1px !important; } /* Gold */
    .badge2 { background-position: -19px 1px !important; } /* Silver */
    .badge3 { background-position:   1px 1px !important; } /* Bronze */
` );
  • 1
    Great! Thanks a lot for your answer! Seems to work fine on the sites I have an account on. – samcarter Nov 13 at 23:53
  • @samcarter, Thank you for the bounty. ... Note that in the future a good-enough-for-me-on-Stack-Apps way to reward an existing answer, is merely to accept that answer. Here on Stack Apps I would like to see more (of most) users build up their rep, so I don't like taking rep away from (most) users here. – Brock Adams Nov 19 at 18:27
  • What is the use of reputation if not to bounty it away? The only significant hurdle is to be able to comment everywhere and thanks to the association bonus this is covered. (fixed the missing accept, sorry :) – samcarter Nov 19 at 20:52
  • @samcarter, if you get more rep you can review, edit, etc. (hint, hint). – Brock Adams Nov 19 at 21:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .