Archiv

Firefox 66 – Tab Favicon austauschen




Ich hatte ja hier schon mal beschrieben, wie man die Tabfarben ändern kann. Wer nun auch gerne das Tab Favicon austauschen möchte, der kann das ebenfalls mit einen CSS – Code erreichen. Webseiten werden ja hin und wieder mal verändert bzw. optisch angepasst. Dazu kann es dann auch gehören, das Webseiten Favicon zu ändern. Und wem dann dieses neue Favicon nicht gefällt, der kann es gegen ein anderes oder auch das alte Favicon einfach austauschen.

In meinem Beispiel möchte ich das mal an der Webseite YouTube beschreiben, wo dieses Favicon jetzt Standard ist.

Firefox 66 – Tab Favicon austauschen

Da mir pers. das alte Favicon von YouTube besser gefallen hat, habe ich es per CSS – Code wieder eingefügt.

Bis zur Firefox Version 56 war es möglich, solche Änderungen durch diverse Erweiterungen zu erreichen.

Das eine oder andere ist seit der Firefox Version 57 nicht mehr möglich, da Mozilla dafür (zumindest noch) keine Schnittstelle mehr zur Verfügung stellt.

Aus diesem Grund muss man jetzt optischen Änderung am Firefox mit einer userContent.css bzw. einer userChrome.css Datei erstellen.

Dazu bedarf es allerdings erst einer kleineren Vorbereitung, die ich hier schon mal erklärt hatte.

userChrome.css erstellen

Und hier mal eine Erklärung wie man das mit dem neuen CSS – Code dann machen muss.

Als erstes gehen wir dazu in den Profilordner vom Firefox, und öffnen den dort selber angelegten Ordner chrome.

Dann im Ordner chrome die Datei userChrome.css öffnen, und den folgenden CSS – Code für das geänderte Tab Favicon von YouTube eintragen.

/*Tab Favicon von YouTube geändert*/
  
.tabbrowser-tab[label*="YouTube"] .tab-icon-image{
     display:none!important;
	 }
	 
.tabbrowser-tab[label*="YouTube"] .tab-text {
	  background: url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD///8AEiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//8SI///EyP//xIj//8SI///EiP//xIj//////8AEiP//wAc7v8AHO7/AB3v/wAc7v8AHO7/ABzu/wAc7v8AHO7/ABzu/wAd7/8AHe//ABzu/wAc7/8AHe//EiP//xIj//8SI////////09V//+6uv////////////9PVf//z87///////+ysv//EiP//5ub////////0tH//xIj//8SI///EiP///////9PVf///////xIj////////T1X///////8SI////////5qZ////////EiP//xIj//8TI///EiP//xIj////////T1X///////8TI////////09V////////EiP///////+amf/////////////S0f//EiP//xIj//8SI////////09V////////EiL///////9PVf////////////+6uv//EiP//7q6///v8P//0tH//xIj//8SI///EyP///////8SI///EiP//xIj//8SI///EiP///////8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//////////////////xIj//8SI///EiP//xMj////////EiP//xIj//8SI///EiP//xIj//8SI///EiP//9nZ//8SI///EiP//xMj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiP//xIj//8SI///EiL//9na//////////////////////////////////////////////////////////////////////////////////////////////////+r5/b/AAAA//372P//////R5K5/wAAAP/IiWb//////26v1f8AAAD/rGZE////////////////////////////qub1/wAAAP/+/Nj/qub2/wAAAP//////AAAA//782P8TcJ3//vzY/wAAAP///////////////////////////6rm9f8AAAD//vzY/6rm9v8AAAD//////wAAAP/+/Nj/AAAA//////8AAAD///////////////////////////9ur9b/AAAA/+PFov//////R5K6/wAAAP/JiWb//////wAAAP//////AAAA////////////////////////////AAAA//+p7/8AAAD/////////////////////////////////////////////////////////////////bq7V/wxKf///////rGZE/+PFov//////////////////////////////////////////////////////gAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") no-repeat !important;
      background-position: 0px 4px!important;
      padding-left:25px!important;
	}

(Dazu am besten den Text kopieren und in die userChrome.css wieder einfügen)

Je nach Bildschirmauflösung oder Schriftgröße können die obigen Werte angepasst werden.

Und so sieht der Code dann in der userChrome.css Datei aus:

Hinweis:
Der CSS – Code bezieht sich nicht nur auf die Startseite von YouTube, sondern auch auf alle Unterseiten dieser Webseite.



Damit man später noch genau weiß was der jeweilige CSS Code bedeutet, sollte man sich über dem CSS – Code einen aussagekräftigen Hinweis erstellen.

Dazu schreibt man vor dem Text erst einen Slash und einen Stern /* dann die Beschreibung der Funktion…und als Abschluss schreibt man diesmal erst den Stern und dann das Slashzeichen */

Die Zeichen vorher und nachher bedeuten, dass der Text auskommentiert ist, und somit keinen Einfluss auf den CSS Code bzw. seine Funktion hat.

Firefox 66 – Tab Favicon austauschen

VICTSING Mini Maus kabellos Wireless Mouse, 2.4G Funkmaus, 2400 DPI 6 Tasten Optische Mäuse mit USB Nano Empfänger Für PC Laptop iMac Macbook Microsoft Pro, Office Home,Schwarz
3.116 Bewertungen
VICTSING Mini Maus kabellos Wireless Mouse, 2.4G Funkmaus, 2400 DPI 6 Tasten Optische Mäuse mit USB Nano Empfänger Für PC Laptop iMac Macbook Microsoft Pro, Office Home,Schwarz
  • Das Aussehen des Patents : Diese Maus durch die EU aussehen Zertifizierung, die Welt nur in VicTsing verkauft, der Rest von den Verkäufern sind gefälscht.
  • 2.4Gwireless Datenübertragung & 5 DPI Schalter und angepasste Funktion : 2,4 GHz Wireless - eine Erfahrung sicherer und präziser als das traditionelle FMRadioSystem mit einer erhöhten Arbeitsabstand bis 15 m. Es braucht nichtlaufwerk,Plug & Play. 5 DPI-Schalter (800, 1200, 1600, 2000, 2400) ändern Sie die Geschwindigkeit der Maus frei.

Dann die userChrome.css Datei schließen und speichern, und den Firefox neu starten, damit die Änderung wirksam wird.

Und so sieht das dann mit dem alten YouTube Favicon auf einem Tab aus:

Möchte man eines Tages diese Änderung nicht mehr nutzen, dann reicht es aus, den CSS Code in der userChrome.css wieder zu löschen.

Danach noch einen Neustart vom Browser machen, und das aktuelle Standard Favicon von YouTube wird wieder angezeigt.

Hier hatte ich mal beschrieben was man alternativ zur userChrome.css Datei am besten machen sollte:

userChrome.css aufräumen

Vorteil dadurch, es ist alles viel übersichtlicher und man findet schneller mal etwas wieder.

Dieser Tipp kann bzw. sollte auch auf die Datei userContent.css angewandt werden.

(Diese Datei wird für optische Änderungen an Webseiten, bzw. allen Firefox Seiten die mit about beginnen benötigt)



Das könnte auch interessant sein...


Tags

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Back to top button
Close