Minterest

tech. marketing. mashups.

eBay Partner Network

How To Change Chrome Bookmark Favicons In Less Than 5 Minutes

by MAHESH MOHAN on

Google Chrome

If you’re a power Google Chrome user then you probably know that we CAN’T change the favicons of Chrome bookmarks. But it’s possible in Internet Explorer and it’s super easy. Since Internet Explorer stores all the bookmarks in your PC’s Favorites folder (C:\Users\<Your User Name>\Favorites), you can change its favicon by using the “Change Icon…” option of each bookmark’s Properties (Right-click Bookmark > Properties > Change Icon…).

Now coming back to Google Chrome, you can’t change the default favicons of websites in your Chrome Bookmarks Bar. According to this article it’s possible to change the favicons manually by using SQLite Database Browser (but I don’t know). Also, there are some Chrome extensions like Favicon Changer, I Hate Your Favicon and Bookmark Favicon Changer on the Chrome Web Store that enable us to change the Chrome bookmarks icons manually. But I haven’t tried any of them personally as I like to keep the number of extensions that I’m using to a minimal.

Read: Top 25 Google Chrome Extensions I Can’t Live Without

Change Chrome Bookmark Icons Without Installing Any Extensions

Wait, I’ve found a way to change the favicons of Chrome bookmarks and it’s super easy. It’s done by creating an HTML file on your PC or on a web server that redirects to your preferred website (by using simple HTML redirects).

For example, you can check my Google Chrome Bookmarks Bar and you’ll see that the favicon of Feedly.com is not the default one. I have done that by creating an HTML file called Feedly.html on my server at www.maheshone.com/Feedly.html.

Google Chrome Bookmarks Bar

…Added the following codes:

<head>
<title>Feedly</title>
<link rel=”icon” href=”http://0.gravatar.com/blavatar/ef8523581bb2e5c5faf9fd8cbfe3955c?s=16″ type=”image/x-icon”/>
<meta http-equiv=”refresh” content=”0; url=http://feedly.com” />
</head>
<body>
</body>
</html>

…saved as Feedly.html and uploaded to my web server.

As you can see, I have created an HTML redirect that redirects the HTML file to Feedly.com and I used the HTML link rel Attribute to set a custom favicon.

Don’t Have A Web Hosting?

If you don’t have a server then you can create the above HTML file and save it on your own PC. And then simply drag and drop that file to your Chrome Bookmarks Bar and rename it. Done!

BONUS:

Want to make your bookmarks bar neat and clean? Well, in Chrome, you can add a bookmark WITHOUT entering a name. Google Chrome by default uses the title of the web page as the bookmark name so you can simply remove that and it shows only the favicon.

So… now the bookmarks bar will look like:

Google Chrome Bookmarks Bar (Favicons Only)

It also works in Mozilla Firefox but it’s not possible in Internet Explorer since we can’t create an Internet Shortcut without entering a filename.

