Mozilla.org "m" Favicon -> Firefox "Orange & Blue"

Added by R. Schneider@userstyles, Created: Nov 19, 2016, Updated: Feb 03, 2017
  • With the style applied
  • Replacement Mozilla Favicons & Notes About Use

Description:

- - 2 Styles are available - - Firefox 50.0's update removed the link for PLUGINS update check from the Add-Ons Manager (Ctrl+Shift+A ---> Plugins). Firefox 50.0 Release Notes state Firefox now automatically checks for Plugins Updates, but there is no check-done confirmation. I decided to manually check for Firefox Plugins updates (especially to verify Adobe Flash is up-to-date) at https://www.mozilla.org/en-US/plugincheck (USA user URL), and bookmark that webpage. Since I use a Dark Firefox theme ("FT DeepDark"), Mozilla's bookmark favicon (a dark gray lowercase "m") is nearly invisible (see screenshots). My 2 userstyles for Mozilla.org's favicon ("Orange & Blue" and "Blue & Black") provide favicons that show up well for most Firefox themes, including dark ones. As the screenshots show, I prefer squared tabs (a setting in the Firefox extension "Classic Theme Restorer"), and also use the extension "Tab Mix Plus" (which has a SUPERB session manager). See NOTES for my Old Google Favicon.

More info
UPDATE Feb 3, 2017: Mozilla.org changed their favicon to a WHITE lower-case "m" on black background, using a new filename for the favicon which defeated this user style. So, this user style was quickly updated with the new Mozilla favicon's filename, and consequently restores this Orange-on-Blue Firefox favicon. Users who want to use the new Mozilla white-"m"-on-black-background favicon just need to disable this Stylish User Style, by clicking the Stylish "S" icon in the lower left status/addon bar, then hover over "Global Styles", then unchecking this user style. Alternately, disabling can be done via Firefox's Add-ons Manager - keyboard combo Ctrl+Shift+A - then go into the "User Styles" section via the left-pane link.

NOTE: This userstyle may serve as a near-universal website favicon changer, due to the freedom of the simple code used in this Global User Style, which is then easily customized to stipulate (A) one specific domain and (B) the website's specific favicon filename (both are on the top line of the CSS code). Then insert your desired favicon image's Base64 code on the "background url(data:image/png;base64,..." line (more about generating Base64 image code at the bottom). DON'T FORGET the " ) no-repeat !important;" appended after the Base64 code at the end of that line! You might miss it if you don't have word-wrap turned on so you can see the end of that line. Much simpler coding means more universal application - and VERY easy updates if a website's favicon changes (just get the icon filename from page's HTML source - or if they use a default icon, the icon would be "favicon.ico"), and make the appropriate change on the first line of CSS code. The one downside to a Global User Style (even when targeted at only one domain via its CSS), is that the Stylish symbol icon in the browser status bar/add-on bar doesn't show a background color change from gray-to-blue on the affected site(s) - there is a NOTE about this on my Secondary screenshot. But then, if you were using a Greasemonkey userscript to change a website's favicon via JavaScript, you wouldn't have an indicator icon either.

I have a Greasemonkey userscript that changes ONLY those 12 or so Google sites that got the new Search Favicon Sept, 2015 - but leaves unchanged the more than 40 Google websites that have individualized favicons, via research and highly targeted "Include" and "Exclude" URLs in the userscript metadata block. [That userscript is "Revert to Google's Old 2012-2015 Favicon" (the white lowercase "g" in blue-square), at https://greasyfork.org/en/scripts/12271-revert-to-google-s-old-2012-2015-favicon.]

Your chosen image, once resized (typically 16x16 pixels for desktop/laptop browsers), can easily be converted to Base64 code. Base64 can be generated automatically from within the CSS editor built into Firefox's Add-Ons manager (User Styles section - Step-by-Step below) - or alternately use a free online uploaded-image-to-Base64 code generator, such as Dominik Hanke's "Base64 Image" site (https://www.base64-image.de), or Code Beautify's "Convert Your Image to Base64" site (upload image, then generate code), at http://codebeautify.org/image-to-base64-converter). Code Beautify ALSO has the reverse direction converter, "Convert Your Base64 To Image" (Paste in the Base64 code, then click to generate the image), at http://codebeautify.org/base64-to-image-converter.

Step-by-Step Base64 code generation with Firefox's built-in CSS editor:

1) Open Firefox "Add-Ons Manager" (Ctrl+Shift+A),
2) Click "User Styles" in left column,
3) Click "Write New Style" button at top (or click "Edit" button of an existing Style),
4) Click "Insert" button drop-down (upper right Menu selection),
5) Click "Data URI",
6) Browse to desired image via the popup file browser,
7) Click the desired file - the Base64 code is immediately generated and inserted into the CSS editor interface.

NOTE: If if you're not writing or editing CSS, you can still use the Base64 data generator built into Firefox's CSS Editor to get Base64 code for the image of your choice, then "Cut" it and "Paste" it elsewhere.

R. Schneider
rschneider@engineer.com

Installs:
Applies to:
all URLs

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.