やってみた

「ワンチャンくん」にファビコンを設定した｜小さな改善も全部記録する

パチスロ情報サイト「ワンチャンくん」に、ブラウザのタブへ表示される小さなアイコン（ファビコン）を設定しました。AIとClaude Codeを使いながら、ローカルと本番の両方で確認した記録です。収益への直接効果はまだ確認できていません。

公開日 2026-07-26 / 更新日 2026-07-26 / 読了時間 6分

この記事で分かること

ファビコンとは何か、初心者向けの説明
今回ワンチャンくんに実際に追加・変更したファイル
AIに作業を任せるときに、自分で確認したこと

目次を閉じる

パチスロ情報サイト「ワンチャンくん」に、ブラウザのタブに表示される小さなアイコン（ファビコン）を設定しました。

大きな機能追加や、アクセス数・収益の実績報告ではありません。今回は、サイト運営の中で行った小さな改善の記録です。

今回やったこと

今回の作業内容は次のとおりです。

ブラウザタブに表示するファビコンを設定した
app/favicon.icoを新規追加
app/icon.pngを新規追加
app/apple-icon.pngを新規追加
public/images/icons/icon-512.pngを調整
ローカル環境で表示を確認
/machinesページでもコンソールエラーがないことを確認
ファビコン関連ファイルだけをステージ
既存の未コミット変更はコミットに含めなかった
commit・push後、デプロイ完了を待機
本番環境で各ファイルの反映を確認
実際のブラウザタブでアイコン表示を確認
本番でもコンソールエラーがないことを確認

ファビコンとは何か

ファビコンとは、ブラウザのタブ、ブックマーク一覧、スマートフォンのホーム画面にサイトを追加したときなどに表示される、小さなアイコンのことです。

設定していないサイトでは、ブラウザが用意している何もない紙のようなアイコンがそのまま表示されます。タブをいくつも開いていると、どれがどのサイトか見分けがつきにくくなります。ファビコンを設定すると、タブを見ただけでそのサイトだと分かるようになります。

なぜ設定しようと思ったのか

ワンチャンくんは、独自ドメインの設定、機種情報の追加、検索機能の改善など、これまでいくつかの更新を重ねてきました。一方で、ブラウザタブに表示されるアイコンは、ずっと初期状態のままでした。

タブを何枚も開いて作業していると、自分でもワンチャンくんのタブがどれか、パッと見て分かりにくいと感じる場面がありました。大きな機能ではありませんが、サイトとして見分けやすくするために、今回設定することにしました。

実際に追加・変更したファイル

今回のリポジトリの差分を確認したところ、追加したファイルは次の4つでした。

app/favicon.ico（16×16と32×32、従来からあるタブ表示用の形式）
app/icon.png（192×192、メインとなるアイコン）
app/apple-icon.png（180×180、iPhoneなどでホーム画面に追加したときに使われるアイコン）
public/images/icons/icon-512.png（512×512、今後Webアプリ用の設定ファイルを用意する際のために準備。今回はまだ読み込み設定には組み込んでいない）

ワンチャンくんはNext.jsというフレームワークで作られており、今回のバージョンでは、決まった名前のファイルを決まった場所に置くだけで、ブラウザ側への設定が自動的に反映される仕組みになっていました。そのため、HTMLのコードを手動で書き換える作業は発生していません。

元になったキャラクター素材は、あらかじめ正方形でキャラクターが中央に配置されていたため、切り抜きの作業は不要で、サイズごとに縮小するだけで済みました。

実際の画像

AIとClaude Codeをどう使ったか

今回ファビコンとして設定した、ワンチャンくんのマスコットキャラクターのアイコン（512×512のもの）。

今回もAIとClaude Codeを使って作業を進めました。自分が行ったのは、次のようなことです。

「ブラウザタブに表示するアイコンを設定したい」という目的を伝える
どのファイルを、どのサイズで、どこに置く必要があるかを確認してもらう
出来上がったファイルが、指定したとおりの名前・サイズ・場所になっているかを自分の目で確認する

コードを1行ずつ自分で書いたわけではありませんが、AIに丸投げしたわけでもありません。「今回変更してよいのはファビコン関連のファイルだけ」という条件を先に伝えたうえで作業してもらい、結果を自分で確認する、という進め方をしています。

作業中に注意したこと

作業を始める前に、リポジトリの状態を確認したところ、今回のファビコン設定とは関係のない、未コミットの変更がすでに存在していました。

.claude/launch.json
app/privacy/page.tsx

これらは別の作業で変更されたもので、今回のファビコン設定とは無関係です。誤ってまとめてコミットしてしまわないよう、今回変更したファビコン関連のファイルだけを個別に指定してステージし、これら2つの既存の変更には触れていません。

ローカルと本番で確認した内容

ファイルを追加しただけで終わらせず、次の順番で確認しました。

ローカル環境で、実際にアイコンが表示されるかを確認
トップページだけでなく、/machinesページでもブラウザのコンソールにエラーが出ていないかを確認
ファビコン関連ファイルだけをステージし、commit・push
デプロイが完了するのを待機
本番環境で、追加した各ファイルが実際に反映されているかを確認
実際のブラウザタブで、アイコンが表示されていることを確認
本番環境でも、ブラウザのコンソールにエラーが出ていないことを確認

ローカルで表示できただけで安心せず、pushしたあとの本番環境と、実際のブラウザタブまで見て、最終的な確認は自分の目で行っています。

ファビコン設定だけで収益は増えるのか

正直に書きます。ファビコンを設定しただけで、すぐにアクセスや収益が増えるわけではありません。今回の作業について、SEOやアクセス数への直接的な効果は測定しておらず、確認もできていません。

それでも、ブラウザのタブで他のサイトと見分けやすくなったことは、サイトとしての完成度や信頼感を少し上げる改善にはなったと考えています。数字にすぐ表れるものではありませんが、運営を続けていくうえで無駄な作業だったとは思っていません。

今回分かったこと

非エンジニアでも、作業内容と確認条件を明確に伝えれば、AIに任せて対応できた
AIに作業を任せても、無関係なファイルをコミットしないかどうかは、自分で確認する必要がある
ローカルの表示だけで終わらせず、本番環境と実際のブラウザタブまで見て、初めて「完了した」と言える
大きな機能追加でなくても、小さな改善は記録として残す価値がある

次にやること

今回のファビコン設定のように、後回しにしていた細かい部分が、ワンチャンくんにはまだ残っていると考えています。次は、そうした地味だが手をつけていない部分を洗い出しながら、大きな機能追加だけでなく、こうした細部の改善も引き続き記録していきます。

確認したいポイント（チェックリスト）

自分のサイトでファビコンを設定するときに、確認しておきたいポイントをまとめました。

ブラウザタブにアイコンが表示されているか
スマートフォンや別のブラウザでも表示されるか
古いアイコンがキャッシュで残っていないか
本番環境へ反映されているか
コンソールにエラーが出ていないか
関係のないファイルをコミットしていないか

今回自分が実際に確認したのは、本文中の「ローカルと本番で確認した内容」に書いたとおり、ローカル環境・本番環境・実際のブラウザタブでの表示・コンソールエラーの有無・コミット対象の4点です。スマートフォンでの表示や、別のブラウザでの見え方、キャッシュの残り方までは、今回は確認できていません。

この記事を書いた人

SIMけん。専門家ではなく、実際に試した内容を初心者目線で記録しています。

記事内容の訂正窓口

仕様変更や誤りに気づいた場合は、お問い合わせページから連絡してください。