[favicon] 파비콘의 유래, 권장 규격, 그리고 만드는 법

2025. 10. 3. 23:54·WEB DEV

 

 

 

 

파비콘 (favicon)

 

favorite icon의 줄임말이라고 하네요.

저도 검색해보고 처음 알았습니다.

 

이제는 고인이 되어버린, 인터넷 익스플로러....

IE 5 시절에 즐겨찾기를 하면 옆에 따라붙는 아이콘이라서 파비콘이라고 하네요.

 

 

요즘은 없으면 허전한거 같아요.

 

여러개의 탭을 열어놨을 때도 구분이 쉽고,

사이트의 정체성을 나타내기도 하고요.

 

특히, 구글 크롬에서는 브라우저의 홈 화면에서 뜨기도 해서

은근히 신경이 쓰이는 부분입니다.

 

 

 

파비콘의 규격 (확장자, 권장 사이즈)

 

전통적으로 기본 확장자는 .ico 

요즘은 png, svg도 지원한다고 합니다.

 

파비콘의 기본 사이즈는 16x16 pixel 인데,

앞에서 살펴본 것처럼 사이트의 정체성을 대표하는 성격이 점점 강해져서

 

한번 만들 때, 동일한 이미지로

다양한 사이즈를 만들어 놓고 사용하는 경우가 많은 것 같습니다.

 

16x16px : 기본 파비콘 사이즈

32x32px : 고해상도 디스플레이 대비

48x48px : 북마크

180x180px : iOS 홈화면(웹페이지를 홈화면에 추가할 때(Add to home screen))

 

 

 

 

 

파비콘 만드는 법

 

16~64 px 의 정사각형 사이즈로!

Figma, Photoshop, Illustrator 같은 이미지 제작툴에서 만들고,

ico, png, svg로 내보내기를 하면 됩니다.

 

아니면, AI 시대 답게,

다양한 AI 도구들한테 '딸깍' 시전해봅시다.

 

favicon.io 같은 favicon generator를 사용하기도.

 

 

 

 

 

 

파비콘 적용하기

 

 

이 파일을 웹 루트 디렉토리에 favicon.ico 로 올리고, 

html <head> 안에 link 태그를 추가해주면 끝.

 

 

* 아래는 예시

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

 

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

 

 

저작자표시 비영리 변경금지 (새창열림)

'WEB DEV' 카테고리의 다른 글

[TMDB] The Movie Database API Key 발급받는 법(무료, 개발용)  (0) 2025.10.04
[tree] 프로젝트 구조를 트리로 보여주고, txt 파일로 저장하기(커맨드 라인 툴)  (0) 2025.10.02
[.env] dotenv 파일 내에서 주석 처리하는 법과 주의사항  (0) 2025.09.29
마크다운 에디터에서 문단 구분선 입력하는 법(GitHub에서 readme 파일 편집)  (0) 2025.09.28
'WEB DEV' 카테고리의 다른 글
  • [TMDB] The Movie Database API Key 발급받는 법(무료, 개발용)
  • [tree] 프로젝트 구조를 트리로 보여주고, txt 파일로 저장하기(커맨드 라인 툴)
  • [.env] dotenv 파일 내에서 주석 처리하는 법과 주의사항
  • 마크다운 에디터에서 문단 구분선 입력하는 법(GitHub에서 readme 파일 편집)
SPACECHILD
SPACECHILD
우주공학, IT, 그리고 다가오는 미래에 대해서 이야기합니다.
  • SPACECHILD
    스페이스차일드
    SPACECHILD
  • 전체
    오늘
    어제
    • 분류 전체보기 (423)
      • SPACECHILD (158)
      • IT, Smart Life (156)
      • WEB DEV (26)
      • 러닝, 마라톤 (27)
      • 세계일주 (0)
      • ETC. (55)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

    • 대한민국 우주산업 실태조사 보고서 (2008-2019)
    • 우리나라 5대 항공우주박물관
    • [용어정리] 항공우주공학 : 우주파트를 중심으로
  • 인기 글

  • 태그

    안드로이드
    추천
    비교
    맥
    우주산업
    구입
    마라톤
    스페이스x
    달리기
    우주개발
    다운로드
    spacex
    게임
    nasa
    스마트폰
    후기
    애플
    애플워치
    mac
    아이폰
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
SPACECHILD
[favicon] 파비콘의 유래, 권장 규격, 그리고 만드는 법
상단으로

티스토리툴바