Change a favicon locally in google chrome

Question

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.

score 4 · Answer 1 · edited Aug 17 '11 at 05:24

4

The Tab Edit extension for Chrome does this.

enter image description here

edited Aug 17 '11 at 05:24

Gareth

19,080

answered Dec 11 '10 at 14:27

Jameson Quinn

57

score 2 · Answer 2 · answered Nov 10 '11 at 17:51

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.

score 1 · Answer 3 · answered Jul 26 '22 at 17:13

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

Press ctrl+D and then click on More....
Type a name for the bookmarklet, e.g. Google favicon.

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

score 0 · Answer 4 · answered Aug 10 '10 at 02:57

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

score 0 · Answer 5 · answered Jan 10 '10 at 02:23

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.

score 0 · Answer 6 · edited Aug 17 '11 at 05: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

edited Aug 17 '11 at 05:24

Gareth

19,080

answered Jan 13 '10 at 02:31

cobbal

1,717

score -1 · Answer 7 · answered Jan 19 '11 at 19:35

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

score -1 · Answer 8 · answered Mar 28 '11 at 03:29

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.

score -2 · Answer 9 · answered Jan 13 '10 at 02:17

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.

Change a favicon locally in google chrome

9 Answers9