今回は、サイトに設定するファビコンをPhotoshopで作っていきます。
ファビコンはとても簡単につくれてオリジナルサイトに必須のものなので、ぜひ一緒に作っていきましょう。
(すでにロゴがあり編集が必要ない場合は、512pxの正方形に整えてワードプレスにアップするだけです。)
新規作成
512 × 512 px のキャバスを新規作成します。
「カンバスカラー」の部分はファビコンの背景色になります。
任意の色か、白もしくは透明にしておきます。
ここでは、ひとまず白にしておきます。
この部分の設定は、後からでも変更できます。
（キャンバスの背景を変更する）
右下 
アイコンから新規レイヤーを追加
ロゴがある場合
ロゴを中央に配置します。
キャンバスの背景を変更する
キャンバスの周りをクリックすると、右側のパネルにプロパティが表示されます。
プロパティパネルがない場合
プロパティが出ない場合は、上メニューのウィンドウからプロパティにチェックを入れてください。
「塗り」 はファビコンの背景色になります。
背景透過したい場合は透明を、それ以外の場合は任意の色を選択しましょう。
透明を選択すると、背景に設定されていたレイヤーが透明になりました。
ファビコンの背景を透明にしたいのに、ロゴ自体の背景透過処理がされていない場合は、こちらの記事を参考にしてください。
ファビコンが完成したら、書き出しを行います。
ロゴがない場合
ファビコンに使用するロゴがない場合は、このように→ 
文字 + 図形で簡単に作ることができます。
先ほどと同じように、正方形のキャンバスを用意し、レイヤーを追加します。
左アイコンの楕円形ツールなどを使用します。
ここでは正円の背景を入れます。
必要に応じて色を変更します。
＊左側図形ツールを選択時に「塗り」を変更できます。
図形を中央に配置します。
この図形のレイヤーを選択している状態で、
マークを押し、位置を固定しておきます。
（レイヤーの右端に鍵のマークがでたらOK）
次に文字を入れるので、さらに新しくレイヤーを追加します。
右側の「横書き文字ツール」で任意の文字を書きます。
ファビコン（アイコン）なので、1~2文字が見やすいです。
文字を追加したら、右側のプロパティーからフォントを選択し、文字の大きさや色を変更します。
いろんなパターンを試してみましょう。
パソコンで見るとかなり小さいアイコンなので、コントラストをはっきりさせると目立ちやすいです。
完成したら、書き出しを行います。
書き出し
上部メニューの「ファイル」→「書き出し」→「書き出し形式」を選択。
背景透過の場合は「PNG」形式で、
「透明部分」にチェックをいれます。
書き出しできたら、「ファビコンを設置する」を参考にしてください。
投稿者プロフィール
- 2004年頃の会社員時代からブログ作成を始める。ブログ作成が楽しくなり、そのまま趣味が高じて2006年にホームページ制作で起業、2008年に株式会社ウェブロードを設立。現在は、個人・中小事業者のWordPressサイト制作・改善を中心に、Web業界20年の知識と経験を生かして、自治体案件等の大型案件のWebディレクターや中小企業・個人事業主へのWeb全般のアドバイザー、SEO/AIOのコンサルタントとしても活動中。 プロフィールはこちら
最新の投稿
お知らせ2026年4月22日WordPress保守の委託先を選び直すときに確認したい7つのポイント- ホームページ制作2026年4月20日制作重視のサイトが抱える問題「5～10年後の運営」を見据えた発注基準とは？
- メルマガバックナンバー2026年4月15日”固定ページ”を見直すだけでお問い合わせが増える理由
- サイト運営ノウハウ2026年4月11日別サーバーで運営しているサイトをサブドメインで表示させる方法
お問合せフォームはこちら
弊社サービスをご検討いただきありがとうございます。
こちらのカテゴリ内のご質問と回答で解決できない場合は、ぜひ下記フォームよりお問い合わせください。ご相談・お見積りのご依頼は無料です。
お申込前のお打ち合わせはメール/お電話/GoogleMeet等オンラインでもご対応可能です。全国からお問い合わせを受付けています。
翌営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。
