Faviconをあなたのウェブサイトに加える方法

13273 ワード
webdev design テキストリンク
Faviconは“お気に入りのアイコン”に短いです.それはあなたのウェブサイトを表す小さなアイコンです.あなたがそれを見る最も一般の場所は、ページタイトルと並んでブラウザタブにあります.
しばしばFaviconはウェブサイトのロゴの縮小版です.それは非常に小さいサイズでよく見えなければなりません- 16と16ピクセルと同じくらい小さい-これはあなたにあなたのfaviconのために異なるデザインを作成させるかもしれません.
例えば、IBMを取る.彼らは、彼らのウェブサイトのヘッダーに独特の様式化されたテキスト・ロゴを使います、しかし、彼らは彼らのfaviconとして蜂アイコンを使います.

何がfaviconを追加する必要がありますか？


時間をかけて、Faviconの要件は手を離した.Faviconホーム画面とプログレッシブWebアプリのスプラッシュ画面で使用されるようになりました.異なるブラウザーとモバイルプラットホームは、異なる文脈のために異なるイメージ決議とフォーマットを望みました.あなたがこれらのシナリオのすべてを満足させたいならば、あなたはおよそ20のイメージファイルを作成して、異なる場所のメタデータでこれらを参照しなければなりません.一部の人々は、あなたが提供した最初のイメージに基づいてイメージファイルと関連メタデータを吐き出すジェネレータを書きました.
ありがたいことに、それはより賢くなったし、発電機を忘れることができます.今はSVG faviconを作ることができますので、そのスケーラブルな性質から恩恵を受けることができますし、必要なイメージファイルの大部分をカットします.Andrey Sitnikは最近話題を研究している.How to Favicon in 2021: Six files that fit most needs . 彼の調査結果は、6つのファイルがベースの大部分をカバーするということでした.記事を読む彼の記事を完全に実行を取得するには、ここで大きなポイントを要約し、いくつかの重要なデザインの問題を議論するときにfaviconを作成します.

どのようなファイルを作成する必要がありますか？


それはおそらくあなたの好きなベクトルグラフィックエディタ(Adobe Illustrator、Inkscape ..など)でSVGとしてfaviconを作成する最も簡単です.PNGとしてエクスポートすることができます.
作成するファイルは以下の通りです.
  • 1 : 1アスペクト比のSVG.次のセクションでもっと議論します.
  • 32の32ピクセルのICO.これはレガシーブラウザです.でSVGを開くことができますGIMP そしてそれをエクスポートfavicon.ico 設定:32 BPP、8ビットアルファ、パレットなし.
  • 180ピクセルのPNG.これはAppleデバイス用です
  • 192ピクセル192ピクセルpng.これは、Androidデバイスのホーム画面です.
  • 512×512ピクセルのpng.これは、Androidデバイスのスプラッシュ画面です.
  • Webアプリケーションマニフェストファイル.これは一般的にプログレッシブWebアプリ(PRE)を作成するために使用されますが、それは他のコンテキストで“ホーム画面に追加する”コンテキストのブラウザで使用されます.ファイル名manifest.json or manifest.webmanifest , そして、通常、あなたのウェブサイトのルートディレクトリに置かれます.
    • この設定が除外するのは次の仕様のサポートです.

  • Pinned tabs in Safari で指定<link rel='mask-icon'> . サファリ12 +ピン付きタブの現在のfaviconを使用します.

  • Pinned site customisation for Windows , はbrowserconfig.xml ファイル.

    • SVGを作成する


    アスペクト比が1 : 1であるように、正方形のSVGを作りたい.あなたはそれを省略することができますwidth and height SVGの属性viewBox 次元を定義する.
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
   <!-- stuff -->
