變更瀏覽器書籤小工具(Bookmarklets)的圖示

自己常用的書籤小工具Bookmarklet已經使用很多年了,也一直對於這個小工具無法更換ICON一直覺得彆扭(它的圖示會隨著不同瀏覽器的書籤預設圖案而改變),但因為也不影響作業所以也沒放在心上,最近在瀏覽網站時發現有人找到更換書籤小工具(Bookmarklets)圖示的方法,因此把它紀錄在此以供給日後利用。

變更書籤小工具的圖示

首先要注意,這個變更無法被時下的瀏覽器書籤同步功能所複製,也就是說跨越不同電腦的瀏覽器,你自己都要重來一次,而且跨裝置同步的時候ICON可能會被洗掉。

不要懷疑!產生的標籤就是沒有對稱,連我自己也不知道為啥要這樣寫。

完成後動作

把上面的HTML圈選存成.html後,利用瀏覽器的匯入「我的最愛」功能讀取並匯入,就可以在書籤中找到。位置大概會被放在「其他我的最愛」之類的資料夾,自己找一下應該不難。

範例:筆記Bookmarklet

這是一個我自己寫的還蠻常用的臨時性筆記Bookmarklet,大家可以把下列下方程式碼貼到上方的書籤網址,至於書籤文字請自行命名,圖示部分我使用的是Base64編碼故可閃躲書籤同步的問題,因此書籤圖示請留白即可。

data:text/html;charset=utf-8,<title>Temporary Note</title><style>body{min-height:100vh;margin:1.5em;font-family:Consolas;font-size:2em;line-height:1.5em;background-color:beige}</style><link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAABrElEQVRYhe2WTU7CQBSAOYJnMG70FO7dGXdGDYIIaCViDGqAAWwXIIZAS6FAQAJOMUQksvBnSfEWegWXuhynbdDyF20HQmqY5NvMvL73ZfpmMhaLwUG9wDVKgo8y+5K4ajSPoeGRapsHHRFpoTq19QkXhIKCBKu44OeAgAQ/1DU1jmqLG2MToDqw0F/wVyQxbz4BG2CX7YB1dLH504ukAlaQXNLm3A6kV0YLBNmSHXDoB9Ypz+NkKZz0XReSmFRzcq7enNyzbgGSQSRgA1wDs2AF/LwR5G/xb20S7MBEmAn8TcB5nkVHiQo6TlSJcdGCfgG6eI/SjfZYiFYe9AscXpQRgyVoQphiS9lJ8/XATEDuXF8SopOUSIScY4/JTfcUxIycAk+shML5JuaOGG+8bMIemAm46RzypWBPNzvCPNrBa/L93p33xq+U+N1IZmi8YQGm1Bro5jPuBnmixZ457raNnJEsCvD1IfE14wJyIW0nA6Gh3A2OEI/8mfr3/CmrFnEzAgrhmP548/bA/xUIsk9TFcDP9MvRAoCNYcO3SYCf6K/2IHe9BRJz2ppf1QcuRFqgJGgAAAAASUVORK5CYII="/><body onload="document.body.focus()" contenteditable><div style="min-height:100vh;padding:2rem;border-radius:10px;border:1px solid lightgray;background-color:white;"><div>Type something here ...</div></div>
Chrome Chromium Browser Bookmark Bookmarklet MyFavorite Favicon Image Picture Icon Change Replace