작은 파비콘이 또 다른 HTTP 요청을 요구하는 것은 바보가 아닌가? 파비콘을 스프라이트에 어떻게 넣을 수 있습니까?

306

누구나 HTML로 favicon.ico 링크를 설정하는 방법을 알고 있습니다.

<link rel="shortcut icon" href="http://hi.org/icon.ico" type="image/x-icon">

그러나 작은 몇 바이트 아이콘의 경우 또 다른 HTTP 요청 이 필요하다는 것은 바보 같은 생각 입니다. 그래서 background-position=0px -200px;귀중한 HTTP 요청을 가속화하고 저장하기 위해 어떻게 이미지를 스프라이트 (예 :)의 일부로 만들 수 있을지 궁금했습니다 . 로고와 다른 아트 워크를 사용하여 기존 스프라이트 이미지로 가져 오려면 어떻게해야합니까?

favicon.ico폭포 그래프의 항목 번호 31을 가리키는 로봇 이 내 애완 동물 ZAM입니다. 그는 일반적으로 더 행복하고 웹에서 창의적인 업그레이드를 할 때가되었음을 알려주는 좋은 지적을 가지고 있습니다.하지만 그와 나는 그의 복장에 동의하지 않습니다.

여기에 이미지 설명을 입력하십시오

javascript  html  css  performance  favicon 
— 샘
소스
47
.css / .js / .png / .html을 하나의 최적화 된 스트림으로 결합 할 수있는 방법이 아직 어리석지 않습니까? 당신은 누군가가 지금까지이 아이디어를 생각 해낼 것이라고 생각했을 것입니다
— RichardTheKiwi
9
@ 리차드 관련 : 여러 부분 응답 및 구글로 해결할 수있는 문제는이, 내가 그 이름 ... 잊었 새로운 최적화 된 웹 프로토콜에 대한 주도권이 편집 : 그것은라는 것 SPDY . 그러나 그것은 분명히 미래에 있습니다.
— Pekka
9
@Richard 일명 cyberkiwi, data:이미지 값과 스크립트를 인라인으로 html 파일에 모든 것을 넣을 수 있습니다 .
— zzzzBov
39
btw, nice sketch man :)
— Fatih Acet 2016 년
18
스케치를 위해 +1 :)
— Giuliano

답변:

140

@yc의 대답 을 약간 개선하면 일반적으로 사용 및 캐시되는 JavaScript 파일에서 base64로 인코딩 된 favicon을 주입 favicon.ico하고 관련 meta태그 에 데이터 URI를 제공하여 요청의 표준 브라우저 동작을 억제합니다 .

이 기술은 추가 http 요청을 피하고 Windows 7의 최신 버전의 Chrome, Firefox 및 Opera에서 작동하는 것으로 확인되었습니다. 그러나 Internet Explorer 9에서는 작동 하지 않는 것 같습니다.

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- Suppress browser request for favicon.ico -->
        <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
        <script src="script.js"></script>
...

script.js

var favIcon = "\
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABrUlEQVR42mNkwAOepOgxMTD9mwhk\
[...truncated for brevity...]
IALgNIBUQBUDAFi2whGNUZ3eAAAAAElFTkSuQmCC";

var docHead = document.getElementsByTagName('head')[0];       
var newLink = document.createElement('link');
newLink.rel = 'shortcut icon';
newLink.href = 'data:image/png;base64,'+favIcon;
docHead.appendChild(newLink);

/* Other JS would normally be in here too. */

데모 : turi.co/up/favicon.html

