서버가 다운 될 때 표시되는 순수한 HTML 인 정적 페이지가 몇 개 있습니다. 내가 만든 즐겨 찾기 아이콘 (16x16px이고 HTML 파일과 같은 디렉토리에 있음) (favicon.ico라고 함)을 "탭"아이콘으로 어떻게 넣을 수 있습니까? Wikipedia를 읽고 몇 가지 자습서를 살펴보고 다음을 구현했습니다.

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

그러나 여전히 작동하고 싶지 않습니다. 사이트를 테스트하기 위해 Chrome을 사용하고 있습니다. Wikipedia에 따르면 .ico는 모든 브라우저 유형에서 실행되는 최고의 사진 형식입니다.

최신 정보

서버에서 사이트 서비스를 시작한 후에 만 코드가 제대로 작동하는지 확인하지만 로컬에서 작동하도록 할 수 없습니다. 서버로 밀어 넣고 캐시를 새로 고치면 정상적으로 작동합니다.

html static favicon

— 전설
소스

당신은 당신의 친구 중 누군가에게 다른 시스템에서 당신을 위해 그것을 확인하라고 말하지 않습니다. 동일한 문제는 내 클라이언트 중 하나에 내 시스템이 잘 나타나고 파비콘이 표시되지 않는다고 불평하는 것입니다. 맞습니다. 행운을 빌어 요.

— mt

3

웹 사이트에 브라우저 탭 아이콘 (favicon)을 추가하는 방법에 대한

— Michał Perłakowski

귀하의 예는 현재 Chrome에서 작동합니다.

— Damjan Pavlica

흥미롭게도 라이브 웹 사이트는 파비콘을 훌륭하게 제공했지만 파일을 로컬로보고 로컬 서버를 통해 파일을 제공하지 않으면 (b / c 단순한 정적 사이트-그래!) 파비콘이 표시되지 않았습니다. 뒤늦게 보면 서버가 자동으로 서비스를 제공하는 것이 합리적입니다. 추가 <link rel="icon" type="image/x-icon" href="favicon.ico">받는 head(다음 32, 16, 180 파비콘 변화에 link국소 적 문제를 해결 S). link더 큰 아이콘 크기와 매니페스트에 대한 s를 포함했기 때문에 favicon.ico표시되지 않는 이유 에 대해 두 번 생각하지 않았습니다 ! :-)

— SherylHohman

932

.png 이미지를 만든 다음 <head>정적 HTML 문서 의 태그 사이에 다음 스 니펫 중 하나를 사용할 수 있습니다 .

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

— 흐릿한 맥기
소스

3

ico 링크의 rel =에 "바로 가기 아이콘"을 넣고 웹 루트 디렉토리에 있음을 나타 내기 위해 favicon.ico 앞에 /를 넣으려고 했습니까?

— Hazy McGee 2016 년

1

yip도 그것을 시도했다.. man lol 내가 평가 내가 모든 것을 다시 시작하고 부팅을 시도하고 어쩌면 그 현금이 잘못되었는지 또는 뭔가를 참조하십시오 ..

— TheLegend

5

맹세합니다-코드를 추가 한 후 동일한 문제가 발생했습니다. 브라우저가 일반적으로 가지고있는 회색 상자 대신 아이콘을 표시하는 데 하루가 걸렸습니다 .ur 브라우저 캐시 기록 등을 덤프하십시오 .u 코드를 복사하면 U를 확인하십시오. 도메인 lol로 example.com 변경

— Hazy McGee

2

맨 위 줄 href 인수에 중복 /가 있습니다. 내가 그것을 제거하면 그것은 매력처럼 작동합니다. <link rel = "shortcut icon"href = "favicon.png"type = "image / png">

— drpawelo

4

w3.org/2005/10/howto-favicon 은 태그에 profile속성 을 포함 시키 라고 말합니다 head.

— Rakib

228

대부분의 브라우저는 favicon.ico알리지 않아도 사이트의 루트 디렉토리에서 가져옵니다 . 그러나 항상 새로운 것으로 업데이트하지는 않습니다.

그러나 나는 보통 두 번째 예를 봅니다.

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />

— 코드 크래프트
소스

메타 데이터 나 스크립트 태그보다 먼저 있어야합니까 ?? 또는 문제가 없습니다

— TheLegend

2

<head> 섹션에있는 한 문제가되지 않습니다. 다른 작업에 의존하지 않기 때문입니다.

— Codecraft

126

실제로 모든 브라우저에서 즐겨 찾기 아이콘이 작동하게하려면 올바른 크기와 형식의 이미지가 10 개 이상 있어야합니다.

사람들이 모든 이미지와 올바른 태그를 직접 만들 필요가 없도록 앱 ( faviconit.com )을 만들었습니다 .

네가 좋아하길 바래.

— 에두아르도 루소
소스

6

응용 프로그램을 사랑, 더 학사 - 똑바로에, 이미지는 :) 나에게 시간의 무리를 저장하는 당신에게 모든 파비콘 하나를 만들기 전에 편집 할 수 없습니다

— SidOfc

