질문
방법 1
favicon.ico기본 디렉토리에 이름이 지정된 파일을 배치하는 것은 한 가지 방법입니다. 브라우저는 항상 해당 파일을 요청합니다. 아파치 로그 파일에서 확인할 수 있습니다.
방법 2
<head>섹션의 HTML 태그 :
<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />답변:
파비콘을 만드는 방법에는 여러 가지가 있습니다. 가장 좋은 방법은 다양한 요인에 따라 다릅니다.
작업을 빠르고 잘 수행하려면 파비콘 생성기를 사용할 수 있습니다 . 이것은 모든 주요 데스크톱 및 모바일 브라우저에 대한 그림과 HTML 코드를 생성합니다. 전체 공개 : 나는이 사이트의 작성자입니다.
이러한 솔루션의 장점 : 빠르고 모든 호환성 고려 사항이 이미 해결되었습니다.
제안한대로 favicon.ico16x16 및 32x32 그림이 포함 된 파일을 만들 수 있습니다 ( Microsoft에서는 16x16, 32x32 및 48x48 권장 ).
그런 다음 HTML 코드에서 선언하십시오.
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">이 방법은 이전 및 새 데스크톱 브라우저에서 모두 작동합니다. 그러나 대부분의 모바일 브라우저는 파비콘을 무시합니다.
재치 당신의 제안에 대해 favicon.ico그것을 선언 루트에 파일을하지 : 조심,이 기술은 대부분의 브라우저에서 작동하지만, 그것은 100 % 신뢰할 수 없습니다. 예를 들어 Windows Safari에서 찾을 수 없습니다 (허용됨 :이 브라우저는 Windows에서 더 이상 사용되지 않지만 요점을 알 수 있습니다). 이 기술은 PNG 아이콘과 결합 할 때 유용합니다 (최신 브라우저의 경우).
귀하의 질문에는 모바일 브라우저에 대해 언급하지 않았습니다. 대부분은 favicon.ico파일 을 무시 합니다. 사이트가 데스크톱 브라우저 전용 일 수 있지만 모바일 브라우저를 완전히 무시하고 싶지 않을 가능성이 있습니다.
다음과 좋은 호환성을 얻을 수 있습니다.
favicon.ico, 위 참조.그들과 함께 선언
<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">이것이 전체 이야기는 아니지만 대부분의 경우 충분합니다.
<link ref="icon" ...>보다는 <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
ref="shortcut icon"정확히 사용합니다.
/favicon.ico가 선호되는 방법입니다. 이것은 당신이 방문 할 때 얻는 것 www.google.com입니다. 그러나 아이콘으로 루트 디렉토리를 더럽 히고 싶지 않을 수도 있습니다. 이 경우 마크 업이 제대로 작동합니다.
나는 https://iconifier.net을 사용했다. 나는 내 이미지를 업로드하고, 이미지 zip 파일을 다운로드하고, 내 서버에 이미지를 추가하고, 내 index.html에 링크를 추가하는 것을 포함하여 사이트의 지시를 따랐다. 이제 '홈 화면에 추가'할 때 Safari의 iPhone에 내 파비콘이 표시됩니다.