— 마르셀
소스
3
@Marcel의 아름다운 캐시 된 혁신 +1 PS HTTP Headers Response내 .ico 파일 의 문자 는 내 아이콘과 거의 같은 크기입니다 !! 당신은 어떻게 그것을 좋아합니까?
— Sam
2
@ Sam : Stack Overflow favicon.ico 파일 과 동등한 PNG 의 base64 가 절반 크기 임을 알았습니다 . 멋지고 컴팩트합니다.
— Marcel
1
eeehm 나는 당신이 무엇을 의미하는지 잘 모르겠습니다 : '파일은 절반 크기였습니다 ...? icon.png와 같은 PNG 파일? 또는 아이콘 형식 또는 gif 대신 png 형식의 base64가 더 작다는 것을 의미합니까? 궁금한. 힘내 친구 야!
— Sam
1
@ Sam : 이 PNG 의 base64를이 ICO 파일 의 base64와 비교하고있었습니다 . 위의 예제 코드에서 사용 된 PNG 버전은 절반 크기입니다.
— Marcel
1
아, 알다시피, 당신의 base 64가 대답하고 base64 PNG 형식의 일반적인 사용이 선호되는 선택입니까?
— Sam
148

대부분의 경우 다른 HTTP 요청은 일반적으로 첫 번째 액세스 후 브라우저 캐시에 덤프되므로 다른 HTTP 요청이 발생하지 않는다고 생각합니다.

이것은 실제로 제안 된 "솔루션"보다 효율적입니다.

— 제임스 앤더슨
소스
52
이것이 유일하게 합리적인 답변입니다. 이 문제는 해결해야 할 문제가 아닙니다.
— JoDG
1
제임스, 내 솔루션은 실제로 가능성 일 뿐이지 만 실제로는 누군가에게 권장하지 않는 솔루션입니다. 그러나 대부분의 브라우저는 새 브라우저 세션이 시작될 때 파비콘에 대한 새로운 HTTP 요청을 발행하는 것으로 보입니다. 그리고 항상 304를 반환하지는 않습니다.
— Yahel
4
브라우저는 브라우저 캐시에 있어도 HEAD 호출을 수행하므로 여전히 HTTP 요청의 오버 헤드가 발생합니다.
— dietbuddha
3
실제로 모든 것은 브라우저에 따라 다릅니다. 그들 대부분은 것입니다 항상 페이지가 그것을 언급마다 새로 고침에 대한 HEAD 통화를하지 않는 경우에도 일부 지역에서 파비콘을 위해 찾습니다.
— David Costa
14
파비콘은 좋은 정적 리소스처럼 긴 만료 헤더를 필요로합니다. 이를 통해 HEAD 호출조차 억제됩니다.
— Paul Alexander
102

데이터 URI를 사용해 볼 수 있습니다. HTTP 요청이 없습니다!

<link id="favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,....==">

페이지에 정적 캐싱이 없으면 즐겨 찾기 아이콘을 캐시 할 수 없으며 즐겨 찾기 아이콘 이미지의 크기에 따라 소스 코드가 부풀어 질 수 있습니다.

데이터 URI 즐겨 찾기 아이콘은 대부분의 최신 브라우저에서 작동하는 것 같습니다. Mac의 최신 버전의 Chrome, Firefox 및 Safari에서 작동합니다. Internet Explorer 및 일부 버전의 Opera에서는 작동하지 않는 것 같습니다.

Old IE가 걱정된다면 (그리고 요즘은 안될 수도 있음), 기존 Internet Explorer는 기존 favicon.ico를 전통적인 방식으로로드하는 IE 조건부 주석을 포함시킬 수 있습니다. 지원 데이터 URI Favicons

`<!--[if IE ]><link rel="shortcut icon" href="http://example.com/favicon.ico"  type="image/x-icon" /><![endif]--> `
  1. favicon.ico 파일을 루트 디렉토리에 포함시켜 두 가지 방법으로 요청하는 브라우저를 포함하십시오. 브라우저에서 수행 한 작업에 상관없이 이미 확인중인 경우 404 응답으로 HTTP 요청을 낭비하지 않을 수 있습니다. .

다음과 같이 인기있는 다른 사이트의 즐겨 찾기 아이콘을 사용하여 즐겨 찾기 아이콘을 캐시 할 수도 있습니다. http://google.com/favicon.ico .

