파비콘 만들기 (favicon.ico 생성기)

글자나 이미지를 넣으면 사이트에 필요한 파비콘 파일이 크기별로 만들어져요.

입력한 글과 파일은 서버로 보내지 않고 이 브라우저 안에서만 처리해요.

글자·이모지로 이미지로

글자·이모지글자색글자 크기 굵게

배경색 투명 배경모양사이트 이름 (매니페스트)

apple-touch-icon(180px)은 iOS 가 모서리를 직접 둥글게 깎으므로 배경을 채운 사각형으로 만들어요.

미리 보기

16×16

32×32

48×48

파일

HTML 태그 (<head> 안에)

site.webmanifest

사용 방법

「글자·이모지로」는 한두 글자나 이모지로, 「이미지로」는 로고 이미지를 넣어 만들어요.
배경색·모양(사각형·둥근 사각형·원)과 글자 크기·여백을 정하면 오른쪽 미리 보기가 바로 바뀌어요.
「ZIP 으로 모두 받기」를 누르면 favicon.ico, PNG 여섯 개, site.webmanifest, 태그 파일을 한 번에 받아요. 파일마다 따로 받을 수도 있어요.
파일을 사이트 최상위 폴더에 올리고 「HTML 태그」를 <head> 안에 붙여 넣으세요.

favicon.ico 에는 어떤 크기가 들어가나요?

16·32·48px 세 장이 PNG 형식으로 들어가요. 최신 브라우저와 Windows 는 ico 안의 PNG 를 그대로 읽어요.

파일 이름을 바꿔도 되나요?

바꿔도 되지만 HTML 태그와 site.webmanifest 안의 경로도 같이 고쳐야 해요. 처음 이름 그대로 두는 것이 가장 간단해요.

이모지 모양이 기기마다 달라요.

이모지는 이 기기에 설치된 글꼴로 그려서 윈도·맥·안드로이드마다 모양이 달라요. 만든 PNG 는 그림이라 받은 뒤에는 어디서나 같게 보여요.

바꾼 파비콘이 브라우저에 안 보여요.

브라우저가 예전 파비콘을 오래 저장해 두기 때문이에요. 강력 새로 고침을 하거나 태그의 파일 주소 뒤에 ?v=2 를 붙여 보세요.