あなたのブログにはカスタムファビコンがありますか？ そうでなければ、それは本当にすべきです。 今日は、ファビコンが何であるか、なぜ必要なのか、そして最後にあなたのブログやウェブサイトのファビコンを作成する方法を学びます。
私はまだ一つのないブログのトンを参照してくださいので、あなたのブログがそれらのいずれかである場合は、自分自身に好意を行い、以下のチュート 私はそれが長くかかることはありません約束し、それはまた、一種の楽しいです！
更新: 11/4/2020
開示:この投稿にはアフィリエイトリンク（a*で示される）が含まれている可能性があります。 私はあなたのサポートに感謝し、私は一人で立っていない製品をお勧めすることはありません。
まず、ファビコンとは何ですか？
faviconはfave-iconと発音され、お気に入りアイコンの略で、ウェブサイトのブックマークのリスト、つまりお気に入りのウェブサイトに表示されるために命名されました。 ファビコンは、ブラウザタブアイコン、ブックマークアイコン、またはショートカットアイコンとして表示されるlogomarkの小さなバージョンです。
ファビコンは、ユーザーが一目であなたのウェブサイトを認識するための簡単な方法です。 以下の私のブラウザのタブを見てみましょう。 私がここで開いているウェブサイトのほとんどを認識していますか？
なぜファビコンを作成する必要があるのですか？
ブログやウェブサイトにカスタムファビコンを割り当てないと、一般的なアイコンまたはアイコンがまったく割り当てられません。 最悪の場合、あなたのブログはあなたのホスティング会社のファビコンを使用しています。 Chromeは小さな地球儀（上の画像を参照）を追加し、SafariはウェブサイトのURLの最初の頭文字を灰色のボックス（下の画像を参照）に追加し、Firefoxは何も追加しません。 いずれにしても、退屈について話してください！
上記のブラウザタブをもう一度見てください。 認識可能なアイコンを持つことは、それが簡単にwebサイトの間で迅速に前後にクリックすることができま ウェブサイトをブックマークに保存すると、ブックマークリストにファビコンも表示されます。 これはすぐにあなたが探しているものを見つけることが容易になります。 あなたの読者はすぐにファビコンを組み込むことにより、自分のタブやブックマークであなたのブログを見つけるのに役立ちます。
私はあなたがファビコンが表示される場所を考えていなかった賭け別の場所があります：あなたの携帯電話で頻繁に訪問するウェブサイトを持っ あなたの読者が頻繁にあなたのサイトを訪問するのが大好きなら、彼らはあなたが間違いなく彼らがすでに追加した他のアプリのアイコンから目立つように見栄えの良いアイコンを持ってほしいので、彼らのホーム画面からそれにショートカットを追加することができます。
そして、ここにSafariの新しいタブページがあります。 あなたのウェブサイトの近道をここに写し出しなさい。 あなたのブログは、あなたの下の”C”アイコンのような退屈な灰色のアイコンで表されたくありませんか？
ブログのファビコンを設計する方法
ファビコンを作成するためのいくつかの設計ルール
まず、ファビコンを設計するためのいくつかのベス
- あなたのファビコンは目立つとすぐに認識する必要があります
あなたのファビコンを認識するための最良の方法は、出発点としてあなたのロ あなたのブログはまだ超有名ではない場合でも、それは大丈夫です。 あなたの決め付けること中の一貫した設計要素そして主題を使用してそれが残りから際立ち、人々が結局あなたのブランドを確認するのを助ファビコンを設計する際に考慮すべきいくつかのオプションを次に示します:- あなたのロゴやロゴマーク
- あなたのロゴの簡単なバリエーション
- あなたのブランドを表すシンボルやアイコン
- あなたのブランド名のイニファビコンを作成する
- あなたのファビコンは非常にシンプルなデザインを使用する必要があります
今、あなたのブラウザのタブfaviconsをよく見てみましょう。 あなたは何に気づいていますか？ 彼らは小さいです！ 一般的なファビコンは16×16ピクセルで表示されます。 このため、ロゴやブランド要素の非常に単純化されたバージョンを使用することを確認することが重要です。 詳細で精巧なグラフィックは、このような小さなサイズでうまくスケールしません。 彼らは最も可能性の高いぼやけた混乱のように見えます。 - ファビコンが明るい背景と暗い背景とうまく対照的であることを確認してください
読者の好みに応じて、ブラウザのタブは白、黒、明るいまたは濃いグレーにすることができます。 このため、明るい背景と暗い背景の両方でよくコントラストする色を持つファビコンを作成することを確認したいと思うでしょう。いくつかのファビコンは、透明な背景を持っており、その色は、任意の背景によくコントラストので、彼らは動作します。 グラフィックが明るすぎたり暗すぎたりする場合は、グラフィックやロゴの後ろに色のついた円や正方形を追加して、色のついたタブで目立つようにしたり、読みやすくしたりするのに役立ちます。 - インスピレーションのためにブラウザのタブを見てください
ウェブの周りをクリックして、お気に入りのウェブサイトで使用されているfaviconsを見てくださ 彼らは光や暗い背景で動作するかどうかに注意してください。 グラフィックは透明な背景を持っていますか、それとも色付きの正方形や円の上にありますか？
ファビコンインスピレーション
透明度を使用したファビコン
これらのアイコンは、最後のものを除いて、暗いまたは明るい背景のいずれかで”それはおそらく白い正方形の上に置かれているはずです。 そして、それは伝えるのは少し難しいですが、第四のアイコンは、蓮の花は、実際には非常に細かい黒い輪郭を持っています。 このようにして、明るい色のタブで見ても簡単に見ることができます。
色付きの背景を使用したファビコン
これらのファビコンは、暗いタブと明るいタブの両方ではっきりと見えるように、正方形または丸みを帯びた正方形の背景で設計されています。
イニシャルを使用したファビコン
これらのイニシャルアイコンの中には、色付きのバックラウンドを使用するものもあれば、透明なものを使用するものもあります。 いずれにしても、読み取り可能であることを確認してください。
プロフィール写真を使ったファビコン
プロフィール写真を使ったファビコンは、流行の新しい傾向のようです。 このルートを行く場合は、すべてのオンラインプロファイルで同じプロファイル写真を使用して、即座に認識できるようにしてください。
ブログのファビコンを作成する方法
ファビコンファイルをステップバイステップで作成
- Photoshop（無料トライアルにサインアップ）*、Pixlr、BeFunky、Canvaなどの画像エディタを使用して
ファビコンファイルを512×512ピクセルで作成します。 それはブラウザのタブでのみ16×16で表示されていますが、それはまた、私は上記の他のアプリケーションのいくつかで大きなサイズで表示されます。 - 小さなサイズでファビコンをプレビュー
グラフィックファビコンの作成が完了したら、グラフィックが小さくなるまで、ブラウザに表示されるファビコンの大きさに合わせて画像をズームアウトします。 それはまだ読みやすいですか？ それは理にかなっていますか？ そうであれば、素晴らしい、次のステップに進みます。 - ファイルを保存する
まず、グラフィックを編集可能なファイルとしてソフトウェアプログラムに保存して、必要に応じて戻って微調整できます。次に、PNGファイルとして保存します。 - ファビコンを生成します。icoファイル
ファビコンジェネレータを使用して、PNGファイルをICOファイルに変換します。 一部のブラウザはICOファイルのみを読み取るため、この手順が必要です。
最初から独自のデザインに代わるもの
テキストやイニシャルのファビコンをすばやく簡単に作成したい場合は、テキスト>ICOファビコン 私はすぐにDYOBのためにこれを作成しました:
絵文字>ICOファビコンジェネレータを使用することもできます。 
最後に、新しいファビコンをブログやウェブサイトに追加します
WordPress
自己ホスト型のWordPressブログにファビコンを追加する最も簡単な方法は、ダッシ 次に、”外観”>”カスタマイズ”に移動し、”サイトId”タブをクリックします。 サイトアイコンセクションの下で、新しいファビコンを選択します。アップロードするicoファイル。
そしてブーム、あなたは完了です、あなたのブラウザでそれをチェックアウト！ ブラウザのキャッシュが表示される前に、数回更新したり、キャッシュをクリアしたりする必要がある場合があります。
ファビコンをaに追加する方法WordPress.com ブログ.
Squarespace
Squarespaceにもファビコンを追加するのは非常に簡単です。
Blogger
ブログにログインし、左の列の設定をクリックします。 次に、[基本]セクションの下にある[ファビコン]をクリックします。 次に、ファビコンをアップロードします。icoファイル、保存してブーム！
新しいファビコンをテストする
さまざまなプラットフォームや設定でファビコンがどのように見えるかをテストしたい場合は、このファビコンチェッカーを使用してください。 あなたのアイコンがプラットフォームのいずれかで見る方法を編集したい場合は、iOS（iphone）を言う、あなたは各設定のためにそれらを最適化するために その後、ちょうどあなたのブログにそれらをすべて追加するための指示に従ってください。
ファビコンの作成方法を学んだだけです
おめでとう！ あなた自身のblogを設計するとき、細部、最も小さい物を省かないことを確かめたいと思う。 それにカスタムファビコンを追加すると、読者がすぐに自分のタブやブックマークであなたのブログを見つけるのに役立ちますだけでなく、それはあ
今度はあなたの番です
ファビコンの作成方法について質問がある場合、またはあなたのブランドのために作成するファビコンの種類を特定する それ以外の場合は、コメントで私たちとあなたのファビコンを共有してくださ
そして、あなたはこのチュートリアルを楽しんできた場合は、私の署名の下のアイコンのいずれかをクリックして、それを共有してくださ
この投稿は当初2013/8/14に公開され、2015/11/2に更新され、その後2020/11/4に再び更新されました。
こんにちは友人、したい無料DIYデザインも?
私はあなたのためだけに無料のグッズの全体のライブラリを持っています！ 10,000+他の人に参加し、今すぐアクセスを取得！