댓글 작성자가 지적했듯이, 일부 브라우저는 우리가 고안 한 트릭에 관계없이 favicon.ico를 요청 하기 때문에 그렇게 할 수 있다고해서 꼭 그런 것은 아닙니다. 이렇게하면 저장되는 오버 헤드의 양은 gzipping, 정적 콘텐츠에 대한 미래의 만료 헤더 사용, JavaScript 파일 축소, 스프라이트 또는 데이터 URI에 배경 이미지 삽입 등의 작업을 통해 얻을 수있는 비용에 비해 미미한 수준입니다. CDN 등에서 정적 파일 제공

— 야헬
소스
1
@Pekka 예, 캐시되지 않은 페이지의 추가 바이트 가중치 데이터 URI가 아마도 해당 HTTP 요청의 가중치보다 크기 때문에 실제로 실용적인 솔루션은 아닙니다. OP는 favicon을 DOM에 비동기 적으로 삽입 할 수 있습니다.
— Yahel
4
@Sam 죄송합니다. @yc가 의미하는 바를 이해합니다. 물론 <link rel>JavaScript를 통해 브라우저 의 요소에 완벽하게 액세스 할 수 있습니다. 가능해야합니다. 나는 심지어 그런 식으로 프로그램 된 게임을 보았지만 IE에서도 작동하지 않는 것 /favicon.ico
— 같
2
@Pekka, 알겠습니다. 추신 : 그것은 놀라운 게임입니다! 16x16 픽셀의 하하이기 때문에 전체 화면 영역을 수치스럽게 만듭니다. 이 하이퍼 링크는 해당 파비콘으로 실제로 가능한 것에 대한 몇 가지 가능성을 열어줍니다.
— Sam
3
파비콘 선언이 누락 된 경우 모든 브라우저는 자동으로 기본 URL /favicon.ico을 찾기 위해 기본 URL 을 요청 합니다. 따라서 즐겨 찾기 아이콘 <link>(나중에 자바 스크립트를 통해 추가)을 생략하면 상황이 악화 될 수 있습니다.
— Már Örlygsson
2
그냥 favicon.ico를 사용하여 투명 필름을 저장하십시오. :)
— markijbema
21

다음과 같이 base64로 인코딩 된 파비콘을 사용할 수 있습니다.

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAACbUlEQVRIx7WUsU/qUBTGv96WSlWeEBZijJggxrREdwYixMnByYEyOvgfsBAMG0xuDsZ/QGc3NDFhgTioiYsmkhBYGLSBkLYR0va8gSjvQXiIT7/l5ibfOd/v3pN7gSmVSMTj8ThRfzdYk8lkMpl83/+AVFVVVXU0eHiVJEmSpB8DIcpkMplsdhCYz+fzhQJROBwOh8PDQN+oQCAQCASIRFEURZHI45GkP0/e7Xa73e70AMJnjel0Op1OA6oaDB4eAkAw6PcDvZ5t6zrw/Hx2trAw/cHYZ426ruu6DtzcGEYuBzQa19etFvD4WKtls4AoRqMPDwBjjLGPrt84ilgsFovF6EOapmmaRiP6O/jbAIguL4vFYpHGqlKpVCoVomq1Wq1Wibxer9fn+w+Q9+cUiUQikQhNrfdgWZZlWf4yyGhj27Zt254MUK/X6/X6F0aiKIqiKIOCYRmGYRjGZADLsizLIgqFQqHV1SkAnp5OTn79ItK0qyuPZ7SxaZqmaU4GKJfPzxmbfAPc/f3pqaIQLS8vLtZqgOP0bYyJoiAARC5Xrwf4/Vtbb2+Th1YqlUqlErC01GgkEkCz2WxyHLC+LsuiCAiCJLlcgM+3vd3pcBzXaJTLR0dEs7Ptdv+D4TiOG/A6DsBxQKvV621sAGtru7vl8ngAjuvXv7xcXIgiwNjMjCj2h+k4fQfPA4LA8xwHCO323V2hABiG223bwPy8xwMAbvfcHGMAY32j47y+3t4OAsZpZ2dzEwAsy7IcBxAExhwHMIxOx3GAlZVUyjT/1WFIudzenstFlEpFo9M8o+Pj/X2eJzo4SCR4fnzdb2N4Pyv9cduVAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
— 동성 카이
소스
1
힌트 :이 답변에 사용 된 base64로 인코딩 된 문자열은 PNG 파일이며 IE10 이전 버전에서는 작동하지 않습니다.
— sibbl
2
누구나 알고 싶어하는 경우 그것은 리눅스 펭귄입니다.
— Martlark
17

