권장 파비콘 크기
브라우저 탭에는 16·32·48px, iOS 홈 화면에는 180px, Android와 PWA에는 192·512px 아이콘이 주로 사용됩니다.
Design
Vibe Ready파비콘 만들기
이미지 하나로 favicon, Apple·Android 아이콘과 manifest를 한 번에 만듭니다.
01
이미지와 모양
모든 편집은 이 브라우저 안에서만 처리돼요.
이미지를 끌어다 놓으세요
PNG, JPG, WEBP, SVG · 최대 15MB
02
실시간 미리보기
실제로 보이는 크기를 확인하세요.
My Website×
🔒 mywebsite.com
Google 검색
My Websitehttps://mywebsite.com
내 서비스의 멋진 제목
검색 결과에서 파비콘이 이렇게 보여요.
모바일 홈 화면
My Website
INSTALL
프로젝트에 설치하기
Next.js 설치 코드
// app/layout.tsx
export const metadata = {
icons: {
icon: "/favicon.ico",
apple: "/apple-touch-icon.png",
},
manifest: "/site.webmanifest",
};파비콘, 어디에 쓰나요?
Next.js에서는
App Router의 app 폴더에 icon 파일을 두거나 Metadata의 icons와 manifest 경로를 지정할 수 있습니다.
검색에 바로 안 보인다면
파일 경로, 캐시, 검색엔진의 재수집 주기를 확인하세요. 파일을 바꿔도 검색 결과 반영에는 시간이 걸릴 수 있습니다.
APPLY WITH AI
입력 내용은 전송되지 않아요이 결과를 내 프로젝트에 적용하기
적용 프롬프트
현재 프로젝트 구조를 먼저 분석해줘. ## 목표 Favicon Generator에서 만든 결과를 현재 프로젝트에 적용해줘. ## 환경 - AI 도구: Codex - 프레임워크: Auto ## 요구사항 - 기존 디자인과 기능은 변경하지 말 것 - 기존 설정과 충돌 여부를 먼저 확인할 것 - 생성 결과의 파일 경로와 참조 경로가 일치하는지 확인할 것 - 현재 프레임워크의 권장 방식을 따를 것 ## 제약사항 - 불필요한 리팩터링 금지 - 새로운 dependency 최소화 - 민감한 값을 코드나 저장소에 포함하지 말 것 ## 검증 - TypeScript 오류 확인 - build 실행 - 적용 결과와 변경 파일을 설명할 것