サイトのFaviconサイズ

ウェブデザインでは、おそらくあなたが知っているように、重要ですすべての詳細。あなたのリソースに渡された人は、それぞれの要素を別々に見ることはできませんが、イメージ全体を他の小さな細部からなるパッケージとして認識します。したがって、あなたのリソースを開発している間に何かを見逃してしまえば、将来のこの詳細は複合体全体、構成全体を損なう可能性があります。

そのようなトリプルは、例えば、ボタンの背景、いくつかの小さな要素とfaviconのフォントを誤って選択しました。確かに、自分自身を見て、大きな、よく知られているサイトは、ユーザーのブラウザの "ブックマーク"セクションにそれを表す個々のアイコンを持っています。これがなければ、リソースの開発者は最初に志望していた構成を作成することができなくなります。

したがって、サイトのデザインを作成して、ファビコン（Favicon）のような細部を管理しなければならない。この記事では、リソースの一般的なスタイルの下でイメージを選択する方法と、このイメージのサイズを選択する方法について説明します。

サイトアイコン

まず、この項目。今すぐあなたのブラウザのタブの名前を見てください。ご覧のように、左側にはリソースロゴの簡略版を示す小さな画像があります。同じ画像は、検索結果に表示されるサイトの名前の近くにもあります。彼がタイトルを見るとき、ユーザーは指向している。

多くのウェブマスターは、このような写真必要 - しかし、サイトのサイズのfaviconが最も適しているかを知る人はほとんどいません。したがって、この記事では、このようなアイコンの作成方法とリソースへのインストール方法について説明するだけでなく、イメージのサイズについても説明します。

ファビコンの目的

したがって、サイトのタイトルの近くにある画像は、識別。これは本来の目的です。サイトを表現し、その名前を他の人の目に見分けることです。これは、グラフィックスを使用することによって可能な限り簡単に行われます。テキスト形式よりもはるかに迅速かつ容易に画像の情報を直感的に認識します。 Faviconsは私たちを助けます。しかし、ユーザーの目には、ファビコンのサイズは最小であることを忘れないでください。これは、サイトの「ヘッダー」内のロゴではなく、碑文、明確化または連絡先の形で追加情報を含む場合があります。名前の隣にあるアイコンに表示できるものは、Faviconのサイズに近いものでなければなりません。そして彼は、既に示されているように、ちょうど小型（わずか16×16ピクセル）です。

ファビコンの選び方

Webマスターはどのように開発できるのでしょうか。あなたのサイトのアイコン？サイトロゴを単純に圧縮するだけでは、うまくいかないことに注意してください。リソースのロゴの形をしたエンブレムには、さまざまな要素が表示されることがよくありますが、それが必ずしもミニチュア形式で正しく表示されるとは限りません。すぐにこのベンチャーを放棄することをお勧めします。

もちろん、ファビコンの大きさは話すことを許可していませんそしてそこに碑文を置くだけです。どのようなテキストでも、この解像度では単に見えなくなります。サイトのスタイルを伝えるための新しいアイコンを開発する必要があります。解決策を見つけるために、ここでも最大のサイトに目を向けましょう。

多くの人がファビコンとして様式化されたものを使用しています。サービス名の最初の文字たとえば、Bing、Yahoo、Yandex、Wikipedia、Googleなどです。別の方法もあります - 短いサイト名がある場合は、それをアイコンの背景として設定できます。ファビコンのサイズ（ピクセル単位で、16×16ドットを繰り返す）がこの碑文を正しく表示するためには、3文字以下にする必要があります。例えば、サービスAolもそうです。

ファビコンを作るには？