이 페이지 에서 흥미로운 해결책을 찾았습니다. . 독일어이지만 코드를 이해할 수 있습니다.

아이콘의 base64 데이터를 외부 스타일 시트에 넣으면 캐시됩니다. 웹 사이트 헤드에서 ID가있는 즐겨 background-image찾기 아이콘을 정의해야하며 해당 즐겨 찾기 아이콘이 해당 ID의 스타일 시트에서 로 설정되어 있습니다.

link#icon {
    background-image:url("data:image/x-icon;base64,<base64_image_data>");
}

그리고 HTML

<html>
    <head>
        <link id="icon" rel="shortcut icon" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="/styles.css" />
        ...
    </head>
    <body>
        ...
    </body>
</html>
— 펠릭스 게넨
소스
8
이 페이지 어딘가에 명성이 74.947 인 사람이 "당신은 할 수 없습니다!"라고 말했습니다. ... 그런 다음 명성이 50 명 미만인 다른 사람이 말했습니다 : "당신은 할 수 있습니다!" 이는 솔루션을위한 드라이브와 혁신적인 혁신적인 드라이브가 명성을 얻지 못하는 관계가 없다는 것을 의미합니까? ... 그럼 굉장합니다!
— Sam
4
방금이 솔루션 이 작동하지 않는다는 것을 확인했습니다. – 적어도 Windows의 Chrome 10 및 Firefox 3.6에서는
— Már Örlygsson
13
방금이 솔루션 이 작동 한다는 것을 확인했습니다 . 적어도 W7 64 비트의 Chrome 10.0.648 및 W7 64 비트의 FF 4.0
— Sam
4
LOL, 나는 약간 다른 버전 번호에도 불구하고 위의 두 진술이 모순되는 것으로 확인했습니다 .Chrome의 동작이 그렇게 많이 바뀌지 않았을 것입니다. Firefox는 3.6에서 4로 나왔지만 Chrome 10이 사소한 업데이트로 많이 변경되지는 않았습니다.
— dyasta
나는이 것을 확인할 수 있습니다 작업을 수행 크롬 (83)와 우분투 20.04 파이어 폭스 ESR (68)에, 나는 그것을 확인할 수 있습니다 작동하지 않습니다 /favicon.ico에 타격을 방지 할 수 있습니다. 따라서 이미지를 얻지 만 추가 SSL 연결을 막지는 않습니다. 그것이 목표 였으므로 이것은 실패입니다.
— 윌
14

좋은 지적과 좋은 생각이지만 불가능합니다. 파비콘은 하나의 개별 리소스 여야합니다. 다른 이미지 파일과 결합 할 방법이 없습니다.

— 페카
소스
1
어쩌면 내가 장님이지만 Google 검색 즐겨 찾기 아이콘이 보이는 유일한 장소는 스프라이트입니다. google.com/search?q=foo
— Yahel
4
@yc google.com/favicon.ico 는 브라우저가 자동으로 검색하는 장소입니다.
— Pekka
3
@yc 당신은 장님이 아니며, Pekka가 이미 지적했듯이 /favicon.ico브라우저가 자동으로 보이는 곳입니다. 파비콘이 존재하지 않으면, 약간의 지연을 야기하는 오류 404 페널티를 의미합니다 !! 이 파비콘 던전에서 탈출하지 못하는 것 같습니다. 그들은 너무 작지만 오 너무 강력 ... dammit :)
— Sam
올바른 방법으로 속도를 높이는 올바른 방법 은 내 답변 stackoverflow.com/questions/5199902/… 를 참조하십시오 .
— Matt Joiner
8
이것은 현실적으로 한 번만 요청하면 거의 영원히 지속되어야한다는 점에 유의해야합니다. 다른 모든 것들과 마찬가지로, 긴 캐시 타이머와 서버에 의해 반환되는 적절한 301은 파비콘 요청을 방해하지 않습니다 (존재하지 않는 한).
— 케빈 페노
9

