ブログの名前・ロゴ・ファビコンを決めた話｜「EmDashどんぐりノート」ができるまで
公開日約2分で読めます
ブログの名前を「EmDashどんぐりノート」に決め、ロゴとファビコン（ブラウザのタブに出る小さなアイコン）を作って設定するまでの記録です。名前の決め方、3案からの選び方、EmDashでの設定方法をまとめました。
最初は「EmDash実践ログ」という名前だった
このブログは、最初「EmDash実践ログ」という名前でした。分かりやすい反面、どこにでもありそうで、覚えてもらいにくい名前です。
ファビコンも、ひな形のまま。ブラウザのタブを並べると、どれがこのブログか見分けがつきませんでした。
名前やアイコンって、後回しでもいいのでは？
私もそう思っていました。でも、記事の画像や吹き出しにキャラクター（リス）を使うと決めたとき、名前とロゴもそろえた方が「このブログらしさ」が出ると気づきました。
名前は「EmDashどんぐりノート」に
ブログの顔はリスに決めていたので、リスと相性のよい「どんぐり」を入れることにしました。どんぐりには、ブログの目的と重なる意味もあります。
- 小さなどんぐりが、やがて大きな木に育つ（小さな始まり）
- リスが少しずつどんぐりを蓄える（知識を少しずつためる）
- 森に種をまく（読んだ人が自分でサイトを作り始める）
頭の「EmDash」は、検索で見つけてもらうために残しました。
ロゴは3案から選んだ
ロゴは、AIのClaude Codeに3つの案を作ってもらい、並べて比べました。
案 | 形 | 良い点 | 気になる点 |
|---|---|---|---|
A | 黄緑の丸＋どんぐり | 小さくても形が分かる | 特になし |
B | ノート＋どんぐり | 「ノート」が伝わる | 小さいと線がつぶれる |
C | どんぐりだけ | すっきりしている | 背景によって見えにくい |
選んだのはAです。ファビコンは16〜32pxととても小さく表示されるため、「丸の中にどんぐり」という単純な形の方が、つぶれずに見えます。
ファビコンに必要な画像は3種類
ファビコンは、見る場所によって使われる画像が違います。このブログでは、次の3つを用意しました。
ファイル | 大きさ | 使われる場所 |
|---|---|---|
favicon.svg | 自由（図形のデータ） | 最近のブラウザのタブ |
favicon-32.png | 32px | SVGが使えないブラウザ |
apple-touch-icon.png | 180px | iPhoneでホーム画面に追加したとき |
EmDashでの設定方法
EmDashには、WordPressのように管理画面からファビコンを登録する欄がありません。サイトのファイルに直接置きます。
3つの画像を、サイトの「public」フォルダに入れる
ページの共通部分（レイアウトのファイル）の head に、3行を書き足す
本番に公開し、ブラウザのタブで確かめる
書き足した3行は、次のとおりです。
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />ロゴの文字だけ、丸い書体にした
画面左上の文字ロゴは、「EmDash」を小さく上に、「どんぐりノート」を大きく下に並べています。この文字だけ、丸みのある書体（Zen Maru Gothic）にしました。
ただし、日本語の書体は全部を読み込むと重くなります。そこで、Google Fontsの「使う文字だけを取り寄せる」指定を使い、ロゴに出てくる文字だけを読み込んでいます。
ロゴの文字は決まっているので、使う文字だけで十分です。ページの表示が遅くならずに済みます。
まとめ
- 名前は、キャラクターやブログの目的と結びつけると覚えてもらいやすい
- ロゴは「とても小さく表示されても形が分かるか」で選ぶ
- ファビコンは SVG・32px・180px の3種類を用意する
- EmDashでは、画像を public に置き、レイアウトに3行書き足す
コメント
まだコメントはありません。最初のひとことをどうぞ。