今回は、サイトに設定するファビコンをPhotoshopで作っていきます。
ファビコンはとても簡単につくれてオリジナルサイトに必須のものなので、ぜひ一緒に作っていきましょう。
(すでにロゴがあり編集が必要ない場合は、512pxの正方形に整えてワードプレスにアップするだけです。)
新規作成
512 × 512 px のキャバスを新規作成します。
「カンバスカラー」の部分はファビコンの背景色になります。
任意の色か、白もしくは透明にしておきます。
ここでは、ひとまず白にしておきます。
この部分の設定は、後からでも変更できます。
（キャンバスの背景を変更する）
右下 
アイコンから新規レイヤーを追加
ロゴがある場合
ロゴを中央に配置します。
キャンバスの背景を変更する
キャンバスの周りをクリックすると、右側のパネルにプロパティが表示されます。
プロパティパネルがない場合
プロパティが出ない場合は、上メニューのウィンドウからプロパティにチェックを入れてください。
「塗り」 はファビコンの背景色になります。
背景透過したい場合は透明を、それ以外の場合は任意の色を選択しましょう。
透明を選択すると、背景に設定されていたレイヤーが透明になりました。
ファビコンの背景を透明にしたいのに、ロゴ自体の背景透過処理がされていない場合は、こちらの記事を参考にしてください。
ファビコンが完成したら、書き出しを行います。
ロゴがない場合
ファビコンに使用するロゴがない場合は、このように→ 
文字 + 図形で簡単に作ることができます。
先ほどと同じように、正方形のキャンバスを用意し、レイヤーを追加します。
左アイコンの楕円形ツールなどを使用します。
ここでは正円の背景を入れます。
必要に応じて色を変更します。
＊左側図形ツールを選択時に「塗り」を変更できます。
図形を中央に配置します。
この図形のレイヤーを選択している状態で、
マークを押し、位置を固定しておきます。
（レイヤーの右端に鍵のマークがでたらOK）
次に文字を入れるので、さらに新しくレイヤーを追加します。
右側の「横書き文字ツール」で任意の文字を書きます。
ファビコン（アイコン）なので、1~2文字が見やすいです。
文字を追加したら、右側のプロパティーからフォントを選択し、文字の大きさや色を変更します。
いろんなパターンを試してみましょう。
パソコンで見るとかなり小さいアイコンなので、コントラストをはっきりさせると目立ちやすいです。
完成したら、書き出しを行います。
書き出し
上部メニューの「ファイル」→「書き出し」→「書き出し形式」を選択。
背景透過の場合は「PNG」形式で、
「透明部分」にチェックをいれます。
書き出しできたら、「ファビコンを設置する」を参考にしてください。
投稿者プロフィール
-
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに入社し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。
最新の投稿
WordPress講座2024年4月5日カスタムフィールドの簡単な作り方をご紹介！- WordPressのプラグイン2024年3月18日カスタム投稿でウェブサイトを簡単カスタマイズ
- ホームページ制作2024年3月6日物件情報デモサイトを公開！〜自社ホームページでも便利な機能を導入しませんか？〜
- サイト運営ノウハウ2024年1月18日ホームページの入力作業を効率化！！ワードプレスカスタムフィールド
お問合せフォームはこちら
（※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。）
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。
