ファビコン(サイトアイコン)の作り方とCocoonの設定方法

ファビコンの作り方 Cocoon

こんにちは、ikuzo(いくぞう)です。

今回はファビコンと作り方と、Cocoonでファビコンを設定する方法を解説します。

 

ファビコン(サイトアイコン)とは、これですね。

ファビコン見本

プラウザのタブに表示されているマークのことです。

 

ファビコンを設定していない場合、Cocoonではデフォルトのアイコンが表示されます。

Cocoonのファビコン

 

このファビコンをオリジナルのものに変更していきます。

“ikuzoblog”オリジナルのファビコン

 

記事をブックマークしてもらった際にも一覧から探す目印になるものなので、

積極的にオリジナルのファビコンを作っていきましょう!

スポンサーリンク

ファビコンの作り方

今回ファビコンは、下地(無地の壁紙)にフォントを重ねる方法で作りました。

ファビコンにイラストを使用したい方は、イラストの背景を透過させて壁紙に重ねる方法もあります。

下地の壁紙を作成

まずは、下地となる無地の壁紙を作ります。

壁紙は、かんたん無地壁紙作成というサイトを使わせてもらいました。

 

Cocoonの作者、わいひらさんは、

ファビコンは、512×512pxのPNG画像で作ってね」と言ってます。

 

WordPressの設定画面にも、

サイトアイコンは512×512ピクセル以上の正方形にしてください」と記載されてます。

なので、下地の壁紙もその大きさで作ります。

「かんたん無地壁紙作成」で壁紙のサイズを設定
かんたん無地壁紙作成で、サイズを縦横512pxで指定します。

 

色は、カラーコード表HTMLカラーコードで「#6ケタのコード」を探して、

そのコードをRGBと16進数カラーコードの相互変換ツールでRGBに変換します。

16進数カラーコードをRGBへ変換

カラーコードに「#6ケタ」を入れるとRGBに変換されます。

今回使う色は、私がサイトキーカラーで使用している「#1e7cd1」です。

 

そのRGBを、かんたん無地壁紙作成の「赤・緑・青」に入力して「壁紙作成」を押して下さい。

壁紙を作成する

 

壁紙の上で「右クリック」→「名前を付けて画像を保存」(Chromeの場合)

壁紙を保存

これで壁紙は完成です。

ロゴの作成

次にファビコンで使うロゴを作成します。

使用するのは、プラウザ上でロゴが作れるフリーフォントで簡単ロゴ作成というツールです。

「フリーフォントで簡単ロゴ作成」設定画面

 

512×512pxのファビコンを作るので、ロゴも大きめに作ります。

赤枠で囲んだのが、設定した箇所です。

「フリーフォントで簡単ロゴ作成」の設定

 

「X座標」は数字を大きくするとロゴが右へ、「Y座標」は下に移動します。

「幅」と「高さ」は数字を大きくすると、ロゴを表示しているスペースが大きくなります。

