こんにちは、ikuzo(いくぞう)です。
今回はファビコンと作り方と、Cocoonでファビコンを設定する方法を解説します。
ファビコン（サイトアイコン）とは、これですね。
プラウザのタブに表示されているマークのことです。
ファビコンを設定していない場合、Cocoonではデフォルトのアイコンが表示されます。
このファビコンをオリジナルのものに変更していきます。
記事をブックマークしてもらった際にも一覧から探す目印になるものなので、
積極的にオリジナルのファビコンを作っていきましょう！
ファビコンの作り方
今回ファビコンは、下地（無地の壁紙）にフォントを重ねる方法で作りました。
下地の壁紙を作成
まずは、下地となる無地の壁紙を作ります。
壁紙は、かんたん無地壁紙作成というサイトを使わせてもらいました。
Cocoonの作者、わいひらさんは、
「ファビコンは、512×512pxのPNG画像で作ってね」と言ってます。
WordPressの設定画面にも、
「サイトアイコンは512×512ピクセル以上の正方形にしてください」と記載されてます。
なので、下地の壁紙もその大きさで作ります。
かんたん無地壁紙作成で、サイズを縦横512pxで指定します。
色は、カラーコード表かHTMLカラーコードで「#6ケタのコード」を探して、
そのコードをRGBと16進数カラーコードの相互変換ツールでRGBに変換します。
カラーコードに「#6ケタ」を入れるとRGBに変換されます。
今回使う色は、私がサイトキーカラーで使用している「#1e7cd1」です。
そのRGBを、かんたん無地壁紙作成の「赤・緑・青」に入力して「壁紙作成」を押して下さい。
壁紙の上で「右クリック」→「名前を付けて画像を保存」（Chromeの場合）
これで壁紙は完成です。
ロゴの作成
次にファビコンで使うロゴを作成します。
使用するのは、プラウザ上でロゴが作れるフリーフォントで簡単ロゴ作成というツールです。
512×512pxのファビコンを作るので、ロゴも大きめに作ります。
赤枠で囲んだのが、設定した箇所です。
「X座標」は数字を大きくするとロゴが右へ、「Y座標」は下に移動します。
「幅」と「高さ」は数字を大きくすると、ロゴを表示しているスペースが大きくなります。
今回、フォントは「おつとめフォント」を使用して、色は「白」（白のコードは#FFFFFF）にしました。
あとで先ほど作成した壁紙に重ねるので「透過PNG」に チェックを入れて、背景は透過させました。
「変更」を押してプレビューで確認しながら調整していきます。
ロゴが出来上がったら「ダウンロード」を押して下さい。
ココナラ
でデザイナーやイラストレーターの方にお願いするという手もあります。料金はイラストで2,000円～とそれほど高くないので、興味のある方は覗いてみて下さい。
SNSのアイコン作成依頼は、イラスト・似顔絵・漫画 > アイコン作成（出典：ココナラ
）
壁紙にロゴを重ねる
あとは、作成した壁紙にロゴを重ねるだけです。
次に使うツールは無料の画像編集ソフト「PhotoScape X」です。
「いろいろなツールがでてきて面倒だなぁ」と思われているかもしれませんが、今後も使えるものばかりなので、ブログを始めたばかりの方はこの機会に覚えちゃいましょう(^_^)
PhotoScape Xのダウンロードや基本的な使い方は、下の記事をご覧下さい。
PhotoScape Xを起動したら「写真編集」を選択して、最初に作った壁紙をドラッグ＆ドロップします。
次に「挿入」を押して、画像のツールバーが表示されている状態でロゴをドロップします。
壁紙の上にロゴがのりました。
ロゴの周りにある「○」をドラッグして、ロゴの大きさを調整します。
枠線がある状態でロゴをドラッグすれば、ロゴの位置を動かせます。
位置と大きさが決まったら、右下の保存を押します。
壁紙からロゴがはみ出していると「写真の外に出た部分も保存しますか？」ときいてきます。
必要がなければ「いいえ」を押します。
保存方法は「別名で保存」を選んで下さい。
ファイル名は任意のもので。ファイルの種類はCocoonが推奨している「PNG」を選択しましょう。
完成したファビコンはこんな感じです。ひとまずお疲れ様でした。
Cocoonの「ファビコン」設定方法
いよいよ、作成したファビコンをCocoonへアップロードします。
WordPressのダッシュボードから「外観」→「カスタマイズ」をクリックして下さい。
ファビコンは「サイトの基本情報」で設定します。
「サイトアイコンを選択」を押して
作成したファビコンをアップロードします。
代替テキストに「ファビコン」や「サイトアイコン」と入力して、右下の「選択」を押しましょう。
最後に「公開」を押せば、これでファビコンの設定は完了です。
最後に
おつかれさまでした。
スムーズにファビコンが表示できていたら嬉しい限りです。
今回使用したツールはファビコンの作成以外にも使えるので、今後も何かの役に立つと思います。
また、文字だけでなくイラストを使ったファビコンも同じような方法でできますので、素敵なファビコンを作ってみて下さい。
最後まで読んでいただき、ありがとうございました。
コメント
はじめまして。
ブログ超絶初心者ですが、ikuzoさんのブログを拝見し、少しずつブログ設定を進めております。
おかげ様で機械くそオンチの私でさえ、ファビコンの設定ができました。
感謝いたします。
なるみさん、コメントありがとうございます！
ファビコンの設定ができたようで何よりです。
ブログの設定は山ほどありますが、ひとつクリアするごとに達成感がありますよね。
これから素敵なブログを作っていって下さい。
応援してます！
とても分かりやすく、ブログ初心者の私でもファビコン作れました！
作業で疲れた時に、いくぞうさんのブログで癒されています＾＾
BASEBREADもこの前食べてみて、美味しかったです。
ありがとうございました！
なんですか？この泣きたくなるような嬉しいコメントは！
SAIさん、本当にコメントありがとうございます！
もう、おじさんもブログもっともっとがんばちゃいます（笑）
一緒に作業、がんばっていきましょー！！
はじめまして。
ずっと気になっていたファビコン設定、おかげさまであっという間にできました。
ありがとうございました。
これからもikuzoさんのブログを参考に頑張ります！
かりんさん、コメントありがとうございます。
ファビコン設定、お役に立てたようで良かったです(^_^)
これからもお互いに頑張りましょう！