웹 사이트에 즐겨 찾기 아이콘을 추가하려면 어떻게합니까?

내 사이트에 파비콘을 추가하기위한 현대 표준은 어떤 마크 업입니까? 표준 이미지 형식과 크기는 무엇입니까?

모든 브라우저에서 작동하려면 .ico크기가 32x32가 가장 널리 사용되며 16x16도 작동합니다 (대부분의 브라우저에서 사용되는 실제 크기).

또한 귀하의 질문에는 없지만 8 또는 24 비트 색 심도이어야합니다.

iWhatever 사용자가 귀하의 사이트를 북마크하는 <link>경우, 이미지와 는 별개 입니다 (예 : StackOverflow).

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

어느 것이 :

http://www.favicon.cc/ 와 같은 도구를 사용하여 사진을 가져 와서 즐겨 찾기 아이콘으로 변환하거나 처음부터 새로 만들 수 있습니다.

그런 다음 파일 이름을 지정 favicon.ico하고 웹 사이트의 루트에 넣으면 대부분의 웹 브라우저가 자동으로 가져옵니다.

그러나 다음과 같이 html 파일에 명시 적으로 선언 할 수도 있습니다.

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

이외의 다른 형식을 사용하면 ico다른 페이지에서 다른 파비콘을 사용하고 다른 장소에 파비콘을 넣고 다른 이름을 사용할 수 있습니다 favicon.

http://en.wikipedia.org/wiki/Favicon

IE의 전체 도메인 http 경로로 마크 업 하고 문서 폴더에 favicon을 유지하십시오.

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

표준 이미지 형식 :

• .ico
• 16 x 16 픽셀

다른 장치, 브라우저 및 OS의 경우 다른 아이콘을 사용할 수 있습니다. 예를 들어 아래는 영감을 얻을 수있는 목록입니다. 일이 진행됨에 따라 목록을 수정 / 편집하십시오.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

더 이상 링크가 필요하지 않지만 유용합니다. 대신 루트에 favicon.ico (및 ico)라는 파일을 남겨두면 즐겨 찾기 아이콘으로 사용됩니다.

김프로 .ico 파일을 만드는 데 약간의 어려움 이 있었지만 이 게시물에 자세한 지침이 나와 있습니다. 트릭은 먼저 색인화 된 색상 표로 변환 한 다음 ICO 형식으로 변환하기 위해 GIF 형식으로 저장하는 것으로 보입니다.