今回は、サイトに設定するファビコンをPhotoshopで作っていきます。

ファビコンはとても簡単につくれてオリジナルサイトに必須のものなので、ぜひ一緒に作っていきましょう。

(すでにロゴがあり編集が必要ない場合は、512pxの正方形に整えてワードプレスにアップするだけです。)

新規作成

512 × 512 px のキャバスを新規作成します。

「カンバスカラー」の部分はファビコンの背景色になります。
任意の色か、白もしくは透明にしておきます。

ここでは、ひとまず白にしておきます。

この部分の設定は、後からでも変更できます。
(キャンバスの背景を変更する)

右下 アイコンから新規レイヤーを追加

ロゴがある場合

ロゴを中央に配置します。

キャンバスの背景を変更する

キャンバスの周りをクリックすると、右側のパネルにプロパティが表示されます。

プロパティパネルがない場合

プロパティが出ない場合は、上メニューのウィンドウからプロパティにチェックを入れてください。

「塗り」 はファビコンの背景色になります。

背景透過したい場合は透明を、それ以外の場合は任意の色を選択しましょう。

カスタムで好きな色に変更できます

透明を選択すると、背景に設定されていたレイヤーが透明になりました。

ファビコンの背景を透明にしたいのに、ロゴ自体の背景透過処理がされていない場合は、こちらの記事を参考にしてください。

ファビコンが完成したら、書き出しを行います。

ロゴがない場合

ファビコンに使用するロゴがない場合は、このように→ 文字 + 図形で簡単に作ることができます。

先ほどと同じように、正方形のキャンバスを用意し、レイヤーを追加します。

左アイコンの楕円形ツールなどを使用します。

ここでは正円の背景を入れます。

必要に応じて色を変更します。

*左側図形ツールを選択時に「塗り」を変更できます。

図形を中央に配置します。

この図形のレイヤーを選択している状態で、 マークを押し、位置を固定しておきます。

(レイヤーの右端に鍵のマークがでたらOK)

次に文字を入れるので、さらに新しくレイヤーを追加します。

右側の「横書き文字ツール」で任意の文字を書きます。

ファビコン(アイコン)なので、1~2文字が見やすいです。

文字を追加したら、右側のプロパティーからフォントを選択し、文字の大きさや色を変更します。

いろんなパターンを試してみましょう。

パソコンで見るとかなり小さいアイコンなので、コントラストをはっきりさせると目立ちやすいです。

完成したら、書き出しを行います。

書き出し

上部メニューの「ファイル」→「書き出し」→「書き出し形式」を選択。

背景透過の場合は「PNG」形式で、
「透明部分」にチェックをいれます。

書き出しできたら、「ファビコンを設置する」を参考にしてください。

投稿者プロフィール

Izumi
Izumi
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに入社し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。

お問合せフォームはこちら

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)