僕が「単純作業で月5万円稼げるようになった方法」公開中! ⇒詳しくはこちら

【WordPress】ファビコンを設定する手順を1から解説|画像用意から設定まで

サイトのファビコンってどうやって設定するんだろ?パソコンに慣れてないから分からないよ

僕がファビコンを設定した流れを、最初から最後まで紹介するよ!

こんにちは、むろす(@murosu)です。

ファビコンは、設定自体は簡単ですが、「画像はどんなサイズ?」「どこから設定するの?」と疑問は多いはず。

ここでは、僕が実際にサイトにファビコンを設定した方法を、画像用意からすべて紹介します。
スクショ付きで解説するので、同じようにやれば誰でもできるはずです。

設定の流れはこちらです。

  1. 画像を選ぶ
  2. 画像を編集する
  3. WordPress管理画面からファビコンを設定する

順番に説明しますね。

手順1.画像を選ぶ

まずは、ファビコンに使う画像を用意します。

画像の推奨サイズと形

512×512px以上の正方形で作ってください。
これがWordPressが推奨しているサイズと形です。

WordPressのファビコン設定画面の記載

「ファビコンに使うには大きすぎるのでは?」と思うかもしれません。

実は、WordPressの管理画面から設定した場合は、ブラウザのファビコンだけでなく、PCやスマホ、タブレットのいろいろな所に使用されるのです。

例えば、Windows10のスタートメニューのパネルや、スマホのホーム画面にページを追加したときに使われます。
下記のサイトさんで詳しく書いてあるので、興味のある方はご覧ください。

サイトアイコン(favicon)をWordPress標準機能で設定する - デフよん
 WordPress4.3以降でサイトアイコン(ファビコン)が標準機能で設定できるようになっていたので、ここのサイトのサイトアイコンを新たに設定しました。WP4.3未満のときは、前に記事にしましたプラグイン「Favico … "サイトアイコン(favicon)をWordPress標準機能で設定する" の続きを読む

画像を選ぶコツ

ファビコンに使う画像は、自分のサイトを端的に表したシンボルとなる画像が良いでしょう。
検索した人が、一目でサイトを見分けられるようになっているのが理想です。

例えば下記の3つがおすすめです。

  1. オリジナルのイラストやキャラクターアイコン
  2. フリー素材のアイコン
  3. サイト名をそのまま or 一文字とって載せる

それぞれ簡単に説明しますね。

1.オリジナルのイラストやキャラクターアイコン

いつも使っているイラストやキャラクターがあるなら、そのままファビコンにも使って良いでしょう。

僕の場合は、TwitterやLINEで常用しているキャラクターがあるので、それを利用しました。

ファビコンに使っているキャラクターアイコン

自分の象徴となるイラストやキャラクターを持っていると、SNSやブログ、その他プロフィール画像に使えるので何かと便利です。
持っていない方は、この期に作るのも良いかもしれません。

ココナラというサイトなら、1枚3,000円ほどから描いてもらえるのでおすすめです。
僕がキャラクターを作ったときの話を参考に載せておきますね。

2.フリー素材のアイコン

無料でアイコンを配布しているサイトから選ぶのも良いです。

僕が良く使っているサイトはこちらです。

アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

サイズは512pxにしてください。
ファイル形式は「.PNG」もしくは「.JPG」が良いでしょう。

3.サイト名をそのまま or 一文字とって載せる

サイト名をファビコンに入れるのもアリです。

例えば、NHKオンラインのファビコンがそうですね。

NHKのファビコン

サイト名が3~6文字と短いならそのまま使えます。
文字が多すぎると、細々として読みにくいので避けましょう。

ただ、サイト名の1文字だけを使うという手もあります。
寝ログさんなどがそうです。

寝ログさんのファビコン

画像の作り方は後述します。

手順2.画像を編集する

