Favicon용 이미지 준비

Favicon Generator

플랫폼마다 아이콘을 생성해주는 편리한 제너레이터입니다. 이쪽을 이용하겠습니다.

Favicon Generator

favicon으로 만들려는 이미지를 업로드하면 폭속으로 각 플랫폼의 미리보기가 표시됩니다. 배경색이나 여백의 설정도 이때 할 수 있으므로, 취향에 맞게 설정합니다.

Generate your Favicons and HTML code를 눌러 생성된 Favicon package를 다운로드하면 준비가 완료됩니다. 이 때 표시되는 HTML 태그는 나중에 사용하므로 복사해 둡니다.

Next.js

public/favicons

public 아래에 다운로드한 Favicon package를 넣습니다. 자신은 favicons 에 rename 했습니다.
또한 browserconfig.xml 및 site.webmanifest를 약간 변경합니다.

browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/favicons/mstile-150x150.png"/> //変更
            <TileColor>#ffffff</TileColor>
        </tile>
    </msapplication>
</browserconfig>

site.webmanifest

{
    "name": "hogehoge",
    "short_name": "hogehoge",
    "icons": [
        {
            "src": "/favicons/android-chrome-192x192.png", //変更
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/favicons/android-chrome-512x512.png", //変更
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

pages/_document.tsx

Next.js에서 공통 ｈead 태그는 pages/_document.tsx에 쓸 수 있습니다. 방금 복사한 태그를 _document.tsx 안의 Head 태그 안에 붙여넣습니다. 이때, 닫는 태그를 추가하지 않으면 jsx에 화가 나기 때문에 추가합니다. 또한 각 경로를 변경했습니다.

IE8 이하와 Windows8/10의 스타트 화면에 고정했을 때의 대응으로서 2행 추가하고 있습니다만, 필요 없으면 해당 화상과 함께 삭제해도 괜찮습니다.

_document.tsx

import NextDocument, { Html, Head, Main, NextScript } from 'next/document';

export default class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head>
          <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
          <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
          <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
          <link rel="manifest" href="/favicons/site.webmanifest" />
          <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#000000" />
          <link rel="shortcut icon" href="/favicons/favicon.ico" /> //IE8以下にも対応したい場合
          <meta name="msapplication-TileColor" content="#ffffff" />
          <meta name="msapplication-config" content="/favicons/browserconfig.xml" /> //Windows8/10のスタート画面のピン留め画像に対応したい場合
          <meta name="theme-color" content="#ffffff" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

확인

Favicon checker 에서 배포한 사이트를 확인합니다. 아래의 이미지와 같이 되어 있으면, 우선 주요한 favicon의 설정이 되어 있습니다. 수고하셨습니다!

Reference

이 문제에 관하여(Next.js에서 Favicon 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/purpleeeee/items/cd9aca1ae735ad678355

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다