정말 문제가 되나요?

많은 브라우저가 우선 순위가 낮은 즐겨 찾기 아이콘을로드하여 페이지로드를 차단하지 않으므로 추가 요청이지만 중요한 경로는 아닙니다.

JS가 검색되고 실행될 때까지 아래의 모든 DOM 요소가 렌더링에서 차단되고 요청 수를 줄이지 않기 때문에 허용 된 솔루션은 끔찍합니다!

— 앤디 데이비스
소스
8

올바른 해결책은 HTTP 파이프 라이닝 을 사용하는 것 입니다.

HTTP 파이프 라이닝은 대응하는 응답을 기다리지 않고 여러 개의 HTTP 요청을 단일 소켓에 기록하는 기술입니다. 파이프 라이닝은 1.0이 아닌 HTTP / 1.1에서만 지원됩니다.

서버가이를 지원해야하지만 반드시 참여할 필요는 없습니다.

HTTP 파이프 라이닝을 위해서는 클라이언트와 서버 모두 지원해야합니다. 파이프 라이닝을 지원하려면 HTTP / 1.1 호환 서버가 필요합니다. 이는 서버가 응답을 파이프 라인하는 데 필요하지는 않지만 클라이언트가 파이프 라인 요청을 선택하는 경우 실패하지 않아야 함을 의미합니다.

많은 브라우저 클라이언트는 필요할 때하지 않습니다.

대부분의 브라우저에서 HTTP 파이프 라이닝이 비활성화되어 있습니다.

  • Opera에는 기본적으로 파이프 라이닝이 활성화되어 있습니다. 휴리스틱을 사용하여 연결된 서버에 따라 사용되는 파이프 라이닝 수준을 제어합니다.
  • Internet Explorer 8은 버그가 많은 프록시 및 헤드 라인 차단과 관련된 문제로 인해 요청을 파이프 라인하지 않습니다.
  • Mozilla 브라우저 (예 : Mozilla Firefox, SeaMonkey 및 Camino)는 파이프 라이닝을 지원하지만 기본적으로 비활성화되어 있습니다. 특히 휴리스틱을 사용하여 IIS 서버의 파이프 라이닝을 해제합니다.
  • Konqueror 2.0은 파이프 라이닝을 지원하지만 기본적으로 비활성화되어 있습니다.
  • Chrome은 파이프 라이닝을 지원하지 않습니다.

Firefox에서 파이프 라이닝을 활성화하고 거기서 시도하거나 Opera (shudder)를 사용하는 것이 좋습니다.

— 매트 소목 장이
소스
7
전송 계층에서 수행 된 최적화 파이프 라인 그것은 여전히 ​​favicon에 대한 별도의 HTTP 왕복을 포함합니다.이 질문에 대한 것입니다.
— Már Örlygsson
@ Már Örlygsson 맞지 않습니다. 왕복은 클라이언트가 요청을 한 다음 요청이 처리되고 응답이 다운로드 될 때까지 기다려야 함을 의미합니다. 파이프 라이닝은 이전 요청이 완료되기를 기다리는 동안 요청이 이미 전송되었음을 의미하므로 동일한 단계가 진행되는 동안 발생하는 지연은 동일하지 않습니다 ...
— Peter
1
Sam은 모든 방문자의 브라우저에서 파이프 라인을 켤 수 없기 때문에이 솔루션으로 인해 사이트를 더 빨리로드 할 수는 없습니다 (개인적으로는 제외).
— Már Örlygsson
3
@Mrr Örlygsson과 그의 지지자 : 그것은 운송 계층에서 이루어지지 않았습니다. 실제 모델에서는이 모든 것이 애플리케이션 계층에서 수행됩니다. 이론적으로 파이프 라이닝은 세션 계층에 있어야합니다.
— Matt Joiner 2016
4
나는 당신과 그 의미론을 주장하지 않을 것입니다. 사실은 Sam이 파이프 라인 지원을 사용하여 방문자를 위해 사이트로드를 더 빠르게 할 수는 없습니다 (파이프 라이닝 지원은 A) 사용자가 지적한대로 뾰족하고 B는 각 사이트별로 옵트 인함) 개별 사용자.
— Már Örlygsson
6

