100行代码实现 favicon 小工具

这几天查看统计的时候发现统计页面的小图标不显示了。

图标变成了一个白色方框，这个umami 一直无法加载 favicon，之前换成了：https://favicon.cccyun.cc/h4ck.org.cn

现在这个服务貌似证书过期了，也没人维护，看来也没多少人用啊：

本着能动手尽量别 bb 的理念，既然不能用了那就自建服务吧。

个人觉得最简单的代码还是通过 python 实现，依赖于 flask + favicon 库，只需要一百行代码就 ok 了。实现方式，通过 favicon 库获取图标，将图标数据缓存到 redis，再次请求直接返回 redis 缓存数据。完整代码如下：

import json

from flask import Flask, request, redirect, jsonify
import favicon
import redis
import json
from urllib.parse import urlparse

app = Flask(__name__)

rds = redis.Redis(host='localhost', port=6379, db=1)


def get_domain_from_url(url):
    parsed_uri = urlparse(url)
    return 'https://{uri.netloc}'.format(uri=parsed_uri)


def get_query_count():
    key = 'QUERY_COUNT'
    count = 1
    if rds.exists(key):
        count = int(rds.get(key))
    return count


def set_query_count():
    key = 'QUERY_COUNT'
    count = 1
    if rds.exists(key):
        count = int(rds.get(key))
        count += 1
    rds.set(key, count)
    return count


def get_icon_list_from_rds(key):
    if rds.exists(key):
        # print('cached')
        cashed = rds.get(key)
        js = json.loads(cashed)
        return js
    icons = favicon.get(key)
    # rds.set('url',icons,)
    icon_list = []
    for i in icons:
        data = {
            'url': i.url,
            'width': i.width,
            'height': i.height,
            'format': i.format
        }
        icon_list.append(data)
    js_str = json.dumps(icon_list)
    rds.setex(key, 86400, js_str)
    return icon_list


@app.route('/')
def hello_world():  # put application's code here

    return ('--------------------------- <br> '
            'Query count:' + str(get_query_count()) + '<br>'
                                                      '=========================== <br> '
                                                      'Baby Favicon Tool v1.0  \r\n<br> by:obaby \r\n <br><a href="https://oba.by" target="_blank">https://oba.by</a> <br>\r\r '
                                                      '<a href="https://h4ck.org.cn" target="_blank">https://h4ck.org.cn</a>')


# http://127.0.0.1:5000/api/get_favicon?url=https://h4ck.org.cn
@app.route('/api/get_favicon')
def search():
    query = request.args.get('url')
    if '.' not in query:
        return 'invalid url'
    if not query.startswith('http'):
        query = 'http://' + query

    icons = get_icon_list_from_rds(query)
    set_query_count()
    # icons_str = json.dumps(icons)
    return jsonify(icons)


@app.route('/api/redirect_favicon')
def redirect_icon():
    query = request.args.get('url')
    if '.' not in query:
        return 'invalid url'
    if not query.startswith('http'):
        query = 'http://' + query
    set_query_count()
    icons = get_icon_list_from_rds(query)
    try:
        icon_url = icons[0]['url']
    except:
        icon_url = 'https://h4ck.org.cn/wp-content/uploads/2024/09/favicon.png'
    return redirect(icon_url, code=302)


if __name__ == '__main__':
    app.run()

到这里这个服务就算完成了，后续就是通过 nginx 反代了，经常反代的朋友都回了，我就不写了。

修改 umami 源代码：vim umami/src/components/common/Favicon.tsx

修改划线部分为上述内容，重新编译即可，编译过程中很可能会卡在 build-geo.修改 build 脚本 vim scripts/build-geo.js

这个破玩意儿 bug 之处在于，如果使用 github 代理，下载过程会出错，第二部分的实时解压就挂了，这个逻辑也是 tm 神了，不能下载完再解压吗？

直接下载第一处gz 文件解压，将 GeoLite2-City.mmdb放入geo 目录下，注释掉第二部分执行 yarn build 即可。不得不多，这 dq 真是给程序员创建了无数的便利，就尼玛离谱。重新启动服务一切就 ok 了。

图标又回来了，现有服务地址： https://favicon.h4ck.org.cn (不保证服务可用性，有时候的确是懒不想折腾了，之前的 gravatar 忽然因为 cdn 问题就失效了，结果删除重建也不行就放弃了。这个实属无奈，但是基本都会保证一个可用的服务。)

使用方法：

接口：  
1. 获取 favicon 数据，返回 json 格式  
http://127.0.0.1:5000/api/get_favicon?url=oba.by  
返回数据内容：  
```json
[
  {
    "format": "png",
    "height": 300,
    "url": "https://oba.by/wp-content/uploads/2020/09/icon-500-300x300.png",
    "width": 300
  },
  {
    "format": "png",
    "height": 200,
    "url": "https://oba.by/wp-content/uploads/2020/09/icon-500-200x200.png",
    "width": 200
  },
  {
    "format": "png",
    "height": 192,
    "url": "https://oba.by/wp-content/uploads/2020/09/icon-500-200x200.png",
    "width": 192
  },
  {
    "format": "png",
    "height": 32,
    "url": "https://oba.by/wp-content/uploads/2020/09/icon-500-100x100.png",
    "width": 32
  },
  {
    "format": "ico",
    "height": 0,
    "url": "https://oba.by/favicon.ico",
    "width": 0
  },
  {
    "format": "jpg",
    "height": 0,
    "url": "https://h4ck.org.cn/screenshots/obaby_tuya.jpg",
    "width": 0
  }
]
```
2. 直接返回 favicon 链接  
http://127.0.0.1:5000/api/redirect_favicon?url=oba.by  
返回数据内容为上述接口的第一个结果，例如上面的 域名将会直接 302跳转到 https://oba.by/wp-content/uploads/2020/09/icon-500-300x300.png  
如果没有 favicon 将会返回默认连接：https://h4ck.org.cn/wp-content/uploads/2024/09/favicon.png

代码地址：

https://github.com/obaby/baby-favicon-tool.git