あなたの反応アプリのFaviconを生成する方法

私が最初に反応してウェブサイトを作ることを学んだとき.私は非常に基本的なことをする方法を知りませんでした.
今日は、私たちは、私たちは、私たちのユーザーのデバイス上で我々のアプリを表示できるように、他のメタタグと一緒にFaviconを生成することができます非常に有用なツールを表示するつもりです.
私が言及しているツールはrealfavicongeneratorです.

それは私たちに私たちのfaviconはどのように我々のアプリだけでなく、我々のアプリは、他のユーザーのデバイス上で表示されますどのように見えるかを表示するインターフェイスは、進行中のWebアプリケーションとしてダウンロードされる場合、またはユーザーのhomescreenのリンクとして保存されます.
サイトを使用するには、すべてを行う必要がありますFavicon画像は、少なくとも70ピクセルで70を選択します.260枚260枚とお勧めします.最適な結果を得るために.イメージはPNG、JPG、またはSVGであることに注意してください.
私は自分のイメージを選択するつもりです.それは私の場合はただの反応のロゴです.それから、我々のサイトがデスクトップブラウザーとそれにGoogleで現れるFaviconで、我々は我々に方法を示します.

我々は、元のイメージを使用することができますまたは我々はマージンと我々の選択の背景を追加することができます.
それから、我々はIOSの上で我々のfaviconを示しています、そして、それは我々に同様のオプションをAndroid、WindowsとSafariに与えます.
したら、すべてのこれらのオプションを選択完了したら、あなたのfaviconを生成するために下部にあるボタンを押すよ.
そこからどのようにあなたのfaviconをインストールする方法を指示され、すべての生成されたファイルをダウンロードします.

あなたが標準的な反応プロジェクトを使用しているならば.これらのファイルをすべて解凍して、プロジェクトディレクトリのルートにある静的フォルダーに置く必要があります.その後、あなたのアプリケーションの頭に生成されたリンクとメタタグのすべてを置く必要があります.以下のようにパッケージ242479142を使用してこれらの税金JSX要素を挿入することによってこれを行うことができます.

import React from "react";
import Helmet from "react-helmet";

function SEO() {
  return (
    <Helmet>
      <link
        rel="apple-touch-icon"
        sizes="180x180"
        href="/apple-touch-icon.png"
      />
      <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href="/favicon-32x32.png"
      />
      <link
        rel="icon"
        type="image/png"
        sizes="16x16"
        href="/favicon-16x16.png"
      />
      <link rel="manifest" href="/site.webmanifest" />
      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
      <meta name="msapplication-TileColor" content="#da532c" />
      <meta name="theme-color" content="#ffffff" />
    </Helmet>
  );
}

そして最後に、1つの大きなステップを行う.最後のステップは、あなたのfavのアイコンをチェックし、選択したサイトのURLを挿入する場合は、そこにすべてのメタタグを提供しているかどうかを選択します.そこからどのように変更を行うには、何かをする方法についての提案が与えられます.

これはあなたの次の反応プロジェクトをよりウェブ上で、そして、他のユーザーの装置の上でより多くのpresentableにするのを助けてください.

このポストをお楽しみください。反応ブートキャンプに加わってください

The React Bootcampは、反応を学習し、ビデオ、チートシート、プラス特別ボーナスを含む1つの包括的なパッケージにバンドルを知っておくべきすべてを取ります.
ゲインインサイダー情報何百もの開発者はすでに反応をマスターするために使用して、彼らの夢の仕事を見つけて、将来の制御を取る:

それが開くとき、知らせられるために、ここをクリックしてください