画像のサイズを調整したり、サイト名アイコンを作る方法を解説します。
512×512pxの画像が用意できた人は読み飛ばしてOKです。(>>手順3に移動する

ここでは、下記3つの編集について説明します。
やりたい項目をクリックしてください。

画像を小さくする

画像が512pxより大きい場合は、縮小する必要があります。

こちらのツールを使います。

画像を縮小する!
Webブラウザで簡単に写真やイラストの縮小ができます。回転や反転、白黒変換も可能です。無料でお使いいただけます。
画像を小さくする手順
  • ステップ1
    「ファイルを選択」をクリックします
  • ステップ2
    画像をクリックし、「開く」をクリックします。
  • ステップ3
    「縮小する!!」をクリックします。
  • ステップ4
    「Download」をクリックします。これで、縮小された画像が手に入りました。

    画像の縮小方法は以上です。
    次の手順に進みましょう。
    >>WordPress管理画面からファビコンを設定する

画像を大きくする

画像が512pxより小さい場合は、拡大する必要があります。

こちらのツールを使います。

画像リサイズ(高画質・縮小・拡大・変換)|Web便利ツール@ツールタロウ
画像を高画質で拡大・縮小でき、画像形式も変換可能なWebツール。PC・スマートフォン・タブレットのブラウザで使えます。常時SSL対応。

画像を拡大すると、画質が低くなります。なるべく拡大はせず、元から大きいサイズの画像を使うようにしてください。

画像を大きくする手順
  • ステップ1
    「ファイルを選択」をクリックします。
  • ステップ2
    画像をクリックして、「開く」をクリックします。
  • ステップ3
    幅に「512」と入力し、「リサイズ」をクリックします。
  • ステップ4
    画像が拡大されます。右クリック→「名前を付けて画像を保存」で保存してください。

    画像の拡大方法は以上です。
    次の手順に進みましょう。
    >>WordPress管理画面からファビコンを設定する

サイト名アイコンを作る

今回は、『Fotor』という、無料の画像編集サービスを利用します。
画像編集ソフトを持っている方は、そちらを使ってもOKです。

画像加工・写真編集|Fotor - 無料オンラインサービス
簡単に可愛く、かっこ良く写真加工ができる無料の画像加工サイト:リサイズ、モノクロ、モザイク、コラージュ、ワンタッチ加工・文字入れ・スタンプ・エフェクト・ぼかし・フレーム。写真編集に必要な機能はなんでも入ってる!登録しなくても無料で使えるアイテムがいっぱい。

利用には登録が必要です。
先に会員登録し、ログインしておいてください。

サイト名アイコンを作る手順
  • ステップ1
    「デザインを作成」をクリックします。
  • ステップ2
    「カスタム」をクリックします。
  • ステップ3
    サイズに「512」と入力し、「変更する」をクリックします。
  • ステップ4
    サイドメニューの「テキスト」をクリックし、「タイトル」をクリックします。
  • ステップ5
    サイト名を入力します。
  • ステップ6
    上のメニューバーで、色やフォント、サイズを変えます。
    できたら右上の「保存」をクリックします。

    ちなみに上の画像の設定は、フォント「ラノベPOP」、サイズ「200」です。

  • ステップ7
    ファイル名を入力し、ファイル形式を「.jpg」にして「ダウンロード」をクリックします。

    これでアイコンが作れました。

手順3.WordPress管理画面からファビコンを設定する

画像が用意できたら、次は設定していきましょう。
WordPressの管理画面を開いてください。

ファビコンの設定手順
  • ステップ1
    「外観」→「カスタマイズ」をクリックします。
  • ステップ2
    「サイト基本情報」をクリックします。
  • ステップ3
    「サイトアイコンを選択」をクリックします。
  • ステップ4
    「ファイルをアップロード」をクリックし、「ファイルを選択」をクリックします。
  • ステップ5
    画像をクリックし、「開く」をクリックします。
  • ステップ6
    画像がアップロードされます。
    アップロードされた画像にチェックが入っていることを確認し、「選択」をクリックします。

  • ステップ7
    「公開」をクリックします。

    以上で、ファビコンの設定は完了です。
    お疲れさまでした。

コメント

タイトルとURLをコピーしました