[html] 웹 사이트에서 파비콘을 만드는 가장 좋은 방법은 무엇입니까?

Program / 글쓴이

질문

  • 웹 사이트 에서 파비콘 을 만드는 가장 좋은 방법은 무엇입니까 ?
  • 16×16 및 32×32 이미지가 모두 있는 .ico 파일이 16×16 전용 .png 파일 보다 낫 습니까?
  • 오늘날 선호되는 올바른 방법이 합리적으로 오래된 브라우저에서 작동하지 않을 수 있습니까?

방법 1

favicon.ico기본 디렉토리에 이름이 지정된 파일을 배치하는 것은 한 가지 방법입니다. 브라우저는 항상 해당 파일을 요청합니다. 아파치 로그 파일에서 확인할 수 있습니다.

방법 2

<head>섹션의 HTML 태그 :

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />

답변

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

  • 이 작업에 사용할 수있는 시간입니다. 많은 사람들에게 이것은 “가능한 한 빨리”입니다.
  • 당신이하고자하는 노력. 더 나은 결과를 위해 손으로 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">

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

답변

  1. 이 웹 사이트에서 favin.ico 를 생성 할 수 있습니다.
  2. png가 방법 1에서 작동하지 않고 ico가 더 자세한 정보를 가질 수 있기 때문에 .ico 형식을 사용하는 것이 좋습니다!
  3. 두 방법 모두 모든 브라우저에서 작동하지만 자동으로 작동 할 때 원하는 코드를 입력 하시겠습니까? 그래서 방법 1이 더 낫다고 생각합니다.

답변

나는 https://iconifier.net을 사용했다.
나는 내 이미지를 업로드하고, 이미지 zip 파일을 다운로드하고, 내 서버에 이미지를 추가하고, 내 index.html에 링크를 추가하는 것을 포함하여 사이트의 지시를 따랐다. 이제 ‘홈 화면에 추가’할 때 Safari의 iPhone에 내 파비콘이 표시됩니다.

답변