Consistent Youtube logo

Replace the YouTube logo with a custom image, set a constant width of 94px, update the logo link to youtube.com, and change the mouse-over text to "YouTube".

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Consistent Youtube logo
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  Replace the YouTube logo with a custom image, set a constant width of 94px, update the logo link to youtube.com, and change the mouse-over text to "YouTube".
// @author       jflo
// @match        https://www.youtube.com/*
// @grant        none
// @licensec     MIT
// ==/UserScript==

(function() {
    'use strict';

    // URL of the custom logo you want to use
    const customLogoUrl = 'https://i.imgur.com/maYoqkV.png'; // Replace with your custom logo URL
    const customLogoWidth = '94px'; // Set the desired width for the custom logo

    // Function to replace the logo, update the link, and change the mouse-over text
    function replaceLogo() {
        // Select all possible logo image elements
        const logoImages = document.querySelectorAll('img[src*="youtube/img/promos/growth/"]');
        const logoLinks = document.querySelectorAll('a[href*="/?bp=wgUCEAE%3D"]'); // Selector for the logo link

        logoImages.forEach(logoImage => {
            // Replace the logo's src and srcset with the custom logo URL
            logoImage.src = customLogoUrl;
            logoImage.srcset = customLogoUrl;
            // Set the custom width and height
            logoImage.style.width = customLogoWidth;
            logoImage.style.height = 'auto'; // Maintain aspect ratio
            logoImage.width = '94'; // Set width attribute
            logoImage.height = ''; // Clear any height attribute to maintain aspect ratio
            // Set the mouse-over text
            logoImage.alt = 'YouTube';
            logoImage.title = 'YouTube';
        });

        // Update the link associated with the logo
        logoLinks.forEach(logoLink => {
            logoLink.href = 'https://www.youtube.com/';
            logoLink.title = 'YouTube';
        });
    }

    // Run the function when the page loads
    window.addEventListener('load', replaceLogo);

    // Optionally, run the function when the DOM changes (e.g., when navigating within YouTube)
    const observer = new MutationObserver(replaceLogo);
    observer.observe(document.body, { childList: true, subtree: true });
})();