실제로 질문에 대한 답변이 아니라 Marcel 과 yahelc 의 답변을 칭찬 하기 위해 404 favicon 문제에 대한 우아한 해결책을 제공합니다.

일부 앱과 브라우저 및 favicon.com을 확인하지 않고 사이트 루트에 아이콘이 없으면 204 응답 헤더 를 사용하여 요청에 간단히 응답 할 수 있습니다 .

아파치 예제 :

.htacces 또는 .conf의 Apache 옵션 하나 (그리고 내가 좋아하는 것), 간단한 하나의 라이너 :

Redirect 204 /favicon.ico

아파치 옵션 2 :

<Files "favicon.ico">
    ErrorDocument 204 ""
</Files>

자세한 내용은 Stoyan Stefanov의 http://www.phpied.com/204-no-content/ 블로그 게시물이 있습니다 .

— 안토니 핫 조풀 로스
소스
그러나 요청이 이루어지고 파비콘이 종종 의미있는 방식으로 사용되는 것처럼 빈 응답보다는 아이콘을 제공하는 것이 좋습니다. 아이콘을 통해 gzip을 자주합니다 압축 어쨌든 하나의 TCP 패킷 크기에 그것을 얻을
— 앤디 데이비스
5

좋은 생각이지만 Google이 홈페이지에서하지 않은 경우 (현재) 할 수 없다고 내기하고 있습니다.

— cusimar9
소스
13
구글은 훌륭하지만 그런 생각은 비생산적이고 번거로운 것처럼 보인다. 항상 새롭고, 더 좋고, 가능한 일을하는 방법이 있으며, 업계 리더를 위해 일할 필요가 없습니다.
— 구문 오류
9
분명히, 구글은 다른 방식으로가 아니라 SO로부터 아이디어를 얻습니다.;)
— user123444555621
3
정답은 구글이 페이지를 더 빨리 만들 수 있다면 가능할 것이다.
— David d C e Freitas
5

죄송하지만 파비콘을 다른 리소스와 결합 할 수는 없습니다.

이것은 기본적으로 두 가지 옵션이 있음을 의미합니다.

  1. 즐겨 찾기 href아이콘이없는 사이트에 익숙한 경우 이미로드 된 비 아이콘 리소스 (예 : 스타일 시트, 스크립트 파일 또는 프리 페치로 혜택을받는 일부 리소스)를 가리킬 수 있습니다. .)
    (간단히 테스트 한 결과 이것이 대부분의 주요 브라우저에서 작동하는 것은 아닙니다.)

  2. 추가 HTTP 요청을 수락하고 즐겨 찾기 아이콘 파일에 공격적인 HTTP 캐시 제어 헤더가 설정되어 있는지 확인하십시오.
    제어 할 수있는 다른 웹 사이트가있는 경우 다른 정적 리소스와 함께이 웹 사이트의 즐겨 찾기 아이콘을 미리로드 할 수도 있습니다.

작동하지 않는 PS Creative 솔루션 :

  • 이상한 CSS 데이터 URI 트릭 (코멘트 작성자 Felix Geenen에 의해 링크 됨) 이 작동하지 않습니다 .
  • Javascript를 사용하여 favicon <link>요소의 주입 지연 (사용자 @yc에서 제안한대로)을 수행하면 HTTP 요청이 두 번 발생하여 상황이 악화 될 수 있습니다.
— 마르 올리 그손
소스
1
작동하지 않는 다른 솔루션 : .ico의 여러 아이콘 및 이미지 태그에서 ico를 사용하여 favicon이 아닌 다른 그림을 표시하기를 희망합니다. 파비콘을 다른 파일과 함께 모으기.
— markijbema
3

더 작은 데이터 공간을 위해 ICO 형식 대신 8 비트 PNG를 사용할 수 있습니다. 변경해야 할 것은 "data : image / x-icon"MIME 유형 헤더 대신 "data : image / png"를 사용하는 것입니다.

