WordPress AFFINGER

【AFFINGER4】ファビコン作成・表示・設定方法

更新日:

 

ファビコンとは、ブラウザの上(最近ではタブ)に表示されるアイコンのこと。

 

ささいな物だとは思うが、読者に自分のサイトをどんな形であろうと

覚えて貰う際、ファビコンの有る無しでは意外と違ってきます。

 

思い返してみると、自分自身でも有名なブログやサイトは、サイト名よりも

のコンセプトカラーやロゴで覚えている節があるので無視できない要素だと思う。

 

今回は、縁あって使用しているSEOに特化したWordPressのテーマ

「AFFINGER4」のファビコンを設定するための覚書となります。

 

スポンサーリンク

AdSense_336px

 

ファビコンの画像

ファビコンと言っても、ようはアイコンでありただの画像だ。

但し、サイズと拡張子(.ico)がちょっと違います。

 

画像サイズは基本的には正方形であり、下記が推奨値となる。

16x16px IE向け
32x32px 他のブラウザ向け
48x48 Windows向け
152x152px iOS・Android向け

 

尚、AFFINGER4での16x16px32x32pxが推奨されている。

かつ、apple-touch-iconは152px以上が推奨値となっている。

 

使用する画像はブログに関連するものであるのが当然として、

サイトのロゴマークなどを流用することでよりブログの宣伝にもなると思われる。

※画像のライセンス・著作権には注意。

 

ファビコンの作成

Photoshopなどの画像編集ツールを持っていて、使いこなせている人なら

それを使って自作してもいいですが、もっと手っ取り早い方法として

マルチアイコン生成ウェブアプリ」(Webサイト)を利用する方法。

 

ここで作成すれば、複数のサイズのアイコンを一括で取得出来る。

操作は簡単。変換する画像を下記部分にドラック&ドロップ。

または点線枠部分をクリックすれば、アップロードする画像を選択出来る。

favicon_set_1.JPG

 

 

サイズは『生成オプション選択』から選択可能。

favicon_set_2.JPG

 

私は自分のブログのタイトル横のロゴを切り抜いて作成します。

変換した画像はZipファイルでダウンロードできます。

とりあえず、私が今回準備したのは「32x32」と「256x256」の2つ。

圧縮ファイルを解凍すると『tmp』というフォルダに指定したサイズのアイコン画像が入っています。

favicon_set_3.JPG

 

ファビコンの設定(AFFINGER4の場合)

通常では、プラグイン「RealFaviconGenerator」等を使って設定しますが、

AFFINGER4の場合、テーマの機能としてアイコン・ファビコン設定が可能です。

 

設定方法も簡単です。

ダッシュボードの「AFFINGER4設定」→「その他の設定」の『アイコン・ファビコン設定』にて設定可能。

 

「アップロード」ボタンを押して設定する画像をアップロード。

アップロードした画像を選択し「save」をして設定は完了です。

favicon_set_4.JPG

 

注意:ファビコンが上手く表示されない場合もある。

ブラウザや各デバイスによってファビコンが上手く表示されない場合があります。

ブラウザ・デバイス依存の問題が殆どらしく、とりあえず自分が確認出来る環境で、上手く表示できているかどうか確認して下さい。

対処としてはサイズを変更するなど色々ありますが、まずはブラウザのキャッシュを消してから再度確認して見て下さい。

 

まとめ

favicon_set_5.png

 

私の場合はかな~り地味ですが、

テーマカラーが鮮やかなサイト程、目を引き、引き立つものだと思います。

 

おしゃれなブログへの第一歩って感じですかね。

 

それにして、AFFINGE4は設定項目が豊富で便利です。

熟練ブロガーよりも初心者ブロガーにこそ進化を発揮するテーマな気がします。

まぁ、ソレを使いこなすにはまだまだ勉強が必要そうですが。

稼ぐサイトの設計図-AFFINGER4公式ガイド

 

AdSense_336px

AdSense_336px

-WordPress, AFFINGER
-, , ,

Copyright© My,WebNote - 備忘録 - , 2017 AllRights Reserved