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.

Don’t Miss: The 26 Best Google Chrome Extensions To Make Your Internet Life Easier

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.

Here’s another live example:

<head>
<title>Twitter @maheshone</title>
<link rel=”icon” href=”https://matrics360.com//images/Twitter_favicon.ico” type=”image/x-icon”/>
<meta http-equiv=”refresh” content=”0; url=https://twitter.com/maheshone” />
</head>
<body>
</body>
</html>

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!

Also Try: How To Create Custom Search Engines In Chrome To Boost Productivity

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.

First Published: January 22, 2014; Last Updated: Monday, March 12, 2018.

Print Friendly, PDF & Email

Mahesh Mohan

Hey there, I’m Mahesh (@maheshone) — Chief Content Strategist @ Minterest and an organic marketing evangelist. I write about tech, marketing, and everything in between that truly excites me. Outside of that, I’m equally passionate about the financial markets, and also spend A LOT of time doing random things. Also, the Chief Everything Officer (@Infirn Labs).

View all posts

Meet The Blogger

Mahesh Mohan

Hey there, I’m Mahesh (@maheshone) — Chief Content Strategist @ Minterest and an organic marketing evangelist. I write about tech, marketing, and everything in between that truly excites me. Outside of that, I’m equally passionate about the financial markets, and also spend A LOT of time doing random things. Also, the Chief Everything Officer (@Infirn Labs).