1

동의, 이것은 훌륭한 응용 프로그램입니다. 모든 이미지 크기가 꼭 필요한 것 같지는 않지만 이미지와 필요한 마크 업 등을 생성하는 것을 좋아합니다. 감사합니다!

— andrhamm

Indeead 훌륭한 앱 : +1 :. 많은 도움을

— Renato Gomes 3:21의

1

그러나 독점적입니다.

— ctrl-alt-delor

작동하지 않습니다.Whoops, looks like something went wrong.

— daka

68

다음은 나를 위해 작동합니다 ...

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

— 제트 블루
소스

40

같은 도구로 Base64로 문자열을 이미지 파일로 변환 이 후 교체 YourBase64StringHere하여 문자열로 아래 코드에서 자리를하고 HTML 헤드 부분에 라인을 넣어 :

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

이것은 브라우저에서 100 % 작동합니다.

— 파 시드
소스

3

서버로 데이터를 전송하지 않고 JavaScript로 변환하는 다른 도구를 찾았습니다. jpillora.com/base64-encoder 또한 끌어서 놓기로 여러 파일을 처리합니다. 페이지를 저장하여 로컬로 사용하십시오.

— 처리

1

"정적 HTML"페이지를 따르고 문서 내에 완전히 포함되어 있기 때문에 최상의 솔루션 인 imho.

— 버팔로 Rabor

1

최고의 솔루션. png 파일에서도 작동합니다. <link href = "data : image / png; base64, YourBase64StringHere"rel = "icon"type = "image / png"/>

— 작센의

1

이렇게하면 모든 페이지에 긴 문자열이 추가됩니다. 사용자에게 거의 전송되지 않는 작은 이미지에는 인라인 base64를 사용하십시오.

— frodeborli

이렇게하면 즐겨 찾기 아이콘이 캐싱되지 않으며, URL을 사용하여 IHMHO마다 매번 전체 문자열을 클라이언트에 전송하므로 브라우저 캐시가 '깨끗해집니다'

— Michiel

34

사용법 구문 : _{^{.ico, .gif, .png,.svg}}

이 표는 favicon주요 브라우저에서 사용 방법을 보여줍니다 . 표준 구현에서는 문서 섹션에 rel 속성이있는 링크 요소를 사용하여 파일 형식과 파일 이름 및 위치를 지정합니다.

대부분의 브라우저는 웹 사이트의 루트에 있는 favicon.ico파일 보다 우선권을 가지 므로 아이콘 링크 태그 는 무시 하십시오.

                                           Edge   Firefox   Chrome   I.E.   Opera   Safari  
 ---------------------------------------- ------ --------- -------- ------ ------- -------- 
  <link rel="shortcut icon"                Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/myicon.ico">                                                    

  <link rel="icon"                         Yes    Yes       Yes      9      Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9      Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon"                         Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.gif">                                                     

  <link rel="icon" type="image/png"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.png">                                                     

  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/image.svg">

파일 형식 지원

다음 표는 이미지 파일 형식 지원을 보여줍니다. favicon .

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

브라우저 구현

아래 표는 즐겨 찾기 아이콘이 표시되는 브라우저의 여러 영역을 보여줍니다.

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

아이콘 파일의 크기는 16x16 , 32x32 , 48x48 또는 64x64 픽셀이고 색상 깊이는 8 비트 , 24 비트 또는 32 비트 입니다.

위의 정보는 일반적으로 정확하지만 특정 상황에서는 몇 가지 변형 / 예외가 있습니다.

^{Wikipedia 의 소스 에서 전체 기사를 참조하십시오 .}

업데이트 : ( "추가 정보")

Google의 "신규"(2019) 기준을 참조하십시오. 검색 결과에 표시 할 파비콘을 정의 하십시오 .
Google의 캐시 된 즐겨 찾기 아이콘 (프로그램 또는 수동)을 검색 할 수 있습니다 과 같은 URL을 사용하여 도메인에 대해 찾기 을 .https://www.google.com/s2/favicons?domain=stackoverflow.com

<img>태그 에서 위의 URL을 직접 사용하면 " "이 (가) 됩니다.
realfavicongenerator.net 을 몇 번 사용 했습니다 . 호환성을 극대화하기 위해 필요한 모든 파비콘 변형을 생성 / 사용자 정의하는 것은 매우 철저합니다. (당신이 찾고있는 경우, 하나의 파비콘 이미지를,이 수입니다 하지 당신을위한 도구가 될!) 간단한 파일 변환의 경우 (예 :., PNG에 ICO, 등) 내가 좋아하는 onlineconvertfree.com .

— 애슐리 도그
소스

15

즐겨 찾기 아이콘이 png 유형 이미지 인 경우 이전 버전의 Chrome에서는 작동하지 않습니다. 그러나 FireFox에서는 제대로 작동합니다. 또한 이러한 작업을 수행하는 동안 브라우저 캐시를 지우는 것을 잊지 마십시오. 여러 번 코드는 괜찮지 만 캐시는 진정한 범인입니다.

— Tanveer Shaikh
소스

1

