【サイト見栄えが変わる 】wordpressのfaviconの簡単な作成設定の方法(プラグイン+skitch)

      2015/11/23

favicon説明

favicon説明

◎faviconとは

google chrome やFireFoxのタブの左横のアイコンがfavicon(ファビコン)です。

 

WEBサイトを見ていると、そのサイトにマッチするアイコンが出てきますよね。

 

ちょっとした工夫ですが、これがあるだけで全然サイトの見栄えが違いますよね。

 

faviconは、ブックマークツールバーにもこのアイコンが表示されるので、たくさんサイトを見る人であればあるほど、

ブックマークだらけになるので、このfaviconさんを目印にブックマークからクリックする方も多いのではないでしょうか?

 

ちなみに僕はかなりwebsiteを見る方なのでブックマーク数が非常に多いのです。

 

ブックマークの文字が出ているとなんか鬱陶しくて。。。

 

作成や設置の方法は簡単です。

 

 

 

◯faviconの作成方法

 

1・skitchの旧バージョンをダウンロードする

skitch旧バージョン

skitchダウンロード説明

 

 

 

2・skitchを起動でしてfaviconにしたい文字をちょっとかっこいい文字でskitchで記載する。

①書式パレットを開く

②書式をお好みの書式を選択(フォントサイズを64ぐらいにしとくといいです。)

③サイトの「a」をクリックして文字入力にする。

④キャンパスをクリックして文字を入力する。

⑤下線を引いたら少しおしゃれかも

⑥デスクトップにドラック&ドロップして保存。

 

 

 

一般的にはご自身のサイトの頭文字とか、象徴したい文字を書く方がサイトを閲覧した方の記憶に残りやすいと思います。

 

macであればfontfamily(書体)をAmerican Typewriterにするとちょっとcoolな感じのfaviconが出来上がります。

 

色はサイトのカラーを選ぶのがgooです。

 

 

スクリーンショット_2015-05-30_17_38_27

 

ちなみにご存知の方も多いと思いますが旧版ではないですが、skitchはiphoneやipadでも使えますよ。

iphoneダウンロード

https://itunes.apple.com/jp/app/skitch-cuoru-miaoki-rumu-gong/id490505997?mt=8

 

skitckの使い方

 

https://evernote.com/intl/jp/skitch/guide/mac/

https://evernote.com/intl/jp/skitch/guide/ios/

 

 

3・プラグインの導入

 

①wordpressの管理画面からプラグインを選択し「新規追加」クリック

① 

 

 

②検索窓に「favicon rotator」検索する。

 

②

 

 

④「favicon rotator」をプラグインに追加して有効化する。

8

 

 

 

⑤外観にfaviconが追加されているのでそこをクリックします。

③

 

 

⑥「Add Icon」をクリックする。

④

 

 

⑦先ほど作成したアイコンをデスクトップからアップロードして変更を保存すれな完了です。

⑤

 

 

 

サイトはfaviconがあるだけで全然違いますね。

あとネットのヘビーユーザーさんからは非常に分かり安くてたすかると思います。

 

 

 - IT・テクノロジー , , , , , , , , , , ,