정적 HTML 페이지에 파비콘 추가
서버가 다운 될 때 표시되는 순수한 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는 모든 브라우저 유형에서 실행되는 최고의 그림 형식입니다.
최신 정보
코드가 확인했지만 서버가 사이트를 제공하기 시작한 후에 만 제대로 작동한다는 것을 확인했지만 로컬에서 작동하도록 만들 수 없습니다. 서버로 푸시하고 캐시를 새로 고치면 제대로 작동합니다.
16x16 .png를 만든 다음 <head>정적 HTML 문서 의 태그 사이에 다음 스 니펫 중 하나를 사용할 수 있습니다 .
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
대부분의 브라우저는 favicon.ico알리지 않아도 사이트의 루트 디렉토리에서 선택합니다 . 그러나 그들은 항상 즉시 새로운 것으로 업데이트하지는 않습니다.
그러나 일반적으로 두 번째 예제로 이동합니다.
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
실제로 모든 브라우저에서 파비콘이 작동하도록하려면 올바른 크기와 형식의 이미지가 10 개 이상 있어야합니다.
사람들 이이 모든 이미지와 올바른 태그를 손으로 만들 필요가 없도록 앱 ( faviconit.com )을 만들었습니다 .
너가 좋아하길 바래.
다음은 나를 위해 작동합니다 ...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
같은 도구로 Base64로 문자열을 이미지 파일로 변환 이 후 교체 YourBase64StringHere하여 문자열로 아래 코드에서 자리를하고 HTML 헤드 부분에 라인을 넣어 :
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
이것은 브라우저에서 100 % 작동합니다.
사용법 구문 : .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
Browser Implementation
The table below illustrates the different areas of the browser where favicon's are displayed:
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
Icon files can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.
While the information above is generally correct, there are some variations/exceptions in certain situations.
See the full article at the source on Wikipedia.
If the favicon is a png type image, it'll not work in older versions of Chrome. However it'll work just fine in FireFox. Also, don't forget to clear your browser cache while working on such things. Many a times, code is just fine, but cache is the real culprit.
As recommended by W3.org, you can use the rel attribute to achieve this.
Example:
<head>
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
...
<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"/>
This worked for me
I know its older post but still posting for someone like me. This worked for me
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
put your favicon icon on root directory..
as an additional note that may help someone some day.
You can not echo anything to the page before:
Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
will not load ico
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello
works fine
I used convert -resize 16x16 img.png favicon.ico (on linux konsole) to convert my image, and add <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> to my header and everything work perfect.
If you add the favicon into the root/images folder with the name favicon.ico browser will automatically understand and get it as favicon.I tested and worked. your link must be www.website.com/images/favicon.ico
For more information look this answer:
Do you have to include <link rel="icon" href="favicon.ico" type="image/x-icon" />?
Notice that if your site is running as a subfolder ie:
http://localhost/MySite/
You will need to take that into account. If you are doing so from an ASP.NETapp all you need to do is add a ~ to the front of the URL:
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
Note that FF fails to load an icon with a redundant // in URL like /img//favicon.png. Tested on FF 53. Chrome is OK.
Try to use the <link rel="icon" type="image/ico" href="images/favi.ico"/>
참고URL : https://stackoverflow.com/questions/9943771/adding-a-favicon-to-a-static-html-page
'your programing' 카테고리의 다른 글
| 잘못된 Git 브랜치에 대한 커밋을 수정하는 방법은 무엇입니까? (0) | 2020.10.03 |
|---|---|
| Vim에서 수직 분할에서 수평 분할로 빠르게 전환하려면 (0) | 2020.10.03 |
| Node.js 빠른 파일 서버 (HTTP를 통한 정적 파일) (0) | 2020.10.03 |
| URL 매개 변수 jquery 가져 오기 또는 js에서 쿼리 문자열 값을 가져 오는 방법 (0) | 2020.10.03 |
| Java에서 정적 메서드가 추상이 될 수없는 이유 (0) | 2020.10.03 |