괜찮아; 어쨌든 이전 버전의 Chrome을 설치 / 보존하기가 매우 어렵습니다.

— Ben Leggiero

14

W3.org 에서 권장하는대로rel 속성을 이를 달성 .

예:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...

— 라훌 데 사이
소스

8

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

— 실로 크
소스

7

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

이것은 나를 위해 일했다

— 아난드 드위 베디
소스

4

당신이 질환자 사용하고 고려 잘못된 때문에 -이 작업을 수 있지만, 당신은 MIME 유형으로 PNG로 / 이미지를 사용할 수 없습니다

— zanderwar

5

나는 오래된 게시물을 알고 있지만 여전히 나와 같은 사람을 위해 게시하고 있습니다. 이것은 나를 위해 일했다

<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />

favicon 아이콘을 루트 디렉토리에 넣으십시오.

— 사이클로트론
소스

4

언젠가 누군가를 도울 수있는 추가 메모로.

이전에 페이지에 아무 것도 에코 할 수 없습니다.

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

ico를로드하지 않습니다

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

잘 작동합니다

— 바트
소스

3

HTML 문서의 헤드 섹션에 있어야하기 때문에 대부분의 브라우저에서 무시됩니다.

— Eric Sebasta 2016 년

예, 누군가 문제가 생길 경우를 대비하여 여기에 넣고 싶었습니다. 내 문제는 "hello"가 디버그 코드 였고 약간 혼란 스러웠습니다.

— bart2puck 2016 년

3

내가 사용하는 convert -resize 16x16 img.png favicon.ico내 이미지를 변환하고, 추가 (리눅스 konsole 바로에) <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">내 헤더와 모든 작업을 완벽에.

— dmx
소스

2

사이트가 subfolderie 로 실행중인 경우 :

http://localhost/MySite/

당신은 그것을 고려해야합니다. ASP.NET앱 에서 그렇게하는 ~경우 URL 앞에 a 를 추가하기 만하면됩니다.

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />

— 세르 사간
소스

2

OP의 업데이트에 따라 로컬로 표시되지 않았지만 OP의 업데이트에 따라 서버에 업로드하면 정상적으로 작동했습니다.

이것은 간단한 정적 HTML 웹 사이트이므로 로컬 웹 서버를 실행하지 않고도 웹 사이트를 작업 할 수 있습니다.
일반적으로 웹 서버는 기본적으로 즐겨 찾기 아이콘 (있는 경우)을 자동으로 제공합니다.

그러나 웹 서버를 실행하지 않는 경우 브라우저 자체는 html 문서에 나열되어 있지 않으면 favicon.ico와 같은 추가 파일을 찾는 디렉토리를 읽지 않습니다.

따라서 head태그에 다음 항목이있는 동안 :

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

나는 또한 'ol'에 대한 언급을 포함 하지 않았다 favicon.ico.
그러나 favicon.ico위에 나열된 이미지 외에도 파일이 포함되었습니다.

다음 줄을 추가하면 :

    <link rel="icon" type="image/x-icon" href="favicon.ico">

그것은 또한 않았다 내가 볼 때, 브라우저에 표시 로컬 파일을 경우에도, 하지 로컬 서버를 통해 서비스를 제공.

따라서 아이콘은 라이브 서버에서 실행될 때 정상적으로 나타나지만 로컬에서는 그렇지 않았습니다.

내가 사용한 파비콘 생성기는 코드, 아이콘, 매니페스트 및 지침을 친절하게 제공했기 때문에 이것을 명시 적으로 언급합니다. 그러나 favicon.ico이미지 에는 이미지가 포함되어 <link>있지만 html문서 에 추가 할 코드 에는 해당 파일에 포함되지 않았습니다 .
서비스 예측은 favicon.ico기본적으로 모든 브라우저에서 자동으로 제공되고 사용되므로 헤드 태그에 "대체"버전 만 명시 적으로 추가해야했습니다.
분명히 파일을 로컬에서 볼 때 (일부 로컬에서 제공하지 않는 경우) 파비콘을보고 싶지 않습니까?

— 셰릴
소스

1

favicon을 root / images 폴더에 favicon.ico라는 이름으로 추가하면 브라우저가 자동으로 favicon을 이해하고이를 favicon으로 가져옵니다. 귀하의 링크는 www.website.com/images/favicon.ico 여야합니다.

자세한 내용은 다음 답변을 참조하십시오.

— 사르 칸
소스

0

FF는와 //같은 URL에 중복이있는 아이콘을로드하지 못합니다 /img//favicon.png. FF 53에서 테스트되었습니다. Chrome은 정상입니다.

— 에티엔 베르 삭
소스

그것은 의견 만큼이나 답 이 아닙니다 . ( " 응답 방법 "참조 )

— ashleedawg

0

사용하려고 <link rel="icon" type="image/ico" href="images/favi.ico"/>

— Subindas 오후
소스

-2

방금 png를 사용했습니다. 흰색 배경을 제거하십시오. 더 나은 아이콘을 만듭니다

— 톰
소스

정적 HTML 페이지에 파비콘 추가