サイトアイコンを作り直したとき、意外と手間がかかった話

• サイトアイコンは、複数の大きさが必要
• 画像を入れるだけでは、生成されない場合がある
• 端末に残った古い画像が、しばらく表示される

サイトアイコンを新しくしようとして、思ったより手間がかかった。何が必要だったか記録する。

必要な大きさ

1枚用意すればよいと思っていたが、複数要る。

• タブに出る小さいもの
• スマホのホーム画面に置いたときのもの
• 各種の環境向けのもの

どれも自動で作られるはずだが、方法によっては作られない。

生成されない場合

画像を入れただけでは、大きさが揃わなかった。

• 管理画面から設定すると、自動で作られる
• 別の方法で入れると、作られないことがある
• 作られているか、確認が要る

3つ目を確認するまで、気づかなかった。タブには出るが、ホーム画面では古いままだった。

確認の方法

生成されているか、こう確認している。

• ページの情報を見て、指定されているURLを確認する
• そのURLを直接開く
• 画像が表示されるか見る

3つ目で分かる。指定されているのに、ファイルが無いことがある。

自分で作る

作られない場合は、自分で生成した。

• 必要な大きさの一覧を取得する
• 元の画像から、それぞれを作る
• 情報を更新する

3つ目を忘れると、ファイルはあるのに使われない。

古い画像が残る

新しくしても、すぐには反映されなかった。

• 端末に、古い画像が保持されている
• 再読み込みしても、変わらないことがある
• 保持される期間が長い

3つ目が厄介だ。アイコンは、特に長く保持される。

確実に変える方法

ファイル名を変えるのが、最も確実だった。

• 同じ名前で中身を差し替えない
• 名前に版数を入れる
• 名前が変われば、必ず取り直される

2つ目を習慣にしている。画像全般に当てはまる。

アイコンの作り方

小さく表示されるので、作り方にも注意が要る。

• 細い線は、消える
• 文字は読めない
• 単純な形と、はっきりした色にする

3つ目が原則だ。16px四方で何が見えるかを基準にする。

仕組みで作る

アイコンも、プログラムで作るようにした。

• 必要な大きさを、まとめて生成できる
• 意匠を変えたとき、一斉に作り直せる
• 単純な図形なので、十分に作れる

3つ目が条件だ。アイコンは細かい表現ができないので、図形と色だけで足りる。複雑にできない制約が、仕組みで作ることと相性がよい。ブランドの記号をそのまま使う形に落ち着いた。

確認する大きさ

いくつかの大きさで確認している。

• タブに出る小さいもの
• ブックマークの一覧
• スマホのホーム画面

3つ目は、実際に追加して見ないと分からない。背景の色によって、見え方が変わる。

PWAとの関係

ホーム画面に追加する機能を入れていると、別の指定も要る。

• 追加したときに使われる画像を、別に指定する
• 大きさの要件が決まっている
• サイトアイコンとは、別の設定になる

3つ目を知らず、片方だけ新しくして混ざった状態になった。同じ画像を使っていても、指定する場所が複数ある。変更するときは、どこで指定されているか洗い出してから作業する必要があった。

作業の順番

やり直して分かった、効率の良い順番を書く。

• 元の画像を1枚作る。大きめに
• 必要な大きさを一覧にする
• まとめて生成し、指定を全部更新する

3つ目をまとめてやるのが要点だ。1つずつ直すと、どこを更新したか分からなくなる。指定されている場所を先に洗い出してから、一度に差し替えるほうが確実だった。

古いアイコンの扱い

差し替えた後、古いファイルも整理した。

• 使われていないファイルが残る
• どこかで参照されていないか確認する
• 確認してから消す

2つ目が必要だ。本文中で使われている場合がある。

まとめ

• サイトアイコンは、複数の大きさが必要
• 入れ方によっては、自動で生成されない
• 指定されているURLを直接開いて、確認する
• 端末に残る期間が長い。ファイル名を変えるのが確実
• 16px四方で何が見えるかを基準に作る