You Might Also Like
  • Peter Fessel

    Listen Dude, what am I supposed to do- type K5DP and CAPTCHA* or just one of them, and what does the strikeout over the K mean, and after I am finished to i click “enter” or what???

    Anyway, have you by any chance noticed that in changeover to Chrome Chrome substitutes its own bullseye icon for all the site icons both on the desktop and in the favorites folder? After much agony I have gotten the original site icons back on the desktop, and I have figured out a way to make NEW favorite sites’ site icons appear in the favorites folder, but I have no idea how to undo substitution of chrome icons for site icons in place at time of changeover. DO YOU KNOW HOW TO REVERSE SUBSTITUTION OF CHROME ICONS FOR FAVORITES SITE ICONS?

    Also, if you have a telephone mumber to google marketing I would like to have it. Thanks, Peter Fessel

    • http://www.minterest.org Mahesh Mohan

      Hi Pete,

      I’m not sure if I understand the question. Can you please explain?

      And no, you can’t call Google guys for support… but you can post your question here https://productforums.google.com/forum/#!forum/chrome and a Google employee or other members will answer you.

      • D

        I’m amazed at how patient you are with these questions, haha.

        Anyway, thanks for the helpful post!

        • http://www.minterest.com Mahesh Mohan

          Haha! Thank you.

          For things like this: I’ve incredible patience. :D

  • webeno

    This is one smart solution, dude!

    • http://www.minterest.com Mahesh Mohan

      Thank you! :)

  • Scot

    I hope you know about the Bonus part Internet Explorer has a setting to do that. There is no need for a work a round. Put that in your blog.

    • http://www.minterest.com Mahesh Mohan

      You mean there’s a way other than: (Right-click Bookmark > Properties > Change Icon…) in IE?

  • analyzethis

    Bookmarks Favicon Changer is a lot easier. I keep a folder for favicons I like and for websites that need one I add them.

    This bookmarklet makes them easy to extract.

    javascript:void window.open(‘http://www.google.com/s2/favicons?domain=’+document.domain);

    I also use Faviconize Google so the favicons show up in the web search making it easy to see them. If I’m getting picky I can search for sites that are similar and likely to have decent related favicons and easily save them.

    I can change a bookmark favicon in 15 seconds.

    • http://www.minterest.com Mahesh Mohan

      Hi,

      I was trying to find a way to do that without installing any plugin. :)
      Never tried the javascript method though.

      • analyzethis

        Yeah, I’ve given in on the extensions thing. I have 30 on here though only maybe 24 active at any one time. I used to try and limit them but ……………….

  • Array

    Since my bookmark tab is getting crowded I have been creating folders with sets of URLs with their respective icons in them. Is there a way to change the plain vanilla folder icon into something meaningful, for example, a bank icon for the folder containing bank URLs, a mail icon for that containing email URLs and so on?

  • jch

    Thanks! For some unknown reason a local forum I have bookmarked in Chrome managed to grab Facebook’s favicon. Now I can remove the names from my bookmark bar (after creating an html file as recommended here) and won’t be confused by two Facebooks LOL

    • http://www.minterest.com Mahesh Mohan

      Haha! Yes… it works!

      • jch

        Actually. I couldn’t get the html thing to work so I went with the plugin that was discussed by another commenter. I tried but no joy. Maybe because I’m using Ubuntu as my o/s ?

        • http://www.minterest.com Mahesh Mohan

          Oh yes! It could be the reason.. I’m not sure about how bookmarking works on Ubuntu or another OS as I used a Windows PC to test this. :)

  • G Warner

    Trying to figure out how to do this. I don’t know HTML, don’t have a web server, so even the explanation about how to have it on my own PC isn’t clear to me.

  • http://www.minterest.com Mahesh Mohan

    I can guide you… are you using a Windows PC?

    • G Warner

      Yes. And Thank you.

  • http://www.minterest.com Mahesh Mohan

    Hi,

    Do you know basic things like… what is a favicon, finding the location of favicons of your favorite websites, etc.?

    If no, then use the contact form of this blog and give me more details.

    I’ll be glad to help.

  • 1mw

    I couldn’t seem to get the html workaround to work either… I don’t know the specs on the favicon image size etc. so perhaps that’s my problem. I tried copying & pasting the html code as you have it but that didn’t work either. The bookmark doesn’t show a favicon (just the plain white paper sheet) NOR does the bookmark redirect. Thanks for your help!

    • http://www.minterest.com Mahesh Mohan

      On Windows or Mac?

      • 1mw

        Windows

        • http://www.minterest.com Mahesh Mohan

          Hi,

          Can you please confirm whether you did things in a proper way?

          Here’s a sample:

          If you go to this website http://feedly.com/ then you can see their default Favicon. But instead try to add the following link http://maheshone.com/Feedly.html to your bookmarks. It will first show the favicon of the domain name (maheshone.com) and then it changes automatically to another one.

          To see the codes, go to this address “view-source:http://maheshone.com/Feedly.html” on Google Chrome (without quotes).

          Hope this helps.

          • 1mw

            That worked fine. The initial favicon was the blank page but once it was clicked it changed to the modified feedly favicon.

            However, that source code seems quite a bit more than the html you have above. Am I going to need to generate that much code or is that superfluous. The site I want a Favicon for is just our local soccer league’s page. http://www.sanantoniosoccer.com Does it matter that it doesn’t have any favicon currently? I was hoping I’d just have to cut & paste the html you typed above & change the href to an image file saved on my desktop… Is that feasible, yet I’m missing something else or will I have to provide nearly as much html code as you have in your redirect, plus more tinkering w/ the image file?

          • 1mw

            actually, on further inspection, I think I’m only getting the source AFTER the re-direct… I don’t know how to view the source code before it re-directs me

          • 1mw

            okay, I figured out how to view the source directly… the elision of the last ‘ml’ from that view source link troubled my browser… re-trying

          • 1mw

            Nevermind Mahesh, it’s working for me now… I appreciate the help, I just need to resize the image now…. Thanks!

          • http://www.minterest.com Mahesh Mohan

            Great! Let me know if there’s another problem with this.

  • Carlos Mario

    Great idea, but does it work with java bookmars? For example, this is the content of my URL’ bookmark:

    javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=”){location.href=’http://translate.google.com/?text=’+t+’&hl=en&langpair=auto|es&tbb=1&ie=’+e;}else{location.href=’http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&hl=en&langpair=auto|es&tbb=1&ie=’+e;};

  • http://www.minterest.com Mahesh Mohan

    No, it won’t work for javascript bookmarks. I was not able to find a solution for javascript bookmarks. Maybe an extension is there for that. Did you try?

    • http://rocketink.net/ Patrick Welker

      It most definitely works. I did it just a week ago. Try my instructions from the comment above. Here’s an example of the code (https://gist.github.com/anonymous/e0b9fcac38ef85080939) from the attached screen shot using Brett Terpstra’s HeckYesMarkdown(ifier).

      • http://www.minterest.com Mahesh Mohan

        Hey,

        Can you please show the exact URL (using a pastebin URL or anything) that you are using? For instance, here is the code for Google Bookmarks: http://pastebin.com/V8gh5j6V. Can you show how to add an icon to it? Say, Google.com’s favicon itself.

        • http://rocketink.net/ Patrick Welker

          I did exactly that by using Gist. If you can’t open the URL, delete the closing parenthesis at the end – Disqus accidently appended it to the URL.

  • DeadInHell

    Dragging and dropping this HTML file into my bookmarks just leaves me with a broken bookmark that has no favicon.

    I tried the extensions and none of them seem to work very well either. It’s amazing that such a simple thing can be so difficult to fix.

    • http://www.minterest.com Mahesh Mohan

      Ooops! But it’s working perfectly for me. See the attached picture. You can see that Feedly.com’s favicon is different on their website. But I’m linking to http://maheshone.com/Feedly.html as I used a custom favicon. Try to add http://maheshone.com/Feedly.html to your bookmarks. It will first show the favicon of the domain maheshone.com and then it changes to this custom one. You can also check the source code of that page by pasting the following URL on Chrome’s address bar: view-source:maheshone.com/Feedly.html

  • Greg Tomilson

    Noooooo!!! … tried your solutions. The first, create a link using IE then changing the icon under properties of the link, and then importing to Chrome: Chrome strips the icon image back off!!! … and the second one: I don’t want to re-direct… that’s a dead link waiting to happen… Then I tried the Favicon Changer you referred to… Awesome app. So easy… sits beside URL window click on it and it lets you browse to the icon image file (can be any graphics format) and it changes the Favicon in the link for current page. Done.

  • Kyle Schmolze

    I created the docs and icons needed for Google Docs shortcuts if anyone wants to use em! https://github.com/kyletns/quick-docs