LumaTool
로컬 처리

Favicon HTML 태그 생성기

Favicon HTML 태그 생성기 generates copy-ready favicon HTML link tags for favicon.ico, PNG favicons, Apple Touch Icon, web manifest, theme color, shortcut icon, and mask icon.

Runs locallyNo uploadYour input is processed in your browser.

Favicon HTML 태그 생성기

favicon.ico, PNG favicon, Apple Touch Icon, manifest, theme-color, mask-icon용 HTML head 태그를 만듭니다.

이 도구란?

A favicon HTML tag generator writes the link and meta tags that belong in the HTML head. It helps avoid missing sizes, incorrect type attributes, inconsistent paths, or forgetting the web manifest and theme color.

지원 입력 형식

  • No upload is required.
  • /favicon.ico
  • /favicon-16x16.png
  • /favicon-32x32.png
  • /apple-touch-icon.png
  • /site.webmanifest

출력 파일

  • favicon.ico link tag
  • 16x16 and 32x32 PNG link tags
  • apple-touch-icon link tag
  • site.webmanifest link tag
  • theme-color meta tag
  • optional shortcut icon and mask icon tags

크기 가이드

  • favicon.ico keeps broad compatibility.
  • 16x16 and 32x32 PNG help modern browsers choose crisp tab icons.
  • 180x180 Apple Touch Icon supports iOS home screen shortcuts.
  • site.webmanifest points browsers to PWA icon metadata.
  • theme-color controls browser UI color on supported devices.

입력 예시

  • /favicon.ico
  • /favicon-32x32.png
  • /apple-touch-icon.png
  • /site.webmanifest
  • #ffffff theme color

출력 예시

  • favicon.ico link tag
  • 16x16 and 32x32 PNG link tags
  • apple-touch-icon link tag
  • site.webmanifest link tag
  • theme-color meta tag
  • optional shortcut icon and mask icon tags

일반 사용 사례

  • Create favicon head code for a static HTML site.
  • Add favicon tags to a React or Vite index.html file.
  • Prepare link tags for a Next.js or WordPress project.
  • Check that generated paths match files in the public folder.
  • Copy a complete favicon code block without hand-writing every tag.

권장 방법

  • Start from high-resolution square artwork when possible.
  • Keep the subject centered and avoid tiny text inside small icons.
  • Use transparent backgrounds only when the mark remains visible on light and dark surfaces.
  • Use consistent file paths between exported files and HTML code.
  • After replacing favicons, clear browser cache or change filenames if the old icon remains visible.

흔한 실수

  • Uploading a low-resolution source and expecting sharp large icons.
  • Using artwork that touches the edge and gets clipped after rounding or cover mode.
  • Shipping only favicon.ico and forgetting Apple Touch Icon or manifest icons.
  • Leaving HTML paths that do not match the files in the public folder.
  • Not previewing 16x16 and 32x32 outputs before release.

개인정보 및 로컬 처리

파일은 브라우저에서 로컬로 처리되며 LumaTool 서버에 업로드되지 않습니다. 이미지 디코딩, Canvas 크기 조정, ICO/ZIP, manifest, HTML 생성은 클라이언트에서 완료됩니다.

예시

입력 예시

입력 예시 
/favicon.ico
/favicon-32x32.png
/apple-touch-icon.png
출력 예시 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag

Favicon HTML 태그 생성기 generates copy-ready favicon HTML link tags for favicon.ico, PNG favicons, Apple Touch Icon, web manifest, theme color, shortcut icon, and mask icon.

출력 예시

입력 예시 
favicon paths and theme color
출력 예시 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag
site.webmanifest link tag
theme-color meta tag

파일은 브라우저에서 로컬로 처리되며 LumaTool 서버에 업로드되지 않습니다. 이미지 디코딩, Canvas 크기 조정, ICO/ZIP, manifest, HTML 생성은 클라이언트에서 완료됩니다.

개인정보 안내

파일은 브라우저에서 로컬로 처리되며 LumaTool 서버에 업로드되지 않습니다. 이미지 디코딩, Canvas 크기 조정, ICO/ZIP, manifest, HTML 생성은 클라이언트에서 완료됩니다.

사용 방법

  1. 1단계. Enter your favicon file paths.
  2. 2단계. Select which icon tags to include.
  3. 3단계. Set the theme color and optional mask icon.
  4. 4단계. Copy the generated HTML code into your website head.

실제 사용 예시

Create favicon head code for a static HTML site

Create favicon head code for a static HTML site.

Add favicon tags to a React or Vite index

Add favicon tags to a React or Vite index.html file.

Prepare link tags for a Next

Prepare link tags for a Next.js or WordPress project.

주요 사용 사례

  • Create favicon head code for a static HTML site.
  • Add favicon tags to a React or Vite index.html file.
  • Prepare link tags for a Next.js or WordPress project.
  • Check that generated paths match files in the public folder.
  • Copy a complete favicon code block without hand-writing every tag.

FAQ

Where should I place favicon HTML tags?

Place them inside the HTML head. In Vite or React projects this is often index.html; in framework projects use the framework head or metadata system.

Do I still need favicon.ico?

Yes, it is still useful for compatibility even when PNG icons are present.

What is apple-touch-icon?

It is the icon iOS uses when a user saves a website to the home screen.

What is site.webmanifest?

It is a web manifest file that tells browsers about PWA icons, display mode, theme color, and related install metadata.

Why is my favicon not updating?

Favicons are cached heavily. Verify paths, clear cache, and consider changing filenames when replacing icons.

Can I use this code in React or Vite?

Yes. Put the files in public/ and paste the generated tags into index.html unless your framework uses a metadata API.

Favicon HTML 태그 생성기은 어떤 작업에 적합한가요?

Favicon HTML 태그 생성기은 브라우저에서 빠르게 확인, 변환, 정리, 포맷팅해야 하는 아이콘 도구 작업에 적합합니다.

입력 내용은 어떻게 처리되나요?

파일은 브라우저에서 로컬로 처리되며 LumaTool 서버에 업로드되지 않습니다. 이미지 디코딩, Canvas 크기 조정, ICO/ZIP, manifest, HTML 생성은 클라이언트에서 완료됩니다.

관련 도구

파

파비콘 생성기

favicon.ico, PNG 아이콘, Apple Touch Icon, Android 아이콘, manifest, 미리보기, HTML 태그, ZIP을 브라우저에서 만듭니다.

아이콘 도구 사용 가능 로컬 처리 업로드 없음 지금 사용 앱

앱 아이콘 생성기

PNG, JPG, WebP, SVG에서 iOS, Android, PWA 아이콘 크기를 만들고 안전 영역과 둥근 모서리를 미리 봅니다.

아이콘 도구 사용 가능 로컬 처리 업로드 없음 지금 사용 I

ICO 변환기

PNG, JPG, WebP를 favicon.ico용 다중 크기 ICO로 변환합니다.

이미지 도구 사용 가능 로컬 처리 업로드 없음 지금 사용 S

SVG 안전 미리보기

SVG 마크업을 격리해 미리보고 크기, 색상, 위험 요소를 확인합니다.

이미지 도구 사용 가능 로컬 처리 업로드 없음 지금 사용 S

SVG 최적화 도구

SVG를 압축, 정리, 정화, 미리보기, 복사, 다운로드하고 script, 이벤트, metadata, 위험 요소를 제거합니다.

아이콘 도구 사용 가능 로컬 처리 업로드 없음 지금 사용