WordPressのサイトアイコン(ファビコン)をする

WordPress

WordPressのサイトアイコン(ファビコン)を自作する方法をまとめました。

サイトアイコン(ファビコン)とは?

ホームページのアイコンです。具体的には、下図のように赤枠に囲まれているアイコンです。

一般的には、ファビコン(favicon:Favorite Iconの略)と呼ばれていますが、WordPressではサイトアイコンと呼ばれています。これ以降は単に「アイコン」と呼びます。

アイコンの作り方

本サイトのアイコンは、Power Pointを使って作成したので、その方法を紹介します。

枠の作成

WordPressのアイコンは、512×512以上のPNGが、推奨されています。Power Pointでは、8.74cm×8.74cmのサイズが上記サイズになるので、目安の枠を作成します。大きい分には、Wordpressに読み込み時に調整されるので、厳密に調整する必要はありません。

サイズ調整後は、色は透明にしておく事をお勧めします。(丸いアイコンにしたくても背景に色がついていると四角のアイコンになってしまいます。)

アイコンを作成する

お好みのアイコンを作成します。本サイトのアイコンは、以下のように作成しました。

  1. 挿入→図形→基本図形→ブローチ
  2. 挿入→図形→基本図形→テキストボックス
    ↓の設定をテキストボックスにするとサイズを自由に設定することができます
    図形の書式設定→文字のオプション→テキストボックス→自動調整なし
  3. 図形の書式設定→オブジェクトの配置→左右中央揃え/上下中央揃え

各々のパーツを作った後、3番目の方法で配置調整することで、上下左右キレイに揃える事ができます。

PNGファイルで保存する

最後にPNGファイルで保存して完成です
・全パーツを選択→コピー → 形式を指定して貼り付け→図(PNG)
作り方によっては1で設定したサイズを超えている場合があるので、トリミング機能を使ってサイズを調整します

WordPressに設定する

下記から設定することができます
・外観→カスタマイズ→サイトの基本情報→サイトアイコン

まとめ

ここでは、WordPressでサイトアイコン(ファイビコン)の作成方法~設定方法までを紹介しました。
やってみると簡単に作れますし、自分のサイトにより愛着がわくと思いますので、是非試してみてください!

WordPress
スポンサーリンク
この記事を書いた人

運営者について

当サイトは、個人が運営する学習・記録ブログです。

AI・データサイエンス・自動化を中心に、
Python、G検定・DS検定の学習内容や、
実際に試しながら整理した知識をまとめています。

特定の企業や団体に属さない個人サイトとして、
学習過程で得た気づきや判断の整理を目的に運営しています。

「知識はあるが、どう使えばよいか分からない」
「情報が多く、判断に迷ってしまう」
といった状態を減らすことを目的に発信しています。

専門家として教える立場ではなく、
自分自身がつまずき、試し、整理してきた過程をそのまま共有するスタイルです。

用語の暗記やテクニックの紹介よりも、
・なぜそう考えるのか
・どの順番で判断するのか
・どこで迷いやすいのか
といった思考の整理を重視しています。

学び場をフォローする
学び場をフォローする
タイトルとURLをコピーしました