Safariスタートページのアイコンをカスタム

---

メインのWebブラウザとして、Apple製品ではSafari、LinuxではFirefoxフォークのFloorpを使っています。
Safariのスタートページは広告はもちろんSafariのロゴすらないというSimple is Bestなデザインで非常に好きなんですが、一つ不満があります。

ブックマークアイコンをカスタムできない！！

FireFoxでは画像URLを指定することができるのですが、Safariで編集できるのは名前のみでアイコンは指定できません。

運営者がきちんとしたアイコンを設定していれば問題ないのですが、現実はこんな感じです。

• Youtube: 背景が透過している
• Gitea: Safariによってマージンが追加されている
• Amazon: そもそも画像がない

これではせっかくのシンプルなデザインが台無しです。

もちろん自分が運営しているサイトであれば、サーバーの設定を見直せばいいだけですが(実際、Giteaは自分で画像を差し替えて直しました)、ほとんどの場合そうはいきません。

さらに厄介なことに、この画像はバックグラウンドで取得されるようで、開発ツールでmetaタグを書き換えても効果なしです。
そのため、今回はシステムファイルを直接操作して変更します。

画像を書き換える

まず、画像を書き換えます。
アイコン画像は~/Library/Safari/Touch Icons Cache/Images下に保存されています。ファイル名は{hostのmd5ハッシュ値(UPPERCASE)}.pngとなっているので、これを書き換えたり、新規作成してください。
ちなみにハッシュ値はmd5コマンドで取得できます。

md5 -s www.google.co.jp | tr '[:lower:]' '[:upper:]'
# 5A539F8E2AC562762F36E76E15AE04C6

この時点でSafariを再起動すると半分くらいのサイトは変更できてますが、残りは画像が表示されなくなったりします。アイコンの情報がデータベースに記録されているため、画像を書き換えるだけではうまくいかない場合があるのです。

設定が無いならDBを直叩きすれば良いじゃない

Safariのブックマークアイコンの情報はSQLiteで~/Library/Safari/Touch Icons Cache/TouchIconCacheSettings.dbに記録されています。これを書き換えできれば、どんなサイトのアイコンもカスタムし放題になります。

中にはcache_settingsというテーブルがあり、このような構造になっています。

sqlite> .schema
CREATE TABLE cache_settings (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    host TEXT NOT NULL UNIQUE,
    last_request_date REAL NOT NULL,
    last_request_was_in_user_loaded_page BOOLEAN NOT NULL DEFAULT 0,
    request_count INTEGER NOT NULL DEFAULT 0,
    icon_is_in_cache BOOLEAN NOT NULL DEFAULT 0,
    download_status_flags INTEGER NOT NULL DEFAULT 0,
    extracted_color BLOB NULL,
    transparency_analysis_result INTEGER NOT NULL DEFAULT 0,
    uuid TEXT NULL,
    last_response_status_code INTEGER NOT NULL DEFAULT 0
);

それぞれの値は以下のようになります。正式な文書がないのでいずれも推測です。

key	説明(推測)
id	AUTOINCREMENT
host	ホスト名
last_request_date	2001-01-01からの秒数
last_request_was_in_user_loaded_page	読んで字の如く
request_count	読んで字の如く
icon_is_in_cache	アイコンが保存されているか
download_status_flags	download_status_flagsと同じ?
extracted_color	使われてない?
transparency_analysis_result	0~4
uuid	使われてない?
last_response_status_code	ステータースコード

DB書き換え

UPDATEで直接書き換えてもいいですが、DBを作り直す方が気分スッキリでおすすめです。

まず、以下のコマンドでDBを作成します。
SQLite3はmacOSに標準でインストールされています。

sqlite3 TouchIconCacheSettings.db

次に、テーブルを作成

CREATE TABLE cache_settings (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    host TEXT NOT NULL UNIQUE,
    last_request_date REAL NOT NULL,
    last_request_was_in_user_loaded_page BOOLEAN NOT NULL DEFAULT 0,
    request_count INTEGER NOT NULL DEFAULT 0,
    icon_is_in_cache BOOLEAN NOT NULL DEFAULT 0,
    download_status_flags INTEGER NOT NULL DEFAULT 0,
    extracted_color BLOB NULL,
    transparency_analysis_result INTEGER NOT NULL DEFAULT 0,
    uuid TEXT NULL,
    last_response_status_code INTEGER NOT NULL DEFAULT 0
);

データを書き込みます。
example.comを設定するホスト名に変えて、あとは固定値でokです。
これをカスタムしたいサイトごとに行ったら、.quitで抜けます。

INSERT into cache_settings(host, last_request_date, last_request_was_in_user_loaded_page, request_count, icon_is_in_cache, download_status_flags, transparency_analysis_result, last_response_status_code) 
values("example.com", 800000000.000000, 1, 1, 1, 1, 1, 200);

生成されたファイルを~/Library/Safari/Touch Icons Cache/TouchIconCacheSettings.dbに移動して完了です。

mv -f "TouchIconCacheSettings.db"  "$HOME/Library/Safari/Touch Icons Cache/TouchIconCacheSettings.db"

(追記)シェルスクリプト作りました

以下のスクリプトのsites=...の部分を書き換えて保存、実行権限を付与して実行してください。

sites=("www.google.com" "www.youtube.com" "mi.moris.day" "git.moris.day" "github.com" "ja.wikipedia.org" "www.apple.com" "www.amazon.co.jp")

sqlite3 TouchIconCacheSettings.db "CREATE TABLE cache_settings (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    host TEXT NOT NULL UNIQUE,
    last_request_date REAL NOT NULL,
    last_request_was_in_user_loaded_page BOOLEAN NOT NULL DEFAULT 0,
    request_count INTEGER NOT NULL DEFAULT 0,
    icon_is_in_cache BOOLEAN NOT NULL DEFAULT 0,
    download_status_flags INTEGER NOT NULL DEFAULT 0,
    extracted_color BLOB NULL,
    transparency_analysis_result INTEGER NOT NULL DEFAULT 0,
    uuid TEXT NULL,
    last_response_status_code INTEGER NOT NULL DEFAULT 0
);"

for site in ${sites[@]}
do
  sqlite3 TouchIconCacheSettings.db \
    "INSERT into cache_settings(host, last_request_date, last_request_was_in_user_loaded_page, request_count, icon_is_in_cache, download_status_flags, transparency_analysis_result, last_response_status_code) 
    values('${site}', 800000000.000000, 1, 1, 1, 1, 1, 200);"
done

mv -f "TouchIconCacheSettings.db" "$HOME/Library/Safari/Touch Icons Cache/TouchIconCacheSettings.db"

完成

非常にすっきりとしてとても良いですね。
macを移行したときのためにDBやアイコン画像はバックアップしておきましょう。