広告 WordPress

【WordPress】超簡単な『favicon』と『ウェブクリップアイコン』の設定まとめ

Favicon webclipicon setting

こんにちは、@dearwalker_yuyaです。

ブログやサイトを作ったら必須とも言える『favicon(ファビコン)』と『ウェブクリップアイコン』の設定をWordPressで超簡単に出来るようにまとめてみました。

WordPressのプラグインありとプラグインなしの両方をご紹介してみるので良かったら参考にしてみて下さい。

プラグインで無しで『favicon』を設定

favicon画像をico形式でマルチアイコン化

▶ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます

こちらのサイトではとても簡単にマルチアイコン化することが出来ます。

png形式の画像を1つ用意して16px × 16px・32px × 32px・48px × 48pxとそれぞれ作成したいサイズに画像ファイルを選択すれば『ico形式』の1つのマルチアイコンを吐き出してくれます。

faviconを設置するコードを記述

ico形式のfaviconをFTPなどでアップロードします。そしてhead内にこのコードを記述すれば完了です。

<link rel="shortcut icon" href="アイコンのURI" />

favicon画像が無くても簡単に作れる

favicon.icoをジェネレータ

こちらのジェネレーターを使えばPhotoshopなどのツールを使わなくてもfavicon用の画像を作成することが出来ます。ドットを塗って作っていくだけなのでオススメです。

参考: favicon.ico(ファビコン)の作り方 | IDEA*IDEA

プラグイン無しで『ウェブクリップアイコン』を設定

favicon-webclipicon-setting

『ウェブクリップアイコン(apple-touch-icon)』はホーム画面でよく見かけるこのアイコンですね。

iPhoneのSafariなどブラウザからホームやブックマークした時に表示されるものなのでぜひ設定しておきたい所。

『ウェブクリップアイコン』の設定

画像サイズは144px × 144px以上の正方形を用意します。

favicon-webclipicon-setting

画像をアップロードし、faviconと同じくhead内に下記コードを記述すれば設置完了です。

<link rel="apple-touch-icon-precomposed" href="アイコンのURI" />

favicon・ウェブクリップアイコン共に変更されないという場合はキャッシュをクリアしてみてくださいね。

プラグインで超簡単に設定する

『Favicon by RealFaviconGenerator』

favicon-webclipicon-setting

Favicon by RealFaviconGenerator

WordPressプラグインで簡単に設定する方法もあります。使用するのは『Favicon by RealFaviconGenerator』。

このブラグインの利点としては1つ画像を用意するだけで『favicon』・iPhone/Android用の『ウェブクリップアイコン』・Windows8『スタート画面アイコン』まで対応してくれる所。

プラグインの設定

プラグインを有効化した後は画像の設定をします。WordPressの『設定』→『favicon』より画像をアップロードします。 画像サイズは複数に対応するために260 × 260 ピクセル以上を推奨されます。

favicon-webclipicon-setting

画像をアップロードした後は各OSでのプレビューや細かな設定をチェックが可能。基本的には何も触らなくともOKです。

favicon-webclipicon-setting
favicon-webclipicon-setting

一度目を通してから設定出来るのは嬉しい機能。
さらに設定最下部にあるでは必要に応じてアイコン画像の圧縮が出来るのでお好みに合わせて使ってみてください。

favicon-webclipicon-setting

設定が完了したら『Generate you Favicons and HTML code(ファビコンを自動生成する)』で終了です。

まとめ

favicon-webclipicon-setting

新しくロゴを作ったので今回はプラグインを使って設定してみました。

画像1つだけで複数自動生成してくれるのは何気便利ですね。faviconの設定にプラグイン使ったからといって特にサイトが重たくなるなんて感じることもないので気軽に使ってみてはいかがでしょうか。

楽ちんですよー。

あわせて読みたい

-WordPress
-