</svg>
    我々は、私たちのfaviconは白と黒の近くの色で良い見て確認し、任意の背景に合理的に見える.
    なぜ?私たちはちょうどFaviconの別のバージョンを使用するか、テーマが明るいか暗いときに色を変更するメディアクエリを使用することはできませんか?
    はい、しかし、あなたはこの100 %に頼ることができません.The prefers-color-scheme CSS media feature ユーザーがブラウザで光または暗い色のテーマを要求した場合、検出し、ほとんどのシナリオをカバーするために使用することができます.私が見つけたシナリオは以下の通りです.
  • Chromeベースのブラウザでは、デフォルトで暗い色を使用します.
  • ブラウザの履歴ドロップダウンでは、使用されるfaviconはおそらくキャッシュされ、ユーザーのテーマに影響されません.あなたは、BBCとGithub Faviconが識別するのが難しいというスクリーンショットで見ることができます.
  • githubのトラフィックページでは、参照アドレスのfaviconがウェブアドレスと並んでインラインで表示されます.GitHubの設定でダークモードが設定されている場合、GithubのFaviconはここでファウルになります.それともできますか.😑

    • どんな背景でもよく見えるように、次のことができます.
  • あなたのfaviconの不透明な背景を持っている.アマゾンはこれをします、彼らは白い背景色があります.
  • 光と暗い背景と十分なコントラストを持つカラーパレットを選択します.マイクロソフトこれを行う.

    • 上記のデザインアプローチにしたがっていない場合は、SVGの中にスタイルブロックを埋め込むことで、ほとんどのシナリオをカバーすることができますprefers-color-scheme メディアクエリ.これは、ユーザーの選んだテーマにfaviconを適応させます.あなたのfaviconのスタイルに応じて、使用される色を変更したり、既存の色を調整するためにフィルタを使用することができます.
  • 色を切り替えることができますまたは反転を使用してCSS filter . この例を見ることができますhere .
    • <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    @media (prefers-color-scheme: dark) {
      path {
        fill: white;
      }
    }
  </style>

  <!-- stuff -->
</svg>
  • あなたがカラフルなfaviconを持っているが、それは暗いテーマのために明るくする必要がある場合は、明るさを使用することができますCSS filter .
    • <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    @media (prefers-color-scheme: dark) {
      :root {
        filter: brightness(2);
      }
    }
  </style>

  <!-- stuff -->
</svg>
    また、背景にあなたのfaviconのコントラストを高めるために影を追加を検討することができます.これは明らかに暗いテーマのために効果的です.

    どこでファイルを置きましょうか。


    あなたのウェブサイトのルートディレクトリにあなたのfaviconファイルを置くことになっていました.あなたは、それらをサブディレクトリに配置したいかもしれません/img/favicon/ , ちょうどものをきれいにするために.私はまだ置くfavicon.ico ルートディレクトリでは、いくつかのWebサービスと古いブラウザはまだこのファイルのためにここを見ます.残りはあなたのメタデータで指定するもので覆われています.
    以下は、あなたのウェブサイトのファイルをどのように整理するかの例です.
    .
├── favicon.ico       // must be named this way and located at root
├── manifest.json     // the convention is to have this in the root dir    
├── img/             // you can choose where to put the rest of the images  
│   └── favicon/
│           └── favicon.svg   
│           └── favicon-180.png   
│           └── favicon-192.png
│           └── favicon-512.png

    メタデータ


    次のように追加する必要がありますhead あなたのウェブサイトの
    <head>
  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/img/favicon/favicon.svg" type="image/svg+xml" sizes="any">
  <link rel="apple-touch-icon" href="/img/favicon/favicon-180.png">
  <link rel="manifest" href="/manifest.json"> 
</head>
    また、良いアイデアを追加することです<meta name="theme-color" content="<color>" 一貫性のために.これは、UIの背景のスタイルの要素にブラウザやアプリで使用される色を示唆している.たとえば、ブラウザのページのタイトルバーの色を使用することがあります.また、テーマのメディアクエリを指定することができます.
    <meta name="theme-color" media="(prefers-color-scheme: light)"
content="antiquewhite">
<meta name="theme-color" media="(prefers-color-scheme: dark)"
content="silver">
    これは、Webアプリケーションマニフェストに入れたものです.
    {
  "name": "My blog",
  "icons": [
    { "src": "/img/favicon/favicon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/img/favicon/favicon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

    最適化


    ブラウザーは背景にFaviconをダウンロードするので、より大きなイメージファイルはウェブサイトパフォーマンスに影響を及ぼしません、しかし、ファイルを最適化して、人々のデータ割当を尊重することはまだ良い実行です!
    SVGでは、マークアップを最適化し、ツールを使用してエディタデータを取り消すことができます.SVGOMG (web GUI) or SVGO (command-line) .
    使えますtinypng (web GUI) またはPNGSを最適化するための任意のラスターイメージアプリケーション.通常、あなたがすることができる最も衝撃的なことは、色パレットを必要最小限に減らすことです.出力を確認して、外観を劣化させないことを確認してください.

    結論


    2021年にあなたのウェブサイトにfaviconを加えることは、以前より苦しいです、しかし、それはまだ些細な仕事でありません.あなたはどのようにあなたのfavicon暗いと光のテーマに見えるかを検討する必要があります.6ファイルを作成し、適切なメタデータをWebページに追加する必要があります.それは少しの仕事です!うまくいけば、この記事はあなたのための負荷を軽減!
    あなたは私の購読することができますRSS feed 私の最新のポストを得るために.
    [Swiftアルゴリズム]ペアリングの削除
    [Django] C.R.U.D -2 (2)