ファビコンのデザインは、あなたが思うかもしれないよりも重要です。 うまく設計されたロゴは、それが見られるどんなサイズでも認識できる必要があるため、サイズは本当にここで重要です。 これは、右のファビコンとして知られている16x16ピクセルとして小さくすることができますアイコンに大規模な画面からスケーリングする必要 ファビコンのデザインの良い例は、Googleのロゴです。 それは、その大きな”G”と独特の四色のテキストと大きな画面のために完全に動作します。, そして、webブラウザのアドレスバーに見られる小さな四色の”G”に縮小したとき、それはまだ認識できるようになっています。
ファビコンは、ショートカットアイコン、タブアイコン、ブックマークアイコンとしても見ることができるので、部分を見る必要があります。 機能するファビコンのデザインを見るには、ロゴデザインのインスピレーションの私たちのラウンドアップを参照して、ちょうどそれを得るiOSアプリ
この記事では、完璧なファビコンをデザインする方法のプロセスを実行します。, Appleデバイス、Android、Chrome、Opera、Safari用のファビコンを作成するための具体的なヒントが含まれています。 プラスに便利なガイドが異なるfaviconサイズのフォーマットが必要になっています。 クイックリンク（右）を使用して、必要なセクションに直接ジャンプします。
- 別の種類のアイコンをお探しですか？ 最高の無料アイコンセットへのガイドを参照してください
ウェブの初期の頃、ファビコンは単に16x16pxのアイコンファイルでしたが、最近はもう少し複雑です。, コンテキストごとにファビコンのサイズや処理が異なります。 適切なファビコンを作成することは科学です。
そこで、ファビコンがどのように見えるかについてのヒントをいくつか紹介し、さまざまなコンテキストに対してファビコンを作成する方法についての具体的なアドバイスに移ります。 Apply Pixelsで利用可能なテンプレートを使用して、必要なさまざまなファビコンサイズを簡単に生成し、Apply Pixelsからのファビコンを例として使用します。,
Faviconデザインルール
認識できるようにする
faviconを設計するときに最初に考慮すべきことは、キャンバスで表現する必要があるものです。 覚えていることfavicon表示され、ユーザーが既にウェブサイトやブックマークします。 だから、試してみて、あなたのfaviconでユーザーを引き付ける必要はありません。
あなたのロゴを使用してください
ブックマークリストやホームクリーンを閲覧するときにユーザーがあなたのウェブサイトを認識するのを助ける冷静な道標として, そのため、使用したいロゴ、またはのいずれか記号もっとも容易にユーザを認識します。 二次キャンバスに適合するロゴマークがない場合は、ロゴの最も認識可能な部分を使用してください。
それを明確にしてください
避けるべきこともいくつかあります。 ファビコンをマーケティングツールとして使用しないでください–それは値札、”新しい”または”更新された”バナーなどを意味しません。 実際には、ファビコンの中にテキストを入れたくありません。 テキストはうまくスケーリングされず、とにかく判読不能になる可能性があります。, 最後に、写真を使用しないでください–それは泥だらけになり、それが表示されるサイズで認識できなくなります。
二つのバージョンを作成します
ファビコンがInternet Explorer5で初めて導入されたとき、URLバーとブックマークリストに表示されました。 今える機能を加え表示され多くの他のコンテキストブックマークを含むリスト、ショートカットメニューもモバイルテレビhomescreens., ことが困難であるという予測方法おfaviconが表示されますが、エンドユーザーp>
透明な背景にロゴ
このバージョンは、URLバー、ブックマークリスト、およびファビコンがウェブサイトのURLまたは名前の横に表示されるその他の場所に表示されます。
ファビコンが表示されるようにするには、次のようにします。
透明な背景にロゴ
このバージョンは、URLバー、ブックマークリストなどに表示されます。,
固体塗りつぶしのロゴ
このバージョンでは、グリッドのようなブックマークやショートカットメニューで使用され、ブラウザまたはデバイスが背景をマスク
ファビコンサイズチートシート
前述したように、コンテキストによって異なるサイズのファビコンが必要になります。 以下に、すべての主なユースケースをカバーするために提供する必要があるさまざまな形式と寸法のクイックガイドを示します。
以前はfaviconsはICO形式で提供されなければなりませんでした。, 今日では、PNG形式でファイルを提供することは大丈夫です（SVGとして提供する必要があるSafariの固定タブアイコンを除く）。
すべてのファビコンサイズをデザインしてエクスポートする簡単な方法が必要な場合は、apply Pixelsでfaviconテンプレートを見てください。
さて、さまざまなユースケースの特定の要件を詳しく見てみましょう。,
デスクトップブラウザファビコン
デスクトップブラウザファビコンを作成する方法
作成する必要がある最も簡単なファビコンから始めましょう：クラシックデスクトップブラウザ用のクラシックファビコン。 このタイプのファビコンは、urlバーやブックマークリストに表示されることが多いため、透明な背景で最適に機能します。,
このタイプのファビコンをスリーサイズで提供する必要があります。,
- 16×16
- 32×32
- 48×48
Apple
Apple Touchファビコンの作成方法
AppleのiOSでは、Apple Touchアイコンを使用して、iOSのホーム画面にブックマークとして保存されたウェブサイトを表します。 これは、Apple TouchアイコンがiOSアプリアイコンのsquircleマスクに丸められることを意味します。
それはまた、ユーザーが自分のホームスクリーンのために選択したどの背景に対して表示されます。 これを念頭に置いて、Apple Touchのアイコンには、塗りつぶしの背景スタイルが必要です。,
AppleファビコンはPNG形式で提供する必要があります。 さまざまなiPhoneとiPadのサイズに合わせて自動的にスケールされる180x180Apple Touchアイコンを提供することで逃げることができます。 これはほとんどの場合、正常に動作します。,
そうでない場合は、さまざまなAppleデバイスに追加のサイズを提供できます。
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android、Chrome、Opera
Android、Chrome、Operaのファビコンを作成する方法opera
android、chrome、operaはandroid-chrome-192x192を使用します。pngおよびandroid-chrome-512x512。Googleが推奨するpng。,
アダプティブアイコンの導入以来、Androidのホームスクリーンに追加されたウェブサイトは192x192のデザインをマスクするので、アイコンはユーザーの好みのマスキングスタイルの後に形を取ります。 これは、正方形、省略記号、長方形、丸みを帯びた長方形または涙滴形状である可能性があります。
192x192と512x512で単色の背景を持つPNGファビコンを作成する必要があります。,
マニフェストを追加して、これらのファビコンを実装します。あなたのサイトへのjsonファイルとタグ内でそれにリンクします：
<link rel="manifest" href="/manifest.json">マニフェストのコードは次のとおりです。jsonファイル：
Safari
Safariのピン留めタブのファビコンを作成する方法
これは奇妙なものであり、SVGファイルとしてベクトル形式で提供する必要がある唯一のファビコンです。 で表示とサムネイルのアイコンがユーザのピン、タブのSafariのブラウザウインドウです。,
このファビコンは、透明な背景を持つ100％黒 Safariでは、SVGのviewBox属性を”0 0 16 16″に設定する必要があります。
<link rel="mask-icon" href="your_icon.svg">その他のファビコンタイプ
この記事には含まれていないファビコンのディメンションと形式がいくつかあります。, Google TV、Chromeウェブストア、およびiOS7以前のApple Touchアイコン。 どうして？ それらは非推奨になっているか、平均的なweb開発者にはめったに関連していないためです。
一般的に、開発者や設計者は、できるだけ幅広いデバイスやオペレーティングシステムをサポートするよう努めるべきですが、時にはそれは意味をなさ ただし、ファビコン画像のより完全なリストを見たい場合は、GitHubのこのファビコンチートシートを見てください。,
- 2020年のトップデザイントレンド
- デザイナーのための15のプロフェッショナルフォント
- 無料のアイコンの27のベストセット