<link
  href="data:image/png;base64,your-base64-encoded-string-goes-here"
  rel="icon" type="image/png"
/>

"type"속성은 "image / png"또는 "image / x-icon"일 수 있으며 둘 다 작동합니다.

gimp 또는 convert를 사용하여 ICO를 8 비트 png로 변환 할 수 있습니다.

convert favicon.ico -depth 8 -strip favicon.png

base64 명령을 사용하여 PNG 바이너리를 base64 문자열로 인코딩하십시오.

base64 favicon.png
— 안드레이
소스
2

가장 쉬운 방법은 다음과 같습니다.

<!DOCTYPE html><html><head> 
<link rel="shortcut icon" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAA
lwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3
JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9y
Zy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdG
lvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25z
LmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj
4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAg
PC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAABLJJREFUWAnFV+trW2UY/yVN0j
S32q6bnWunQ1e11k3YXMUy8AbDoSBDv4mfFPTj/gD9ug/7B/woqCCISnGItcyppbgN
Rhn2st5G2yxt1svSJe1yPYnP703fcs7JSZo4YS9Ncs57eX6/5/Y+T12fX7hYdAHy92
iG+1GCU2X3/6V3k9sNl8uFUqnUkMiHJkDfuQV4M7WFbC4Hr8fTEAlPQ3RtmwleFI0z
mQxO95/EQP8pLEaj+PaHQbS3RmAUi7YTla8PRYDGLhgGPnz/HI719Srp0VgMhszRHf
WM/+wC+jy1tY2zb72uwOl7WmPi1gwCfr887609CdZtAfpZa0XNc/k8nug8gBPHjylF
uTY7N4/JmVmEQkFlBbWwx9eeBNyiKbVLZ7IKlEAtomEmm0Vvz1G0tLQoiKXoHXzz/Y
9qX75QgM/jhb/ZB5KtlRk1CdDM2+k0SKLn6SM4KBoXRHhsOY6J2XmsbWxgdv42Jqdn
cH3sJo4c7sKhg50oFku4s7yMuYUleJqahEizzDm7pCoBgt8XH7/Q8wzOvPmamLtz1w
UMvPjdu1hYjIrPp9He9hjOf/oJ9rW37e5hBiwuRXFpaBjR5RWEgkFHEq4vLlysuDkI
nhTwV068hPfeOau0oJ21KXUsKNvbvux7suKq734axNT0nLhOLCHuNI8KC1B4Wg7RnO
++fUaB03x0gxlYA1EYZcoxta73cJ3PD8SFuWxOnbdCl2k4EuCN9sbpATT7fMpsBLcP
DcR5gpuHBk8mU/jyq6+xcW8TYckMpziwSKagvKTX4x0deOpwt5JpBjKD1PM8eu064q
vraI2EHcEpw0pAqnK+YODA/n3wS6pxNEpAa58TK05IdoQl+AyjoGQ5fVkI0JbFoqEi
tlFgu/C01IeM3B2UY4s7y1YrAbXUeEm1SNx58Un8sDJKiNbsdiwEaD6m4JakoFPAOA
HZ57TleFs+2d2lMsotl1G1YSHATR5PEzYSCXXt8p2kGh36zED/y+o8qyNridOwEOBB
j5htI7GJ1bU1p/11zZX9XkJ31yF89MG5nTpScAxoCwFKZ86z8NxeWKwLrNom7YrjL/
bh/GcfY39Hu2RYJYkKAvR9KBjAjZv/CJHMThQ37gYS066IhMNgWmpSZtIVBHio2euV
AhLH+OSU2qsFmQ828jx69Rpi8VX4vJX9YgUBCmbBCIsVhv8cQTKVKt/jDsFIYvpjJ0
RLUuPYygqujF5FG3tEo7IkOxKgUObwvcR9DF2+omRTmE5NDco5/dFzSoGd4sWaMvjL
kCJZJQmsV7FZC9bziBSQv2+M4Y+RUbWki5IGZXPC1oy/eo4buY9W/PnX3zC/uFTuEa
VJcRoV1dC8iSRawyFcGv4dqe1tvHrqpFS1EFbX1zE+dQvT0hVlpNSyzvc+exR9zz8n
zUmbVL8ELv81grHxSbTK/lrtuWNDYibBZ14iSSEQlP6PGbIpZTadzkg/6Fdr1PaBvI
cCLYgIYa7TKsFAYNdtdpn6vaYF9CYCREQTxkBS/gPySZb42SvIvDhYNQRsQBlkal3i
R/cSWka137oI8LAOQF7VDDiDwHrw3Si/l9eFl5CtZzhmQa2DZlynfXut28/8C/JOMz
7+5SRKAAAAAElFTkSuQmCC">
</head></html>

