オリジナルのサイトアイコン(ファビコン)を簡単に作る方法

オリジナルのサイトアイコン(ファビコン)を簡単に作る方法WordPress

オリジナルのサイトアイコン(ファビコン、アップルタッチアイコン)を簡単に作る方法を紹介します。

自分のサイトを持っていたら、アドレスバーやお気に入り、スマホでホームに追加した時に表示されるサイトアイコンをオリジナルで作りたくなりますよね。その方が愛着が湧きますし「このサイトは俺のだ!」って胸を張って言えます。

でもこれをオリジナルで作ろうと思うと、ちょっと難しい。初心者にとっては何をどうしたら良いのかわからない・・。

私もそうだったのですが、今回紹介する方法を使ったところ「かなり簡単にサイトアイコンを作れた」ので、その方法を紹介します。

作る画像は「サイズ:512px × 512px」「ファル形式:PNG」

サイトアイコン用に作る画像は、

  • サイズ:512px × 512px
  • ファイル形式:PNG

にします。

正確な理由は詳しく調べてないのでわかりませんが、サイト作成のプロ「寝ログのわいひらさん」が言っていたので、間違いないと思います。

参考:サイトアイコンを設定する方法(ファビコン、アップルタッチアイコン等の設定) | Cocoon

Canvaを使うと作りやすい

素人でも直感的にデザインできるCanvaを使って、サイトアイコンを作ったところ、超簡単にできました。

Canva

軽く使う分には無料で全然イケると思います。私も無料バージョンで使っています。もっと使い込みたかったり、ガンガン使いたい場合は有料プランが用意されています。

公式の使い方ヘルプ

参考までにCanva公式ヘルプから「Canvaでのデザイン方法」の主なページを載せておきます。

Canvaでサイトアイコンを作る方法

Canvaでサイトアイコンを作る方法を解説します。

次の手順で行います。

  1. 「512px × 512px」の無地のキャンパスを作る
  2. 画像や文字を入れる
  3. PNG形式でダウンロードする

1.「512px × 512px」の無地のキャンパスを作る

まずサイズ「512px × 512px」の無地のキャンパスを作ります。

次の手順で行います。

  1. Canvaのホーム左上にある「デザインを作成」をクリック
  2. 「カスタムサイズ」をクリック
  3. サイズ部分に「512 × 512」と入力
  4. 「デザインを作成」をクリック
1.「デザインを作成」をクリック。2.「カスタムサイズ」をクリック。
1.「デザインを作成」をクリック。2.「カスタムサイズ」をクリック。
3.「512 × 512」と入力。4.「デザインを作成」をクリック。
3.「512 × 512」と入力。4.「デザインを作成」をクリック。

2.画像やイラスト、文字を入れる

作ったサイズ「512px × 512px」の無地キャンパスに、お好みの「画像・イラスト」や「文字」を入れます。

画像やイラストを入れる

画像やイラストを入れるには、左メニューの「写真」「素材」「アップロード」から行います。

「写真」「素材」「アップロード」から画像やイラストを入れる。
「写真」「素材」「アップロード」から画像やイラストを入れる。

「写真」や「イラスト」には無料で利用できるモノのあれば有料のモノもあります。有料の写真やイラストを使いたい場合は有料版にアップグレードする必要があります。

Canva内に無い画像やイラストを使いたい場合は「アップロード」から、アップロードすることができます。

文字を入れる

文字を入れるには、左メニューの「テキスト」を選択します。

文字を入れるには「テキスト」を選択する。
文字を入れるには「テキスト」を選択する。

色んなフォントがあるので結構楽しいです。

3.PNG形式でダウンロードする

作り終わったら、最後に「PNG形式」でダウンロードします。

  1. 画面右上「パブリッシュ」をクリック
  2. 「ダウンロード」をクリック
  3. 「PNG」を選択して
  4. 「ダウンロード」をクリック
パブリッシュ>ダウンロード>「PNG」を選択>ダウンロード
パブリッシュ>ダウンロード>「PNG」を選択>ダウンロード

これで作った画像(サイズ:512px × 512px)をPNG形式でダウンロードできます。

おわりに

このような手順で、Canvaを使えば、かなり簡単にサイトアイコンを作ることができます。

これを作って登録すれば、自分のサイトに愛着が湧きますし、訪問者にとっても目印になるので長く運営するならやっておいた方がいいですよ。

思い立ったら吉日なので、今すぐCanvaにアクセスしてサイトアイコンを作ることをオススメします。

参考になれば幸いです。

コメント