javascript: のブックマークレットは、Chrome のブックマークバーだとデフォルトの📄みたいなアイコンになる。そのままで好きなファビコンを付ける方法。

なぜアイコンが付かないか

URL が javascript:... だから、普通のページみたいに HTML を読まない。Chrome はアイコンを取れず、共通アイコンになる。

やり方（エクスポート → 編集 → インポート）

3ステップで付けられる。

1. 使いたいファビコンのページをブックマークする

アイコンに使いたいファビコンが出ているページを開いて、そのページをブックマークバーに追加する。これで「アイコン付きの普通のブックマーク」が1つできる。

2. ブックマークをエクスポートして HTML を編集する

Chrome の ブックマーク → ブックマークマネージャ を開き、右上の ⋮ から ブックマークをエクスポート で HTML で保存する。

その HTML をエディタで開くと、1行1ブックマークでこんな形になっている。 

<DT><A HREF="https://example.com/page" ICON="data:image/png;base64,...">ページ名</A>

1で追加したブックマークの行には ICON="..." がある。この ICON="..." を引用符ごとコピーする。

ブックマークレットの行を探す。HREF="javascript:..." だけで ICON が無い（かデフォルト）の行に、さっきコピーした ICON="..." をペーストする。

編集前のブックマークレットの行：

<DT><A HREF="javascript:alert(document.title)">タイトル表示</A>

1のブックマークから ICON="data:image/png;base64,iVBORw0K..." をコピーして付けた後：

<DT><A HREF="javascript:alert(document.title)" ICON="data:image/png;base64,iVBORw0K...">タイトル表示</A>

編集したら HTML を保存する。

3. ブックマークをインポートする

既存のブックマークを整理したいときは、事前に不要なのを消すか別フォルダに退避しておく。Chrome の ブックマーク → ブックマークマネージャ で ⋮ → ブックマークをインポート を選び、2で編集した HTML を指定してインポートする。これで javascript: のままファビコンが出る。

ポイント

  • ファビコンは「そのアイコンが出ているページを1つブックマークする」だけで足りる。画像を自分で用意しなくていい。
  • エクスポートした HTML では、アイコンが data:image/png;base64,... や https://... で ICON に入っている。
  • ブックマークレットは javascript: のままなので、クリック時の動きは変わらない。

注意

  • インポートで既存と重なったりフォルダ構成が変わることがある。心配ならエクスポート前にバックアップか、テスト用フォルダで試すといい。