어떤 아이콘을 나타 냅니까? 아래에서 답변하고 공감하십시오!

— 료 비돈
소스
1
사과 아이콘?
— styfle
2

2020 년 킬러 솔루션

상당히 최근까지 대부분의 브라우저는 파비콘을 .svg형식 으로 처리 할 수 ​​없었기 때문에이 솔루션은 질문이 처음 제기 된 지 9 년이 지나야 합니다.

더 이상 그렇지 않습니다.

참조 : https://caniuse.com/#feat=link-icon-svg

1) SVG를 Favicon 형식으로 선택하십시오

현재 2020 년 6 월에 이러한 브라우저는 SVG Favicons를 처리 할 수 ​​있습니다 .

  • 크롬
  • Firefox
  • 가장자리
  • 오페라
  • Android 용 Chrome
  • KaiOS 브라우저

참고는 이 브라우저는 여전히 수 없습니다 :

  • 원정 여행
  • iOS 사파리
  • 안드로이드 용 Firefox

위의 사항을 염두에두고 SVG Favicon을 자신있게 사용할 수 있습니다 .

2) SVG를 데이터 URI로 제시

여기서 주요 목표는 HTTP 요청을 피하는 것입니다.

다른 솔루션에서 언급했듯이,이를 수행하는 현명한 방법 은 HTTP URL 대신 Data URI 를 사용하는 것 입니다.

SVG (특히 작은 SVG) 는 Data URI에 완벽하게 적합합니다 . 후자는 단순히 일반 텍스트 (모호한 문자가 백분율로 인코딩되어 있음)이고 XML은 전자가 긴 일반 텍스트 형식으로 작성 될 수 있기 때문에 백분율 코드)를 엄청나게 간단합니다.

3) 전체 SVG는 이모티콘입니다

2019 년 12 월 Leandro Linares는 Chrome이 SVG Favicons를 지원하기 위해 Firefox에 합류 한 이래로 이모티콘에서 favicon을 만들 수 있는지 실험 해 볼 가치가 있다는 사실을 처음으로 알게되었습니다.

https://lean8086.com/articles/using-an-emoji-as-favicon-with-svg/

리나 레스의 직감이 맞았습니다.

몇 달 후 (2020 년 3 월) Code Pirate Lea Verou도 같은 사실을 깨달았습니다.

https://twitter.com/leaverou/status/1241619866475474946

그리고 파비콘은 다시는 같지 않았습니다.

4) 직접 솔루션 구현 :

간단한 SVG는 다음과 같습니다.

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 16 16">

  <text x="0" y="14">🦄</text>
</svg>

그리고 여기에 데이터 URI 와 동일한 SVG가 있습니다 .

data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E

마지막으로 Favicon으로서의 데이터 URI는 다음 과 같습니다.

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

5) 더 많은 트릭

Favicon은 SVG이기 때문에 여러 가지 필터 효과 (SVG 및 CSS 모두)를 적용 할 수 있습니다.

예를 들어 위 의 White Unicorn Favicon 과 함께 필터를 적용하여 Black Unicorn Favicon 을 쉽게 만들 수 있습니다 .

style="filter: invert(100%);"

검은 유니콘 파비콘 :

<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20style='filter:%20invert(100%);'%3E🦄%3C/text%3E%3C/svg%3E" type="image/svg+xml" />
— 루닌
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.