27

This is a frustrating question, mostly because all searches for this usually give me information on how to change a favicon for a website the user owns. Allow me to elaborate on my issue.

I would like to be able to change the favicon that is displayed for one of the sites I visit regularly. This site happens to be gmail. I always have two gmail accounts open at the same time, and have recently taken to using the 'pin tab' feature in chrome. This is convenient, but makes the two tabs look identical. I would simply like to change the favicon on one of the tabs to make it easier to distinguish between the two.

I have an idea that this could be done using some url javascript, which would be easy enough for me to add into a bookmark. However, I am no good at javascript.

2

9 Answers 9

4

The Tab Edit extension for Chrome does this.

enter image description here

3
  • 4
    I liked the idea so I wrote a chrome extension that remembers the favicon change when you go to new pages. chrome.google.com/webstore/detail/… Mar 12, 2011 at 9:53
  • 2
    Link in the question is broken (404). The same for the comment above.
    – Ashark
    Nov 3, 2021 at 19:28
  • Link in this answer and above comment are broken. Mar 12 at 18:36
2

Well, you want it in the tab, and that seems to be a little harder to do. There are solutions for when it is at the bookmarks bar that you want to change the favicons (like this one: http://www.tech-recipes.com/rx/3032/google_chrome_how_to_change_icons_on_the_bookmarks_bar/ ), which seems to be easier because bookmark favicons store locally. I'm don't know how can you change the favicons from the tab locally, I've only know extensions like the ones users have answered you already.

0

I have never used Google Chrome, and I am unaware if you can use add-ons with it like Firefox.

I know in Firefox there is an extention that allows you to change the colour of tabs. If there such an add-on for Chrome you could use it to colour the tabs and therefore be able to distinguish between them.

The challange is finding that add-on though. If Chrome has an add-on website like Firefox, you could search there for one. Failing that, hopefully someone more familiar with Chrome can post a suitable add-on.

1
  • 1
    Chrome supports extensions, too, but there's no tab color/icon changer extension yet for it.
    – thSoft
    Feb 4, 2010 at 12:23
0

Chrome is able to run greasemonkey scripts, and I was able to adapt this script to replace a favicon on the site of my choosing. If you are a little bit technical, you can modify too. Just get the desired favicon base64 encoded and you are good to go.

http://userscripts.org/scripts/show/42247

1
  • 3
    There is no text in that link.
    – Ashark
    Nov 3, 2021 at 19:24
0

As a stopgap solution, it would be fairly easy to write a userscript to modify the page title and add a unicode symbol to one of the tabs.

As a bookmarklet (make a bookmark with name "Star this page" and the following address)

javascript:(function(){document.title="\u2606"+document.title;})()

The tab will end up looking like this:

tab

2
  • But this would be removed as soon as you reload the page. Of course, if you bookmark the page whilst you have this change the title of the bookmark (not the page) will still have the star.
    – Josh Hunt
    Jan 13, 2010 at 10:52
  • True, to get it to persist over reloading you would need to make it a userscript. You would have to be able to differentiate between the targeted page and the non-targeted page somehow using javascript.
    – cobbal
    Jan 13, 2010 at 19:41
0

You can use a JavaScript bookmarklet to change the favicon quickly.

  1. Press ctrl+D and then click on More....

  2. Type a name for the bookmarklet, e.g. Google favicon.

  3. Copy the following code to the URL field and click Save.

    javascript: (() => {
      var link = document.querySelector("link[rel~='icon']");
      if (!link) {
        link = document.createElement('link');
        link.rel = 'icon';
        document.getElementsByTagName('head')[0].appendChild(link);
      }
      link.href = 'https://www.google.com/favicon.ico';
    })();
    

Change the 'https://www.google.com/favicon.ico' part to your favicon of choice.

Now, you can change the favicon by clicking the bookmarklet.

Bookmarklet code source: Changing website favicon dynamically - StackOverflow

-1

There's a Chrome extension that shows you the unread message count, and it also allows you to change the color of the favicon at the same time. If one of your two Gmail tabs is regular Gmail and the other is for a custom domain, then you can set a different color for each one. My pinned tabs look like this now:

pinned tab screenshot

1
-1

Get your bookmarks bar looking how you want it.

Make sure one bookmark has the favicon you wish to transfer to another bookmark.

Export your bookmarks to the desktop.

Open the bookmarks file in notepad.

The structure is self-explanatory once you study the file.

The long streams of random characters are the image data for each favicon.

Copy this string from the desired image and overwrite the image data in the favicon you wish to change.

Save the file.

Import the file back into Chrome.

Open the Other Bookmarks button at the right of the bookmarks bar and navigate down the tree till you see the imported bookmarks.

Drag your newly faviconed bookmark from here to its desired location on the bookmarks bar and delete the original.

1
  • This is not valid, at least in 2021. Favicons are not stored in the Bookmarks file. Sep 12, 2021 at 13:21
-2

favicons are actually small .gif images that are stored on the website's server itself. It works just like downloading an image in your browser, except it displays it on a tab or at the top of the window. I don't think there is a way to change what favicon is displayed unless you intercepted that image and got your browser to replace that with an image of your choice when you visit that site.

1
  • 1
    They're usually .ico files actually, although I think most browsers will accept .pngs and .gifs these days. You can even animate them. You can change the favicon your browser displays with an extension; doesn't really matter what the website sends you -- the client can always choose to ignore it.
    – mpen
    Mar 24, 2014 at 17:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy