이미지 한 장을 모든 화면에.

PNG를 ICO로 변환

작은 아이콘. 오래 남는 인상.

PNG를 여러 크기의 ICO로 변환합니다. 투명도를 유지하고 작은 미리보기를 확인한 뒤 아이콘 파일을 기기에 저장하세요.

PNG ICO PWA

아이콘 패키지 만들기

이미지로 파비콘과 앱 아이콘 등을 만드세요.

1업로드
2조정
3다운로드

이미지를 기다리는 중

여기에 이미지를 드롭하세요

PNG · 최대 5 MB

이미지는 브라우저 안에서 처리되며 기기 밖으로 전송되지 않습니다.

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

아이콘 조정

모든 화면에 어울리도록 모양을 세밀하게 조정하세요.

이미지 맞춤 방식

배경

투명

단색

#FFFFFF

안쪽 여백6%

모서리 반경0%

ICO 크기 (여러 개 선택 가능)

256

마스크 가능 아이콘

실제 사용 모습 확인(이미지를 업로드하면 아이콘을 미리 볼 수 있습니다)

브라우저 탭

https://example.com

iOS 홈 화면

여기에 아이콘 표시

PWA / Android

여기에 아이콘 표시

세 단계로 파비콘 만들기

이미지 한 장으로 아이콘 한 세트를 완성하세요.

1이미지 업로드

PNG를 여러 크기의 ICO로 변환합니다. 투명도를 유지하고 작은 미리보기를 확인한 뒤 아이콘 파일을 기기에 저장하세요.

2조정하고 미리보기

맞춤 방식, 배경, 안쪽 여백을 선택하세요. 작은 크기에서도 결과를 확인하세요.

3다운로드 후 사이트에 추가

아이콘 패키지를 내보내고 파일을 업로드한 뒤, HTML에 아이콘 링크를 추가하세요.

로고 하나로 모든 화면을 준비하세요

생성된 파일이 어디에서 사용되는지 확인하십시오.

웹사이트 파비콘

내 사이트×

16 × 16

32 × 32

16 × 16 및 32 × 32 아이콘은 탭과 북마크에서 방문자가 사이트를 알아보게 해 줍니다.

iPhone & iPad

내 사이트

180 × 180

홈 화면에 사이트가 추가되면 180 × 180 애플 터치 아이콘을 사용하십시오.

PWA & Android

앱 설치

192 × 192

512 × 512

192 × 192 및 512 × 512 이미지는 웹 앱 매니페스트에서 흔히 사용하는 크기입니다.

아이콘 패키지에는 무엇이 들어 있나요?

여러 플랫폼에서 바로 사용할 수 있는 아이콘 세트.

favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
apple-touch-icon.png180 × 180
icon-192.png192 × 192
icon-512.png512 × 512
site.webmanifest웹 앱 매니페스트

웹사이트에 아이콘 추가

이 링크를 HTML <head>에 넣으십시오.

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

아이콘 팩을 Nuxt 프로젝트 루트의 public/에 풉니다. 파일 이름을 유지하고 site.webmanifest와 favicon.ico를 같은 위치에 두세요. app/ 안에 넣지 마세요.
app/app.vue의 script setup 블록에 코드를 추가합니다. 이전 파일을 가리키는 아이콘 링크를 교체한 뒤 다시 빌드하고 배포합니다.

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

내 사이트의 /favicon.ico, /apple-touch-icon.png, /site.webmanifest를 엽니다. 성공 응답과 실제 이미지 또는 JSON 내용을 확인하세요. HTML 오류 페이지를 담은 200 응답도 잘못된 경로입니다. manifest 안의 모든 아이콘 URL도 확인하세요.

이전 아이콘이 남으면 head의 중복 링크를 확인하고 개발자 도구에서 캐시를 끈 뒤 새로 고칩니다. CDN이나 service worker를 쓴다면 해당 캐시도 확인하세요. 실제 16·32픽셀 미리보기에서 작은 글자와 가는 선을 단순화하세요.

이 파일은 아이콘과 manifest 메타데이터를 제공합니다. 이것만으로 설치 가능한 PWA가 되지는 않습니다. 도메인 루트 배포 예제이므로 하위 경로에서는 모든 링크와 manifest 아이콘 경로를 조정하세요.

Nuxt 4 · public/ · Nuxt 4 · useHead