サイトのアイコン(=ファビコン)をバナー工房やペイントで作って設定してみました

使っている画像加工アプリ・サイト

 

 

こんにちは!めんか(@menkakaka)です。

 

サイトのアイコン(=ファビコン)を2通りの作り方で自作してみました。

 

  1. 画像加工サイト「バナー工房」
  2. Windows アプリ 「 ペイント 」

 

を使いますが、こうして出来上がった画像を、

 

「 WordPressのダッシュボード」 →「外観」➞「カスタマイズ」と、アップロードして設定するだけ。

 

これは「正確にはファビコンと呼ばないのでは?」と不安になって調べ直してしまうほど簡単に作れてしまいました。

 

「 Windows アプリ ペイント 」もあったなあ・・・・と後から思い出したのですが、より簡単に作成することが出来ました。

 

 

 

 

バナー工房 でサイトアイコンを作る

 

 

 

「 バナー工房 」で使うツール

 

  • 文字入れ
  • 合成
  • 拡大縮小

 

「3文字」にしてみたり「ハート型」にしてみたりしてみましたが、

 

 

 

 

最終的にこれに落ち着きました。やっぱりシンプルなのが一番目立ちますね。

 

 

 

バナー工房 に「サイトアイコン」の背景用の画像をアップロード。

 

私が使っているWordpress のテーマ「 Elephant 」でのサイトアイコンのサイズが「 512 ✖ 512 ピクセル以上の正方形 」となっています。

 

 

テーマによって、こういうものが手軽に出来てしまったり、設定が簡便になっているとかあるのかもしれませんね。

 

WordPress の設定は超苦手なのでよく分かりませんが。

 

 

 

画像はどうにでも料理出来るので、どんな大きさでも色でも本当は全然 OK。

 

「画像を選択する」をクリック。

 

 

 

「画像を加工する」をクリック。

 

 

 

 

バナー工房で作れる文字の大きさは200×200px が限度。

 

 

 

 

 

余白を作らず枠にピッタリ収めるために 、画像のサイズは300×300にしておきました。

 

 

 

 

サイズを調整するので「拡大縮小」をクリック。

 

 

 

縦横の数値を入力したら「サイズを変更する」をクリック。

 

 

デザインはシンプルな方が良さげだったので「文字入れ」を使ってみました。

 

 

 

 

「大きさ」「書体」「文字色」を設定。。。

 

書体が選べるのがイイネ!

 

 

300px × 300px の背景画像に 200px × 200px の「 文字乗せ 」してみた。

 

 

 

 

もう一度「拡大縮小」を使って、今度は「拡大」して出来上がりです。

 

 

 

Windows アプリ の ペイントでサイトアイコンを作る

 

 

「 バナー工房 」でやっていることと要は同じですね。

 

  1. キャンバスに文字を挿入
  2. 切り取り
  3. 拡大

 

 

たったこれだけ。

 

 

 

 

「 選択 」をクリックしてマウスのドラッグで切り取り範囲を決定します。

 

 

 

 

「 切り取り 」完了。

 

 

 

 

リサイズします。

 

単位をピクセルに変更。縦横比固定 のチェックを適宜外したりする。

 

 

 

 

 

Windows アプリ ペイント製の新しいサイトアイコン

 

 

バナー工房製の旧アイコン

 

サイトアイコンは小さいものなので、なんとなくただの「点  」に見えてしまい、 いつも気になっていました。

 

 

 

 

 

「外観」➞「カスタマイズ」で設定

 

 

こうして出来た画像を「ファビコン」にします。

 

WordPressのダッシュボードの画面「外観」➞「カスタマイズ」から入ります。

 

「サイト基本情報」をクリック。

 

「サイトアイコン」の項目で「画像の変更」をクリック。

 

 

画像をアップロードして更新だかOKだかをクリックして完成です。

 

 

 

 

 

 

 

かなり見やすくなった気がします ♪

 

設定後 iPad での反映がすぐには反映されなかったのですが パソコン の方では10分後には更新されてました。

 

iPad でみるにしてもブラウザを変えるとどうか?と思いましたが関係なかったです。

 

もしかして「キャッシュがどうのこうの 」関係 が原因?

 

そのうち変わるでしょうけど。

 

追記 : 翌日にはiPadの方でも反映されていました。

 

単純だけど結構目立ってると思いませんか?

 

 

 

自分のサイトをスタート画面などに設置してみた。

 

ちゃんとサイトアイコンとして自分のサイトが表示されるのか、スタート画面などに設置してみました。

 

ココ(は何という場所?)に表示されましたので、スタートにもピン留めしてみました。

 

 

スタート画面にも表示されました。

  

 

 

 

 

 

 

画像をアップするだけで良いと ちゃんと書いてあるのに、本当にこんなので良いのか!?と思ったので検証。

 

 

 

 

コメント

タイトルとURLをコピーしました