파비콘을 만드는 방법에는 여러 가지가 있습니다. 가장 좋은 방법은 다양한 요인에 따라 다릅니다.

• 이 작업에 사용할 수있는 시간입니다. 많은 사람들에게 이것은 “가능한 한 빨리”입니다.
• 당신이하고자하는 노력. 더 나은 결과를 위해 손으로 16×16 아이콘을 그립니다.
• 특이한 사양으로 특정 브라우저를 지원하는 것과 같은 특정 제약.

첫 번째 방법 : 파비콘 생성기 사용

작업을 빠르고 잘 수행하려면 파비콘 생성기를 사용할 수 있습니다 . 이것은 모든 주요 데스크톱 및 모바일 브라우저에 대한 그림과 HTML 코드를 생성합니다. 전체 공개 : 나는이 사이트의 작성자입니다.

이러한 솔루션의 장점 : 빠르고 모든 호환성 고려 사항이 이미 해결되었습니다.

두 번째 방법 : favicon.ico 만들기 (데스크톱 브라우저 만 해당)

제안한대로 favicon.ico16×16 및 32×32 그림이 포함 된 파일을 만들 수 있습니다 ( Microsoft에서는 16×16, 32×32 및 48×48 권장 ).

그런 다음 HTML 코드에서 선언하십시오.

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

이 방법은 이전 및 새 데스크톱 브라우저에서 모두 작동합니다. 그러나 대부분의 모바일 브라우저는 파비콘을 무시합니다.

재치 당신의 제안에 대해 favicon.ico그것을 선언 루트에 파일을하지 : 조심,이 기술은 대부분의 브라우저에서 작동하지만, 그것은 100 % 신뢰할 수 없습니다. 예를 들어 Windows Safari에서 찾을 수 없습니다 (허용됨 :이 브라우저는 Windows에서 더 이상 사용되지 않지만 요점을 알 수 있습니다). 이 기술은 PNG 아이콘과 결합 할 때 유용합니다 (최신 브라우저의 경우).

세 번째 방법 : favicon.ico, PNG 아이콘 및 Apple Touch 아이콘 (모든 브라우저) 만들기

귀하의 질문에는 모바일 브라우저에 대해 언급하지 않았습니다. 대부분은 favicon.ico파일 을 무시 합니다. 사이트가 데스크톱 브라우저 전용 일 수 있지만 모바일 브라우저를 완전히 무시하고 싶지 않을 가능성이 있습니다.

다음과 좋은 호환성을 얻을 수 있습니다.

• favicon.ico, 위 참조.
• Android Chrome 용 192×192 PNG 아이콘
• 180×180 Apple Touch 아이콘 (iPhone 6 Plus의 경우, 필요에 따라 다른 기기에서 축소)

그들과 함께 선언

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

이것이 전체 이야기는 아니지만 대부분의 경우 충분합니다.

---

답변