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は角丸になる!

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

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

この記事を書いた人

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

趣味はレトロゲーム収集、音楽鑑賞、ゲーム音楽、eスポーツ観戦。
埼玉県川越市のゆるキャラ「ときも」を勝手に応援している。

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

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

【最近好きなゲーム】
UNDERTALE、デルタルーン、ゼルダの伝説BOTW

【好きな漫画・アニメ】
攻殻機動隊・ジョジョの奇妙な冒険・おそ松さん・進撃の巨人・SHIROBAKO・羽海野チカ作品・吉田秋生作品・手塚治虫作品などなど

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA