「Tumblr」ブログのファビコン（アイコン）をオリジナルに変えたい【T】
 |
サイトの印象を決めるアイコンを新しく設定したい
ブラウザのタブに表示される小さな画像、いわゆるファビコンは、読者が複数のページを開いている時にあなたのサイトを見つける目印となります。 また、スマートフォンでホーム画面にショートカットを作成した際にもこのアイコンが使われるため、非常に目につきやすい部分です。
自分だけのオリジナルアイコンを設定することで、ブログのブランド力を高めることができます。 具体的には以下のメリットが得られます。
多数のタブが開かれていても、自分のブログを一瞬で見分けてもらえるようになる。
サイト全体のカラーやテーマと合わせたアイコンで、統一感を演出できる。
ブックマークされた際にも独自のマークが表示され、記憶に残りやすくなる。
クリエイターとしてのこだわりが細部まで行き届いている印象を与える。
アドバイスとして、ファビコンは非常に小さく表示されるため、複雑な絵柄よりもシンプルでコントラストのはっきりしたデザインを選ぶのがおすすめです。
外観設定からアイコン画像をアップロードしたい
もっとも基本的な解決方法は、ブログのカスタマイズ画面にある「外観を編集」からアイコンを登録することです。 特別なコードを書き込む必要はなく、手持ちの画像ファイルを選択するだけで自動的に最適なサイズに調整されます。
作業をスムーズに進めるため、以下の手順で設定を行ってください。
ダッシュボードの右上にある「アカウント」メニューから「外観を編集」を選択する。
プレビュー画面の左側にある「ブログアイコン」の円形部分、または編集ボタンをクリックする。
デバイスに保存されている正方形の画像ファイルを選択してアップロードする。
アイコンを「丸型」にするか「四角型」にするかを選択して保存する。
ブラウザを更新して、タブの表示が切り替わっているか確認する。
注意点として、画像のファイル形式は「PNG」や「JPG」が推奨されており、サイズは「128x128ピクセル」以上の正方形を用意するときれいに表示されます。
表示の精度を高めてより魅力的なアイコンに仕上げたい
標準の設定でうまくいかない場合や、より高度な表示を目指したい場合には、ひと工夫加えることで仕上がりに差がつきます。 作品の表現を広げるために、デバイスごとの見え方にもこだわってみてください。
背景を透過させてデザインを際立たせたい
アイコンの周りに余計な白枠を入れず、形をくっきり見せたい場合は「背景透過」の画像を使用するのが効果的です。 ブラウザのダークモードなど、閲覧環境が変わっても美しく表示されるようになります。
具体的な手順は以下の通りです。
イラストソフト等で背景を透明にした「PNG形式」の画像を作成する。
透過部分が正しく処理されているか、保存前にプレビューで確認する。
作成した透過PNGファイルをTumblrの設定画面からアップロードする。
様々な背景色のタブで、アイコンの縁が不自然になっていないかテストする。
アドバイスとして、透過画像にする場合は、アイコン自体の色を背景に埋もれないような明るめの色味にしておくと視認性が高まります。
HTMLを編集して高精細なファビコンを指定したい
外観設定からのアップロードだけでは画質が気になる場合、HTMLコードを直接編集して、より高解像度なアイコンファイルを指定することもできます。 これにより、Retinaディスプレイなどの高精細な画面でもぼやけないアイコンを提供できます。
具体的な手順は以下の通りです。
アイコン画像を一旦ブログの投稿（非公開でも可）などにアップロードして、画像URLを取得する。
「HTMLを編集」画面を開き、ヘッドタグ内にリンクタグを記述する。
「rel="shortcut icon"」などの属性を使い、先ほどの画像URLを指定する。
コードを保存し、実際のブラウザ表示で精細さが向上したか確認する。
注意点として、標準の設定とコードによる指定が競合することがあるため、設定後は必ず複数のブラウザで表示崩れがないかチェックしてください。
ロゴと背景色の組み合わせを最適化したい
アイコン単体ではなく、ブログ全体の「ヘッダーカラー」とアイコンの組み合わせを調整することで、さらに洗練された印象になります。 小さなアイコンを、ブログのデザインの一部として機能させる考え方です。
具体的な手順は以下の通りです。
ブログのアクセントカラー（キーカラー）をアイコンのメインカラーと合わせる。
アイコンの背景を「四角」に設定し、ブログの背景色と同化させることで一体感を出す。
アイコンをあえて少し小さめに配置した画像を作成し、余白を持たせて上品に見せる。
全体のプレビューを見ながら、アイコンが主張しすぎず、かつ埋もれないバランスを探る。
これらの工夫を重ねることで、訪問者があなたのブログを訪れた際に「丁寧なサイト作りがされている」という信頼感を与えることができます。
アイコン変更後の効果とチェック項目を確認したい
オリジナルのアイコンが反映されると、ブログは単なる投稿の集まりから、一つの完成された「作品」へと進化します。 最後に、正しく運用できているかを見直すことが大切です。
具体的には以下の結果が期待できます。
SNSのシェア画面や検索結果で、ブログのアイコンが独自のシンボルとして表示される。
スマートフォンのホーム画面に保存してくれた熱心な読者にとって、アプリのような使い心地を提供できる。
自分自身でもブログを開くたびに、独自のアイコンが目に飛び込んでくることで制作意欲が刺激される。
ブログのロゴやヘッダー画像と連動させることで、一貫したブランドイメージを構築できる。
アドバイスとして、アイコンを変更した直後はブラウザに古いデータが残っていて反映されないことがあるため、キャッシュをクリアして確認する習慣をつけると確実です。