今回、フォントは「おつとめフォント」を使用して、色は「」(白のコードは#FFFFFF)にしました。

あとで先ほど作成した壁紙に重ねるので「透過PNG」に チェックを入れて、背景は透過させました。

「変更」を押してプレビューで確認しながら調整していきます。

ロゴが出来上がったら「ダウンロード」を押して下さい。

自分で作るのが面倒」「もっとおしゃれなロゴやファビコンを作りたい」という方は、
ココナラでデザイナーやイラストレーターの方にお願いするという手もあります。
料金はイラストで2,000円~とそれほど高くないので、興味のある方は覗いてみて下さい。

「ココナラ」アイコン作成のトップページ
SNSのアイコン作成依頼は、イラスト・似顔絵・漫画 > アイコン作成(出典:ココナラ

壁紙にロゴを重ねる

あとは、作成した壁紙にロゴを重ねるだけです。

次に使うツールは無料の画像編集ソフト「PhotoScape X」です。

「いろいろなツールがでてきて面倒だなぁ」と思われているかもしれませんが、今後も使えるものばかりなので、ブログを始めたばかりの方はこの機会に覚えちゃいましょう(^_^)

 

PhotoScape Xのダウンロードや基本的な使い方は、下の記事をご覧下さい。

【PhotoScape X】の基本的な使い方

 

PhotoScape Xを起動したら「写真編集」を選択して、最初に作った壁紙をドラッグ&ドロップします。

PhotoScape Xを起動して壁紙をドロップ

 

次に「挿入」を押して、画像のツールバーが表示されている状態でロゴをドロップします。

「挿入」のボタン

壁紙の上にロゴをドロップ

 

壁紙の上にロゴがのりました。

壁紙にロゴを重ねた

ロゴの周りにある「○」をドラッグして、ロゴの大きさを調整します。

枠線がある状態でロゴをドラッグすれば、ロゴの位置を動かせます。

 

位置と大きさが決まったら、右下の保存を押します。

「保存」を押す

 

壁紙からロゴがはみ出していると「写真の外に出た部分も保存しますか?」ときいてきます。

必要がなければ「いいえ」を押します。

「写真の外に出た部分も保存しますか?」の確認画面

 

保存方法は「別名で保存」を選んで下さい。

「別名で保存」を選ぶ

 

ファイル名は任意のもので。ファイルの種類はCocoonが推奨している「PNG」を選択しましょう。

ファイルの種類「PNG」を選択

 

完成したファビコンはこんな感じです。ひとまずお疲れ様でした。

完成したファビコン

Cocoonの「ファビコン」設定方法

いよいよ、作成したファビコンをCocoonへアップロードします。

WordPressのダッシュボードから「外観」→「カスタマイズ」をクリックして下さい。

Cocoon「ダッシュボード」の「外観」→「カスタマイズ」をクリック

 

ファビコンは「サイトの基本情報」で設定します。

Cocoon「サイトの基本情報」

 

「サイトアイコンを選択」を押して

ファビコンの選択画面

 

作成したファビコンをアップロードします。

作成したファビコンをアップロード

 

代替テキストに「ファビコン」や「サイトアイコン」と入力して、右下の「選択」を押しましょう。

代替デキストに文字を入力する。

 

最後に「公開」を押せば、これでファビコンの設定は完了です。

Cocoon「サイト基本情報」の設定完了

最後に

おつかれさまでした。

スムーズにファビコンが表示できていたら嬉しい限りです。

今回使用したツールはファビコンの作成以外にも使えるので、今後も何かの役に立つと思います。

また、文字だけでなくイラストを使ったファビコンも同じような方法でできますので、素敵なファビコンを作ってみて下さい。

最後まで読んでいただき、ありがとうございました。

コメント

  1. なるみ より:

    はじめまして。
    ブログ超絶初心者ですが、ikuzoさんのブログを拝見し、少しずつブログ設定を進めております。
    おかげ様で機械くそオンチの私でさえ、ファビコンの設定ができました。
    感謝いたします。

    • ikuzo|いくぞう より:

      なるみさん、コメントありがとうございます!
      ファビコンの設定ができたようで何よりです。

      ブログの設定は山ほどありますが、ひとつクリアするごとに達成感がありますよね。
      これから素敵なブログを作っていって下さい。
      応援してます!

  2. SAI より:

    とても分かりやすく、ブログ初心者の私でもファビコン作れました!
    作業で疲れた時に、いくぞうさんのブログで癒されています^^
    BASEBREADもこの前食べてみて、美味しかったです。
    ありがとうございました!

    • ikuzo|いくぞう より:

      なんですか?この泣きたくなるような嬉しいコメントは!
      SAIさん、本当にコメントありがとうございます!
      もう、おじさんもブログもっともっとがんばちゃいます(笑)
      一緒に作業、がんばっていきましょー!!

  3. かりん より:

    はじめまして。
    ずっと気になっていたファビコン設定、おかげさまであっという間にできました。
    ありがとうございました。
    これからもikuzoさんのブログを参考に頑張ります!

    • ikuzo|いくぞう より:

      かりんさん、コメントありがとうございます。
      ファビコン設定、お役に立てたようで良かったです(^_^)
      これからもお互いに頑張りましょう!