サイト名のアイコンを作ることができますいくつかの方法で。もちろん、最も簡単な方法は、さまざまな既製のソリューションを使用することです。本格的な画像から縮小してアイコンを作成することを可能にするサービスやプログラムについてはご相談ください。しかし、私は自分自身でそのようなロゴの開発をすることをお勧めします。これは、まず第一に、何かを学ぶ機会を与えるでしょう。第二に、より多くのツールを提供します。あなたがこれをすることができる必要があるのは、描くことであり、そしてまた、ファビコンが最終版でどのくらいの大きさであるべきかを知ることです。サイトのアイコンのサイズについては後で説明しますが、ここではそのような画像を扱う上での微妙な点に注意しましょう。特に、サイトのファビコンのサイズについて言及することなく、そのような画像のフォーマットを明確にする必要があります。経験豊富なデザイナーが指摘したように、写真は.PNG（24ビット）または.ICOファイルとして保存する必要があります。

たとえば、Photoshopを使用して、エンブレムが描画される場所に画像を保存できます。

ファビコンの寸法

それでは今どのくらいの大きさについて話しましょう検索結果のサイト名の横に表示されている写真があるはずです。デフォルトでは、すでに述べたように、そのサイズはわずか16ピクセルです（両側）。しかし、「Photoshop」でこの画像を編集しようとすると、それがどれほど不便なのかを自分自身で確認してください。したがって、拡大画像を使用して作業することをお勧めします。これは、将来的には端で圧縮して必要な形式で保存することができます。

マルチプラットフォーム

しかし、どのようなサイズのファビコンについて話してあなたのサイトにある必要があります、あなたはもう一つのことを覚えておく必要があります。すべてのプラットフォームが同じ方法でリソースイメージを表示するわけではありません。たとえば、Retinaディスプレイを備えたデバイスは、32 x 32ピクセルのサイズでfaviconを「見る」ことができます。そして、Safariと新しいWindowsプラットフォームで、そしてこれらのアイコンは64ピクセルに達します。

そのため、異なるバージョンを保存することをお勧めします。将来のアイコンは、単にユーザーのプラットフォームに応じて変更されます。もう一つの興味深い点 - あなたはそれがブラウザに応じて "縮小"することを期待して、あなたは最大のフォーマットでアイコンをダウンロードしようとすることができます。

外部エディタ

もちろん、Photoshopを理解していればそして、あなたはあなたのイメージを維持しながら、どんなサイズのファビコンがあるべきか、そしてそれをどのように達成するかを知っています。しかし、それほど以前はグラフィックエディタにあまり遭遇しなかった初心者がたくさんいるため、目的の画像を描くことはできません。そのようなウェブマスターを助けるために、あなたが自動的にあなたに興味を起こさせるアイコンを作ることを可能にする様々なサービスがあります。それらの多くは無料でさえあります、そしてそれはユーザーによる少しの投資も必要としません。

仕事をするには、時々登録するだけでいいですしかし、ご存知のように、これは一度だけ行われます - 結局のところ、企業はそれほど頻繁にfaviconを変更しません。 Googleを見てください。毎日ロゴが変わりますが、アイコンには触れません。

faviconのインストール方法？

一般に、サイトをカスタマイズしてそれはあなたが必要とする画像を正しく表示しました、非常に単純です。検索エンジンや単純なブラウザが情報を読むことができるようにする一連の簡単なステップを実行するのに十分です。

これを行うには、結果の画像が必要です。favicon.icoとして保存し、あなたのリソースのルートに置きます。すべて、今あなたの画像は自動的に認識され、しばらくするとそれはあなたのサイトに結び付けられます。

そのようなバインディングに加えて、あなたはあなたのアイコンが位置するところに「プロンプト」する別の行を追加することができます。それはこのように見えます：

サイトのヘッダーにあるはずのコードをインストールします。

結論

それで、私たちの記事を読んだ後、あなたはそれを理解しますどのサイズがサイトのfaviconであるべきです、そして、それは何についてのものです。また、あなたのリソースに適したアイコンを探すことが必要であることをあなたは理解していると思います。少なくとも、最大規模のサイトは主要な例として考えられるのと同じように機能します。そして、これは特別な努力をすることはありません - 一度ファビコンを作成してそれをあなたのウェブサイトに正しくインストールしたなら、あなたは次の数ヶ月それを忘れることができます。

だから、気軽に試して、新しいものを発明し、試してみてください。そうすれば、すべてうまくいくでしょう。