こんにちは、ゆんつです。
ブラウザを使ってネットを閲覧していると、タブ左側の部分にそのサイト独特のシンボルマークが表示されます。
そのサイトをブックマークした時にも、お気に入り一覧に表示されたサイト名の左側にシンボルマークが表示されます。
これを「Favorite Icon」略してfaviconと言います。
faviconはサイトによって千差万別で
例えばYoutubeなら再生ボタン
ヤフーならアルファベットの「Y」にビックリマークと何となくそのサイトがわかるようなデザインになっています。
見慣れてくるとサイトの名前がなくても、faviconを見ただけでどのサイトか解ります。
このブログのfaviconはブログテーマとして使わせてもらっているCocoonの初期設定のfaviconです。
シンプルでいいですが、どうせブログをやっているなら世界で1つだけの自分のアイコンを使ってみたいです。
ということで今日はGIMPを使ってfaviconを作り、Cocoonを使ってブログに設定してみたいと思います。
Cocoonならとても簡単
faviconの作成について調べると「ブラウザの種類によって対応しているサイズが違うので16px×16pxと32px×32pxのアイコンを画像編集ソフトで作成して、それをさらにマルチアイコンにして・・・」みたいな説明が沢山出てきます。
僕も実際途中までそういう説明通りにやっていましたが、実はCocoonならとても簡単にfaviconが設定できるのです。
方法は
512px×512px以上の画像を用意して、その画像をサイトアイコンとして指定するだけ
実際にやってみます
Cocoonでfaviconを設定する
手順1. 画像を用意する
512px × 512px以上の大きさの画像を用意します。
別に正方形でなくても後からちゃんと正方形に切り取れるようになっているので、大きさが512px × 512px以上で好きな画像を用意しましょう。
僕はGIMPでちょうど512px × 512pxの大きさのこんな画像を作成しました。
イメージキャラクターのブタの顔のドアップです。
faviconを作る場合、拡張子を「.ico」で保存するということが良く言われますが、Cocoonの場合は画像形式であれば何でもいいようです。
faviconはサイズが小さいため細かいデザインよりも、シンプルなものがいいと思います。
まあ僕は難しいデザインのものが作れないだけなんですが(笑)
手順2. サイトアイコンに指定する
WordPressのダッシュボードから「外観」→「カスタマイズ」をクリック。
カスタマイズの画面で「サイト基本情報」をクリック。
サイト基本情報の画面で「画像を選択」をクリック。
「画像を選択の画面」にfaviconにしたい画像を直接ドラッグ&ドロップするとアップロードされるので、その画像にチェックマークが入ってるのを確認して「選択ボタン」をクリック。
画像サイズが512px×512pxを超える場合は「画像の切り抜き画面」に変遷します。
画像切り取り用の正方形の枠が用意されているので、マウスでこの枠の大きさを変えたり移動させて自分の好きな部分を切り取ってfaviconにすることができます。
四角い枠で切り抜きたい箇所を指定したら「画像切り抜き」をクリックします。
すると切り抜いた箇所がfaviconになります。
画像サイズが512px×512pxちょうどなら、その画像がそのままfaviconに設定されます。
最後に「公開」をクリックして完了です。
確認してみよう
ブラウザで僕のサイトを開いてみるとタブには
憧れのfaviconが！！
before
after
そしてブックマークするとブックマークツールバーにもブタがいます。
やったやった！！
世界で1つだけのfaviconだ！！
これで、より一層自分のブログへの愛着が深まった気がします。
faviconをオリジナルの物にすることは他のブログと手軽に差別化できる1つの方法だと思います。
Cocoonなら手間もかからないので、まだfaviconの設定をしていない場合は、自分の好きな画像やイラストをfaviconにしてみてはいかがでしょうか？
いつかfaviconを見ただけでこのサイトだと解ってもらえるようになったら嬉しいですね。
それでは、またですー。
コメント