すいラボ

電子部品×アクセサリーユニット「すいラボ」つれづれブログ

WordPressサイトにファビコンとウェブクリップアイコンを設定する!

time 2016/07/13

WordPressサイトにファビコンとウェブクリップアイコンを設定する!

こんにちは。もちきんです。

前回の記事で、ファビコンを設定するにあたり、脱線しまくって様々なゲーム会社のファビコンをご紹介しました。

気を取り直して今回は、実際にファビコンを制作、設定してみたいと思います。

本サイトはWordpressを利用して制作しているので、Wordpressでの設定方法となります。ご了承ください。

ファビコンって何?って方は、前回の記事をご覧ください。

ファビコンのことを考えてたら、いつのまにかゲーム会社のファビコンをひたすら調べていた。

設定する場所はここだ!

(PC)ブラウザのタブ部分に出てくる画像

これがファビコン

これがファビコン

(スマホ)ホーム画面やお気に入りに設定すると出てくる画像

こちらはウェブクリップアイコンといいます。

こんなやつね

こんなやつね

現在、どちらも未設定の画像ですが、設定してないと超ダサいんです。

こんなはずじゃなかった、って感じなんです(自分的に)。

(じゃぁ早くやれよ、って話ですが)

画像を準備しましょう

画像を準備します。
ファビコンは16×16pixelが一般的ですが、ウェブクリップアイコンはスマホやタブレットのサイズによって違いがあるのは皆さんお気づきかと思います。
さらに、ファビコンは一般的に[.ico]という拡張子のファイルでないと設定できず、対してウェブクリップアイコンは[.png]ファイルが一般的です。

同じ画像データにする場合、いくつもつくるの面倒じゃね?

と思ってしまいました、わたし。

そんな時はWordpress側で自動変更してくれるプラグインがあるのこと!

『Favicon by RealFaviconGenerator』

一番大きいサイズ(260px×260px)を準備しておけばファビコン用に変換したり、各端末ごとにリサイズしてくれるということなので(便利!)、
何も考えずに260×260pixelのPNGファイルを作成しました。

20160713_001

WordPressに設定する(プラグイン使用)

作成したファビコンをWordpress内に設定します!

まずはプラグインをインストールします。

『Favicon by RealFaviconGenerator』

1.プラグイン > 新規追加 より
「Favicon by RealFaviconGenerator」を検索し、「今すぐインストール」をクリック
20160713_01

2.「プラグインを有効化」をクリック。これでプラグインがインストールされました。
20160713_02

3. 左メニュー 設定 > Favicon より
Appearance > Favicon をクリック
20160713_03

4.①ファイルを選択し、②Generate faviconをクリック。
20160713_04

5.iOSやAndoroidなど端末によって見え方が違ってくるファビコンやウェブクリップの設定をそれぞれ決めることができます。最後まで設定したら「生成」をクリックでWordpressに戻ります。

20160713_02

6. これで設定は完了!

ファビコンが設定された!

ファビコンが設定された!

ウェブクリップも!iOSは角丸になる!

ウェブクリップも!iOSは角丸になる!

ひとつのファイルをアップするだけで最適化してくれるプラグインはとても便利ですね。

サイトに愛着がわくので、独自サイトを持っている方は是非設定してみてくださいね。

この記事を書いた人

もちきん
もちきんTwitter:@suilab_mochi
電子部品アクセサリーユニット「すいラボ」の中の人。

夫婦の趣味はレトロゲーム収集、ゲーム音楽鑑賞、eスポーツ観戦。
デザフェスが終わったら積みゲー消化します。
デルタルーン早くやりたい!

埼玉県川越市のゆるキャラ「ときも」を勝手に応援している。


【好きな食べ物】さやいんげん、海老、ビール

【好きなレトロゲーム】
ワギャンランド、おぼっちゃまくん、がんばれゴエモン外伝2~天下の財宝~、FCドラゴンボールZ外伝 サイヤ人絶滅計画、
MOTHER2、スーパーマリオワールド、カービィボウル、クロノトリガー

down

コメントする




CAPTCHA


書いてる人たち

(夫)けん(妻)もちきん

(夫)けん(妻)もちきん

電子工作・レトロゲーム・DIYが趣味の夫婦。夫の趣味である電子工作の部品をヒントに妻はアクセサリー製作を開始しました。 [詳細]