기술 스택과 핵에 깊이가 있어요

핵은 일반적으로 강력하였쩌.

안드로이드에 웹뷰는 svg 파비콘을 못받아요. 다시 해보아도 WebChromeClient.onReceivedIcon 이벤트가 수신되지 않을 거여요. 사실 크로미엄 내부에 이미 svg 디코더가 들어있어서 치는 차고 넘치는 방법이 있었는데 실력에 상한이 걸려서 못해낸 거 아니나요.

위에 처럼 기술 스택으로 안되는 거에는 일반적으로 핵을 사용해요. 일반적으로 하지는 못하였다 하더라도 하는 수 없음 댔쩌.

WebViewClient.shouldInterceptRequest 이벤트에서 ico, png, webp, svg 를 모두 걸르면서 svg는 경로만 가져와서 자바스크립트에 넘기고 파비콘을 다시 생성하는 처리를 하는 거여요.

일반적으로 동적으로 생성하는 link icon 태그를 인식하는거 아나요. 이럼 onReceivedIcon 이벤트에 후보 아이콘이 하나 더 나와요. 신기하지 않나요.

function favicon(src){
	var img=new Image()
	img.addEventListener("load",function(e){
		var canvas=document.createElement("canvas")
		var ctx=canvas.getContext("2d")

		canvas.width=canvas.height=32
		ctx.drawImage(this,0,0,32,32)
		canvas.toBlob(function(blob){
			var link=document.createElement("link")

			link.rel="icon"
			link.href=URL.createObjectURL(blob)
			document.head.appendChild(link)
		})
	})
	img.src=src
}

(gpt5) 위에 함수는 파비콘을 동적생성 하는 과정으로 여기에 주석을 쳐줄래?

좋습니다 👍 코드의 흐름을 따라가면서 주석을 달아드릴게요.
이 함수는 전달받은 src 이미지를 32x32 크기로 리사이즈해서 favicon 링크를 동적으로 생성하는 동작이에요.

function favicon(src){
    // 새로운 <img> 객체 생성
	var img = new Image()

    // 이미지가 로드되면 실행할 이벤트 핸들러 등록
	img.addEventListener("load", function(e){
        // <canvas> 요소 생성
		var canvas = document.createElement("canvas")
		var ctx = canvas.getContext("2d")

        // 파비콘 크기(32x32)로 캔버스 크기 설정
		canvas.width = canvas.height = 32

        // 불러온 이미지를 32x32 크기로 캔버스에 그림
		ctx.drawImage(this, 0, 0, 32, 32)

        // 캔버스 내용을 Blob(이미지 데이터)으로 변환
		canvas.toBlob(function(blob){
            // <link rel="icon"> 태그 생성
			var link = document.createElement("link")

			link.rel = "icon"
            // Blob 객체를 URL로 만들어 link.href에 설정
			link.href = URL.createObjectURL(blob)

            // <head> 안에 link 태그 추가 → favicon 적용됨
			document.head.appendChild(link)
		})
	})

    // 이미지 소스를 지정 → 여기서 로드가 시작됨
	img.src = src
}

📌 동작 요약:

이미지(src)를 불러옴.
캔버스에 32x32 크기로 리사이즈하여 그림.
Blob으로 변환 후 Object URL 생성.
<link rel="icon"> 태그를 동적으로 생성하여 <head>에 추가.

혹시 이걸 응용해서 다양한 크기(16, 32, 64) 의 favicon을 한꺼번에 적용하는 버전도 만들어드릴까요?

사는얘기 목록