ファビコンを無料で作成し、ワードプレスに設定してみたい。
どうしたらいいのかな?
結論はズバリ
「無料サイトでファビコン画像を用意すれば、ワードプレスの管理画面から3分で設定できる!」だよ今回はその手順を解説するね!
運営しているブログにファビコンを設定してみたい!
でも、画像をどのように用意して、設定すればいいか解説がないのでよくわからないですよね。
そこで、今回はファビコンの用意の仕方とワードプレスへの設定方法を詳しく紹介します。
ブログ運営者として、自身のブログを魅力的に見せたい方は、ぜひ続きをご覧ください
この記事の監修者:#AKさん
私の名前は#AKです。デザイナー歴10年以上、そしてPhotoshop歴も10年以上という経歴を持ち、クリエイティブの世界で経験を積んできました。
過酷な労働環境にもめげず、ブラック企業の厳しい現場でデザイン技術を磨き上げてきました。その経験が私の堅実な仕事ぶりと強靭な精神力を形成しました。
現在は上場企業の会社員として、デザイナーとして活動しています。クリエイティブで社会に貢献することが私の使命です。
Photoshopスキルに自信を持ち、新たな挑戦に向けて常に準備ができています。何かお手伝いできることがあれば、お気軽にご連絡ください。
ファビコンとは?【無料でサイトを個性化!】
ファビコンはWebサイトのアイコンで、上記画像の3箇所に表示されます。
Webサイトやブログ作成時に設置することがおすすめされ、サイトのイメージやブログの特徴を強調し、検索結果で目を引くようにすることができます。
特にブログの場合、ファビコンはテーマやコンテンツの性格を伝え、ブログのアイデンティティを強調します。
検索結果での表示においても、ファビコンがあると他のサイトから目立つため、読者がブログを見つけやすくなります。
要するに、ファビコンはWebサイトやブログのブランディングと認知度向上に役立つ重要なツールです。
ファビコンの魅力を無料で最大限に引き出す方法
ファビコンはウェブサイトの「顔」であり、デザインの選択に悩むことがよくあります。
おしゃれ、かっこいい、かわいいなど、さまざまなデザインが存在しますが、ファビコンを選ぶ際に以下のポイントに気を付けると良いでしょう。
一つずつ解説します。
1.ブログの内容を表すデザイン
ファビコンがブログのテーマや内容を反映するデザインであると、訪問者に内容のイメージを与えやすくなります。
車を紹介するブログであれば「車」、物件を紹介するサイトであれば「家」といったデザインが効果的です。
2.ブランドイメージカラーまたは分かりやいカラーにする
ブランドイメージカラーがある場合、そのカラーに合わせたファビコンを使用するとよいでしょう。
例えばブログを黒と白で構成している場合、ファビコンも「黒と白」で構成する。
カラー数を最小限に抑えることで読者に効果的に訴求できるファビコンになるでしょう。
3.訴求性の高いデザインを目指す
訴求性の高いファビコンはウェブサイトの重要な要素で、ユーザーがブックマークや共有時にも目を引く役割を果たします。
ChromeやSafari、iOS、Androidのホーム画面など広く使用され、ユーザーの画面に表示されたり、ブックマークされたりするため、覚えやすいデザインが理想的です。
4.画像が小さくなっても形がわかるシンプルなデザイン
ChromeやSafari、または、iOS、Androidのホーム画面のアイコンなど広く使用されます。ファビコンは小さい画像で表示されます。
そのため、小さくなっても形が損なわれずに識別可能なデザインを選ぶことが重要です。
5.目立つ配色や形
ファビコンは小さく表示されるため、目立つ配色や形状を選ぶことで注目を集めることができます。
また、モノクロにした時にも強いコントラストにしておくと、離れたところからでも視認性を高めることができ効果的なファビコンにすることができるでしょう。
ファビコンの無料作成方法!【ファビコンフリー素材編】
次のサイトでは無料でファビコン用イラストを手に入れることができます。
ファビコンを作るには無料素材を使うという手があり。こちらのサイトを活用することで、おしゃれなファビコンを用意することが可能です。
1.FLAT ICON DESIGN
2.Canva
3.ICOOON MONO
順番に紹介します。
1.FLAT ICON DESIGN
フラットアイコン素材がフリー(無料)でダウンロードできるサイトです。 WEBデザインやDTP他、PPTなどでもすぐに使える商用利用可能なアイコン素材がそろっています。
色付きのかわいらしい、フラットデザインのファビコンにしたい方にオススメです。
2.Canva
有料版もありますが、無料版でもおおいに利用できるのが、Canvaです。
私もCanvaを使って絵本を作成し、発売したことがあり。無料版でも十分使えます。
アイコン素材もたくさんあるので、こちらもぜひご活用ください。
3.ICOOON MONO
商用利用可能なアイコン素材をフリー(無料)ダウンロードできる素材配布サイトです。
WEBデザインやDTPのほか、ビジネスシーンで活用できるアイコン素材をストックしています。TopeconHeroesが作成したこのサイトに掲載している素材は、どなたでも使用条件に違反しない限りクレジット表記や許可なしで、 自由にご利用いただけます。
ファビコンをモノクロで作りたいひとにオススメです。
ファビコン画像!【無料作成ツール編】
ファビコン(favicon.ico)を作成するには、高機能なツールであるPhotoshopなどを使用しなくても、無料で利用できる多くのツールが存在します。
ここでは3つ紹介します。
1.Quick Any2Ico
2.ファビコン favicon.ico 作成 リアルタイム版
3.favicon
1.Quick Any2Ico
各種画像ファイルを、ICO 形式のアイコンファイルに変換してくれるソフト。
JPG / PNG / BMP / GIF / JPEG / WMF / EMF / TIFF / TIF / ICO 形式の画像ファイルを元に、複数のサイズ表示(16×16 ~ 512×512)に対応したマルチアイコンを一発生成することができます。
ドラッグ&ドロップで放り込んだ各種画像ファイルを、ICO 形式のアイコンファイルに変換してくれる… というアイコン作成ツールです。
2.ファビコン favicon.ico 作成 リアルタイム版
半透過マルチアイコンが作れます。 ウェブブラウザで、タブやURLのとなりに表示されているアイコンがfaviconです。 16×16と32×32と48×48ピクセルのマルチアイコンが簡単に作れます。
処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。個人利用無料、商用利用無料で利用可能です。
自分もICO画像を作ろうと思い、画像を放り込んでみました。
1秒もかからず完了。上の画面が表示。
その後、DLボタンを使ったら無事DLが完了しました。
3.favicon
会員登録やツールのダウンロードが不要で、ウェブ上で直感的に操作できるシンプルな機能を備えたツールを使用すれば、ファビコンを作成することができます。
以上で、ファビコン(favicon.ico)作成ツールの紹介はおしまいです。いかがだったでしょうか?
こちらもいいけれど、どうしても自分だけのオリジナルのファビコンを作りたい!そんな方の為にここからは、Photoshopを使ったオリジナルのファビコンの作り方を紹介します。
ファビコンの作成方法!【Photoshop編】※ツール無料ではありません
ファビコンの作成方法はいくつかありますが、やはりオリジナルが一番よいです。今回はフォトショップを使ったファビコンの作成方法をご紹介いたします。作成手順は以下となります。
1.Photoshopを開く
2.新規ファイルを作成①
3.新規ファイルを作成②
4.テキストを作る
5.効果を付ける①
6.効果を付ける②
7.効果を付ける③
8.データを書き出す①
9.データを書き出す②
10.データを書き出す③
順番に解説していきます。
1.Photoshopを開く
はじめにPhotoshopを開きます。私はタスクバーにピン留めをしているので、画面下のアイコンをクリックしました。
2.新規ファイルを作成①
まずは新規ファイルを作成したいので、左にある「新規ファイル」をクリックします。
3.新規ファイルを作成②
つぎにサイズを確認します。今回は512×512ピクセルで作成します。
4.テキストを作る
今回は一文字のファビコンを作成します。
左のテキストツールをクリックします。次に、画面の好きな位置でクリック。
すると、テキストが打ち込めるようになるので、好きな文字を打ち込み。
今回は、カイケツ君の宮殿の「カ」で作成したかったので、「カ」と打ち込みました。
するとこのように表示されます。
5.効果を付ける①
このままではアイコンがブラウザの白に埋まってしまうので、装飾を施します。
画面右下にある、「fx」をクリック。さらに、「レイヤー効果」をクリックします。
6.効果を付ける②
すると、レイヤースタイルの画面が開くので①「カラーオーバーレイ」をクリックします。
次に②のカラーの部分をクリックし、好きな色に変更。
今回は、ブラジルの国旗をイメージした配色にしたかったので、黄色に変更しました。
7.効果を付ける③
最後に縁取りを行います。①「境界線」をクリック。
画面が切り替わったら、②の部分をクリックし「18」と記入します。
8.データを書き出す①
最後にデータを書き出します。
①「書き出し(E)」をクリック。②「PNGとしてクイック書き出し」を選択します。
9.データを書き出す②
好きな保存先を設定します。
①の箇所でファイル名を記入。今回は「favicon_1.png」としました。
最後に②の「保存」をクリックします。
10.データを書き出す③
指定した保存先のフォルダを見るとファビコンが書き出されています。
これでいつでもファビコンをワードプレスに反映することができるようになりました。
フォトショップを使ったファビコンの作成方法は、以上となります。
無料でマスター!ワードプレス(コクーン)ファビコンの設定手順
ファビコンの設定方法解説します。手順は以下となります。
1.カスタマイズ画面に移動する
2.サイト基本情報に移動する
3.画像を変更する
4.作成した画像をアップロード
5.画像を選択
6.公開する
7.変更を確認する
8.完了!
1つずつ解説していきます。
1.カスタマイズ画面に移動する
ワードプレスの管理画面に入ります。
①「外観」にマウスをかさね。
②「カスタマイズ」をクリックします。
2.サイト基本情報に移動する
画面左上にある、「サイト基本情報」をクリックします。
3.画像を変更する
サイト基本情報の画面に切り替わるので、「画像を変更」をクリックします。
4.作成した画像をアップロード
すると、画像を選択の画面に移動します。
ファビコンにしたい画像をドラック&ドロップし、読み込みます。
上記のように選択できるようになるので、画像を選択します。
さらに、右下の選択ボタンをクリック。
5.画像を選択
元の画面にもどったら、①のアイコンが変わっている事を確認します。
最後に、左上の公開ボタンをクリックします。
6.公開する
すると、文字が「公開済み」に変わります。こちらが確認できたら作業完了です!
7.変更を確認する
ブラウザ画面を開くとアイコンが切り替わります。
すべて変わっているか確認しましょう。
8.完了!
ファビコンの設定方法は、以上となります。
表示されない時の対応策【一ヵ月待ってみる】
いざ、ファビコンを設定してみても表示されないという事はよくあります。特に上記画像の③にあたるアイコンで頻繁に起こるようです。
原因は主に次の三つが考えられます。
一部のユーザーは、約一ヵ月待てばファビコンが表示されるとのコメントを残しており、そのため、まずは待つことを検討するのがおすすめです。
まとめ:ファビコンを無料で作成する方法と、ワードプレス(コクーン)のファビコンの設定方法を解説しました!
私はキャラクターのファビコンアイコンも興味があったので、上記イラストでも試してみました。
視認性は文字よりも低下しますが、こちらも気に入っています。
本記事では次の三つを紹介しました。
- 無料でファビコン画像を用意する方法
- ワードプレス(コクーン)のファビコンの設定手順
- Photoshopを活用したファビコン作成の方法
ブログ運営において最適な結果を出すのは大変ですが、今後はより見やすいアイキャッチ画像の作成にも挑戦したいと考えているところです。
それでは、今回はこのへんで。
コメント