React 앱용 Favicon 생성 방법

반응으로 웹 사이트를 만드는 법을 처음 배울 때. 나는 favicon을 만드는 아주 기본적인 일을 하는 방법을 몰랐습니다.

오늘 저는 스마트폰과 같은 사용자 장치에 표시 가능하고 예측 가능한 방식으로 앱을 표시할 수 있는 다른 메타 태그와 함께 파비콘을 생성할 수 있는 매우 유용한 도구를 보여드리겠습니다.

내가 말하는 도구는 realfavicongenerator 입니다.



프로그레시브 웹 앱으로 다운로드하거나 사용자의 웹사이트에 링크로 저장한 경우 파비콘이 사이트에서 어떻게 보이는지, 다른 사용자 기기에서 앱이 어떻게 표시되는지 보여주는 인터페이스를 제공합니다. 홈 화면.

사이트를 사용하려면 최소 70 x 70픽셀의 파비콘 이미지를 선택하기만 하면 됩니다. 이미지는 260 x 260을 권장하지만 최적의 결과를 위해. 이미지는 png, jpg 또는 svg일 수 있습니다.

내 이미지를 선택하겠습니다. 제 경우에는 React 로고일 뿐입니다. 그런 다음 favicon을 사용하여 사이트가 데스크톱 브라우저와 Google에 어떻게 표시되는지 보여줍니다.



원본 이미지를 사용하거나 선택한 여백과 배경을 추가할 수 있습니다.

그런 다음 iOS에서 favicon이 표시되고 Android, Windows 및 Safari와 동일한 옵션을 제공합니다.

이 옵션을 모두 선택했으면 하단에 있는 버튼을 눌러 파비콘을 생성합니다.

여기에서 파비콘을 설치하고 생성된 모든 파일을 다운로드하는 방법에 대한 지침이 제공됩니다.



표준 반응 프로젝트를 사용하는 경우. 이 모든 파일의 압축을 풀고 정적 폴더에 넣어야 합니다. 이 폴더는 프로젝트 디렉토리의 루트에 있어야 합니다. 그런 다음 생성된 모든 링크와 메타 태그를 앱 헤드에 넣어야 합니다. 패키지react-helmet를 사용하고 아래와 같이 세금 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>
  );
}

그리고 마지막으로 해야 할 위대한 한 걸음입니다. 마지막 단계는 즐겨찾기 아이콘 확인을 선택한 다음 배포된 사이트 URL을 삽입하여 거기에 모든 메타 태그를 성공적으로 제공했는지 확인하는 것입니다. 거기에서 변경해야 할 사항이 있는 경우 이를 수행하는 방법에 대한 제안이 제공됩니다.



이것이 웹과 다른 사용자의 장치에서 다음 React 프로젝트를 보다 잘 표현하는 데 도움이 되기를 바랍니다.

이 게시물을 즐기십니까? 리액트 부트캠프에 참여하세요

The React Bootcamp은 React 학습에 대해 알아야 할 모든 것을 비디오, 치트 시트 및 특별 보너스를 포함하여 하나의 포괄적인 패키지로 묶습니다.

수백 명의 개발자가 이미 React를 마스터하고 꿈의 직업을 찾고 미래를 통제하는 데 사용한 내부 정보를 얻으십시오.


열릴 때 알림을 받으려면 여기를 클릭하십시오.