bookmarklet自定义favicon自动设置实现方案咨询

拖拽到书签栏时自动配置 #

该方案利用浏览器拖拽添加书签的默认逻辑实现，不需要用户额外操作：

• 首先将你想要设置为Bookmarklet图标的资源转为PNG格式的base64编码，控制体积在2KB以内避免后续代码过长
• 在放置Bookmarklet拖拽按钮的页面<head>标签中插入如下代码，将当前页面的favicon设置为目标图标：

<link rel="icon" href="data:image/png;base64,替换为你的图标base64编码" type="image/png">

浏览器在用户拖拽当前页面上的Bookmarklet链接到书签栏时，会自动提取当前页面的favicon赋值给新增的Bookmarklet，完成自动配置

首次点击Bookmarklet后自动设置 #

针对已经添加到书签栏的Bookmarklet，可以通过临时跳转触发浏览器更新书签图标：

• 在原有Bookmarklet逻辑中新增首次执行判断，通过localStorage记录是否已经完成图标设置，首次执行时先跳转至携带目标favicon的临时页面，完成图标更新后自动回到原页面执行业务逻辑，代码框架示例如下：

javascript:(function(){
    // 判断是否已经完成图标设置
    if(!localStorage.getItem('favicon_set_flag')) {
        localStorage.setItem('favicon_set_flag', '1');
        // 构造携带目标favicon的临时页面
        const tempPage = `data:text/html,<html>
<head><link rel="icon" href="data:image/png;base64,替换为你的图标base64编码"></head>
<body><script>setTimeout(()=>history.back(),15)<\/script></body></html>`;
        window.location.href = tempPage;
        return;
    }
    // 下方放置你原有Bookmarklet的业务逻辑
    console.log('业务逻辑执行');
})();

该方案兼容Chrome、Edge、Firefox主流版本，Safari环境下可适当延长临时页面的停留时长保证图标被成功抓取

注意事项 #

• 不要使用外部域名的图标地址，会被浏览器安全策略拦截，统一用base64编码嵌入可以避免跨域问题
• 如果需要适配多设备，建议生成16x16、32x32两种尺寸的图标base64同时放到临时页面的<head>中提升兼容性

内容的提问来源于stack exchange，提问作者Todd Everett