정적 HTML 페이지에 favicon 추가
서버가 다운되었을 때 표시되는 순수 HTML의 정적 페이지가 몇 개 있습니다.제가 만든 favicon(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"/>
하지만 여전히 작동하길 원하지 않습니다.저는 크롬을 사용하여 사이트를 테스트하고 있습니다.위키피디아에 따르면 .ico는 모든 브라우저 유형에서 실행되는 최고의 사진 형식입니다.
갱신하다
코드가 확인되고 있는 것은, 서버가 사이트에 서비스를 개시한 후에만 정상적으로 동작하는 것을 알 수 있습니다만, 로컬로 동작시킬 수 없었습니다.서버에 푸시하여 캐시를 새로 고치면 정상적으로 동작합니다.
.png 이미지 사이에 중할 수 .<head>HTML:
<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
는 ""를 합니다.favicon.ico그러나 항상 새 디렉토리로 바로 업데이트하지는 않습니다.
하지만, 저는 보통 당신의 두 번째 예를 들겠습니다.
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
실제로 모든 브라우저에서 favicon을 작동시키려면 올바른 크기와 형식의 이미지가 10개 이상 있어야 합니다.
앱(faviconit.com)을 만들었기 때문에 이 모든 이미지와 올바른 태그를 손으로 만들 필요가 없습니다.
마음에 드셨으면 좋겠네요.
사용 구문:
다음 표에서는 주요 브라우저에서 를 사용하는 방법을 보여 줍니다.표준 실장에서는 링크 요소가 사용됩니다.rel<head>파일 형식 및 파일 이름/장소를 지정하는 섹션입니다.
대부분의 브라우저는 웹 사이트의 루트에 있는 파일에 우선순위를 부여하므로 아이콘 링크 태그는 무시됩니다.
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 No
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
브라우저 구현
다음 표에 favicon이 표시되는 브라우저의 다양한 영역을 나타냅니다.
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
아이콘 파일의 크기는 16×16, 32×32, 48×48 또는 64×64 픽셀, 색 농도는 8비트, 24비트 또는 32비트입니다.
위의 정보는 일반적으로 올바르지만 상황에 따라 몇 가지 변형/예외가 있습니다.
자세한 내용은 Wikipedia 소스를 참조하십시오.
업데이트:
검색 결과에 표시할 favicon 정의에 대한 Google의 "새로운"(2019) 기준을 참조하십시오.
다음과 같은 URL을 가진 도메인에 대해 Google의 캐시된 favicon을 검색할 수 있습니다(프로그래밍 또는 수동으로).
을 'URL'에서
<img>반환: " " "realfavicongenerator.net은 호환성을 최대화하기 위해 필요한 모든 favicon 종류를 생성/맞춤하여 매우 철저합니다.(단, favicon 이미지를 1개만 찾으시는 경우에는 이 툴이 아닐 수 있습니다!)간단한 파일 변환(예:
PNG로로 합니다.ICO등) 저는 onlineconvertfree.com을 좋아합니다.
다음과 같은 도구를 사용하여 이미지 파일을 Base64 문자열로 변환한 후YourBase64StringHere아래 스니펫에 플레이스홀더 문자열과 함께 HTML 헤더 섹션에 행을 입력합니다.
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
브라우저에서는 100% 동작합니다.
W3.org에서 권장하는 바와 같이rel속성을 지정합니다.
예:
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
favicon이 png형 이미지라면 이전 버전의 Chrome에서는 작동하지 않습니다.하지만 Fire Fox에서는 잘 될 거야.또한 이러한 작업을 수행하는 동안 브라우저 캐시를 지우는 것도 잊지 마십시오.대부분의 경우 코드는 정상이지만 캐시가 진범입니다.
<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"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
이건 내게 효과가 있었다.
오래된 게시물은 알지만 나 같은 사람을 위해 게시물을 올린다.이건 내게 효과가 있었다.
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
루트 디렉토리에 favicon 아이콘을 놓습니다.
"type" 특성을 사용하지 않는 최소 favicon
<link href='favicon.png' rel='icon' />
견적을 생략할 수도 있지만 실제 생산에서는 권장하지 않습니다.
OP의 업데이트에서는 로컬로 표시되지 않았지만, OP의 업데이트에서는 서버에 업로드하면 문제가 없었습니다.
심플하고 정적인 HTML 웹사이트이기 때문에 로컬 웹 서버를 실행하지 않고 작업할 수 있습니다.
웹 서버는 일반적으로 favicon(있는 경우)을 자동으로 제공합니다.
그러나 웹 서버를 실행하지 않을 경우 브라우저 자체는 html 문서에 나열되지 않는 한 추가 파일을 찾는 디렉터리만 읽을 수 없습니다.
그래서, 제가 아래 아이템을 가지고 있는 동안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 generator가 코드, 아이콘, 매니페스트, 지시사항을 친절하게 제공해 주었기 때문에 특별히 언급합니다.단, 이 명령어에는favicon.ico이미지, 이미지에는<link>코드의 그 파일에 추가하다html문서.
제 생각에 그 서비스는favicon.ico는 기본적으로 모든 브라우저에서 자동으로 제공되고 사용되므로 헤드태그에 명시적으로 추가할 필요가 있습니다.
파일을 로컬로 볼 때(일명 로컬로 볼 수 없음) favicon을 보는 데 관심이 없다는 점을 고려하지 않는 것은 분명합니다.
언젠가 누군가에게 도움이 될지도 모르는 추가 메모로요.
이전 페이지에는 아무것도 에코할 수 없습니다.
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
정상적으로 동작하다
하였습니다.convert -resize 16x16 img.png favicon.ico konsole에서)하고 (Linux konsole)을 추가합니다.<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">모든 게 완벽하게 작동해요
favicon.ico 브라우저라는 이름의 root/images 폴더에 favicon을 추가하면 자동으로 favicon으로 인식되어 취득됩니다.테스트도 하고 작업도 했어요.링크는 www.website.com/images/favicon.ico이어야 합니다.
자세한 내용은 다음 답변을 참조하십시오.
<link rel="icon" href="conticon.ico" type="image/x-icon" />을 포함해야 합니까?
가 「」로서하고 있는 는, 의 점에 해 주세요.subfolder 삭제,
http://localhost/MySite/
이치노「 」에서 있는 는, 「 」로 .ASP.NET.~URL 입니다.
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
FF가 있는 할 수 .//"URL"과 /img//favicon.pngFF 53 서 ff ff ff ff ff 。크롬도 괜찮아요.
도 한번 .<link rel="icon" type="image/ico" href="images/favi.ico"/>
언급URL : https://stackoverflow.com/questions/9943771/adding-a-favicon-to-a-static-html-page
'code' 카테고리의 다른 글
| 빌드 후 이벤트 실행 PowerShell (0) | 2023.04.08 |
|---|---|
| 다른 div 내부의 div를 수직으로 중심 맞춤 (0) | 2023.04.08 |
| CSS를 사용하여 요소 배경의 불투명도를 낮추려면 어떻게 해야 합니까? (0) | 2023.04.08 |
| 사용자가 DIV 바깥쪽을 클릭할 때 jQuery를 사용하여 DIV 숨기기 (0) | 2023.04.08 |
| SQL 쿼리에서 변수를 설정하는 방법 (0) | 2023.04.08 |