FIXLGSTOOLBOX
콘텐츠 이미지 제작

023 · CONTENT IMAGE

앱 아이콘·파비콘 생성기

이미지 한 장으로 Android 앱 아이콘, PWA 192×192·512×512, favicon.ico와 파비콘 묶음을 브라우저에서 만들어 다운로드하세요.

LOCAL브라우저에서 바로 처리
WORKSPACE앱 아이콘·파비콘 작업장

이미지 선택

클릭하거나 이미지를 이 영역으로 드래그앤드롭

PNG · JPG · WebP · 최대 20MB / 40MP

NEXT WORK

다음 작업

RELATED TOOLS

관련 도구

HOW TO USE

사용 방법

  1. 01

    PNG·JPG·WebP 원본 이미지를 선택합니다.

  2. 02

    전체 보기/채우기, 배경색, 위치와 크기를 조정하고 Android·PWA 마스크 미리보기를 확인합니다.

  3. 03

    필요한 플랫폼 묶음을 선택하고 개별 파일 또는 ZIP으로 다운로드합니다.

USE CASES

활용 예시

01

Android 앱 아이콘

런처 밀도별 PNG와 Google Play 512×512 아이콘을 한 번에 준비합니다.

02

PWA 아이콘

192×192·512×512 일반 아이콘과 maskable 아이콘을 함께 생성합니다.

03

웹사이트 파비콘

16×16·32×32·48×48 PNG와 멀티프레임 favicon.ico를 생성합니다.

04

브랜드 아이콘 묶음

하나의 로고로 Android·PWA·웹 파비콘 자산을 정리된 ZIP으로 받습니다.

EXPERT POST

앱 아이콘과 파비콘을 안정적으로 만드는 실전 기준

플랫폼별 안전영역과 작은 크기 가독성부터 ICO·ZIP 구조까지, 실제 적용 전에 확인할 기준을 작업 흐름에 맞춰 정리했습니다.

하나의 원본과 여러 출력 규격

앱 아이콘과 파비콘은 같은 로고를 사용하더라도 플랫폼마다 요구되는 크기와 표시 방식이 다릅니다. 원본 배치와 비율을 한 번 정한 뒤 각 preset을 같은 normalized layout으로 생성하면 결과 간 위치 차이를 줄일 수 있습니다.

Android Adaptive 안전영역

Android Adaptive 아이콘은 런처가 원형·둥근 사각형 등 다양한 마스크를 적용할 수 있으므로 중요한 로고 요소를 중앙 안전영역 안에 두는 것이 좋습니다. 108dp 기준 66dp 안전영역 가이드는 이 잘림 위험을 미리 확인하기 위한 편집 보조선입니다.

PWA Maskable과 일반 아이콘

일반 PWA 아이콘과 maskable 아이콘은 같은 원본에서 만들 수 있지만 표시 목적이 다릅니다. Maskable은 바깥 영역이 잘릴 수 있으므로 중요한 요소는 중앙 safe zone에 두고 배경은 full-bleed로 구성하는 편이 안전합니다.

작은 Favicon은 실제 크기로 확인

큰 미리보기에서 선명한 로고도 16×16이나 32×32에서는 세부가 뭉개질 수 있습니다. 작은 크기 결과는 실제 생성 픽셀로 확인하고, 너무 복잡하면 원본 디자인 자체를 단순화할지 판단하는 것이 좋습니다.

ICO와 ZIP은 결과 구조까지 확인

favicon.ico는 여러 크기 프레임을 한 파일에 담을 수 있고, 프로젝트에 바로 넣는 ZIP은 폴더와 파일명이 명확해야 합니다. TOOLBOX는 16·32·48 프레임과 Android·PWA·Favicon 폴더를 분리해 결과 구조를 확인하기 쉽게 만듭니다.

브라우저 로컬 처리

원본과 결과는 현재 브라우저에서 처리되며 서버 업로드를 전제로 하지 않습니다. 작업이 끝난 뒤에는 실제 다운로드 파일의 크기·규격·용도를 확인하고 프로젝트에 적용하는 것이 안전합니다.

출력 전에는 가장 작은 결과부터 검토

512×512만 확인하면 축소 과정에서 생기는 선 뭉침, 글자 소실, 얇은 여백 문제를 놓치기 쉽습니다. 16×16·32×32 favicon과 마스크 미리보기를 먼저 확인한 뒤 큰 규격까지 같은 중심과 여백이 유지되는지 비교하면 재작업을 줄일 수 있습니다.

배포 후에는 파일 교체와 표시 갱신을 분리

아이콘 파일을 올바르게 교체해도 브라우저·OS·PWA 설치 상태의 캐시 때문에 이전 이미지가 남을 수 있습니다. 생성 파일 자체의 오류와 캐시 표시 문제를 분리해 확인하고, 실제 프로젝트에서는 참조 경로와 manifest·HTML 연결도 함께 점검하는 편이 안전합니다.

IMPORTANT NOTES

주의사항

플랫폼별 마스크·작은 크기 가독성·캐시 차이를 구분해 실제 적용 뒤 아이콘이 예상과 다르게 보이는 일을 줄이세요.

FAQ

자주 묻는 질문

01192×192와 512×512가 왜 필요한가요?+

PWA 설치와 여러 기기 표시에서 널리 사용하는 핵심 크기이며 TOOLBOX는 두 규격을 기본 생성합니다.

02PWA 일반 아이콘과 maskable 아이콘은 같은 파일인가요?+

같은 원본에서 만들 수 있지만 표시 목적이 다르며 maskable 결과는 안전영역과 full-bleed 배경을 고려합니다.

03Android 아이콘이 원형으로 잘리는 이유는 무엇인가요?+

Adaptive icon은 기기와 런처에 따라 다양한 마스크가 적용될 수 있어 원형·squircle·rounded square·square 미리보기를 제공합니다.

04favicon.ico 안에는 무엇이 들어가나요?+

16×16·32×32·48×48 크기 프레임을 하나의 ICO에 포함해 생성합니다.

05파일이 서버에 업로드되나요?+

아니요. 지원되는 이미지 처리는 현재 브라우저 내부에서 수행합니다.

이미지와 생성 결과는 서버로 전송되지 않으며 현재 브라우저에서 처리됩니다.