🏠引きこもりエンジニアの徒然ログ

😎 Daily

[Daily Log] サイトの「顔」を完全に自分仕様へ:アイコン作成とfaviconの罠


🎨 アイコンのSVG化とfavicon作成

サイトの個性を出すために、三毛猫をあしらったオリジナルアイコンを各プラットフォーム向けに最適化しました。

  • SVGファイルへの変換: JPG形式の画像をWebで扱いやすいベクター形式にするため、Adobe Express を使用。ブラウザ上で手軽に高精度な変換ができました。

    bookmark

  • favicon.icoの作成: PCブラウザのタブに表示される .ico 形式への変換には、favicon.io を活用。複数のサイズをパッケージ化した標準的なファイルを作成しました。

    bookmark

🛠 GitHubリポジトリの更新

GitHubの public ディレクトリに、作成したファイルを反映させました。

  • [x] avatar.svg の差し替え
  • [x] favicon.ico の差し替え
  • [x] apple-touch-icon.png の差し替え(iPhone用)

古いファイルを削除してから新しいファイルに差し替えることで、Vercel側でも正しく再デプロイが完了しました。

🤨 残された謎:しつこく残る「サングラスの男」

すべてのファイルを三毛猫に差し替えたはずですが、ブラウザのタブには相変わらず以前のアイコン(サングラスをかけたキャラクター)が表示され続けています。

考えられる原因と対策:

  • ブラウザキャッシュの仕業: faviconはブラウザが非常に強力にキャッシュするため、一度記憶されるとなかなか更新されません。
  • 確認したこと: Vercelの設定やGitHub上のファイルは確実に更新されているため、時間が解決するか、あるいはブラウザのキャッシュを完全にクリアする必要があります。

🎯 本日のまとめ

今日は「見た目」に関する技術的なカスタマイズに集中しました。

  1. プロフィール情報を自分専用に書き換え。
  2. 三毛猫アイコンをWeb標準の各種形式に変換。
  3. リポジトリの物理ファイルを完全に入れ替え。

見た目は整いました。あとは、Notionの記事がこの「三毛猫ブログ」に並ぶ瞬間を待つのみです。