스크린샷은 영어 앱을 보여줍니다. 사전 설정된 이름과 컨트롤은 앱 언어로도 사용할 수 있습니다.
당신의 출발점
PixRinse에서 Favicon 세트을 사용한 다음 실제 대상과 비교하여 이러한 설정을 검토하세요.
| 파비콘 PNG | 16 / 32 / 48 px |
|---|---|
| Apple 터치 PNG | 180 px |
| 웹앱 PNG | 192 / 512 px |
| 색상 | sRGB |


그것을하는 방법
정사각형 소스 마크를 준비합니다.
최소한 필요한 가장 큰 아이콘만큼 큰 소스를 사용하십시오. 16 px에서 사라질 수 있는 미세한 세부 사항을 단순화합니다.
Favicon 세트을 선택하세요
6가지 크기를 검토하세요. 템플릿은 중앙 표지 규칙을 사용하므로 정사각형이 아닌 소스는 잘릴 수 있습니다.
가장 작은 출력 검사
16 및 32 px 파일을 실제 크기로 확인하세요. 자동 크기 조정은 복잡한 브랜드 마크에 대한 의도적인 광학 조정을 대체할 수 없습니다.
이미지 내보내기 및 웹사이트 코드에 참조 추가
웹사이트에 PNG 파일을 추가하고 HTML 헤드 및 웹 앱 매니페스트에서 관련 크기를 참조하세요.
이 연습의 파일
이 예제의 결과
1024 × 1024 정사각형 표시는 정사각형이 아닌 소스 경고 없이 6개의 PNG를 생성합니다. 내보낸 모든 파일에는 sRGB 프로필이 포함되어 있습니다.
- 정사각형 소스
- 1024 × 1024
- PNG 수출
- 6
- 색상 프로필
- 모든 출력에서 sRGB
| 파일 | 체재 | 픽셀 | 바이트 |
|---|---|---|---|
| android-chrome-192x192.png | PNG | 192 × 192 | 26,980 |
| android-chrome-512x512.png | PNG | 512 × 512 | 174,868 |
| apple-touch-icon.png | PNG | 180 × 180 | 23,839 |
| favicon-16x16.png | PNG | 16 × 16 | 692 |
| favicon-32x32.png | PNG | 32 × 32 | 1,751 |
| favicon-48x48.png | PNG | 48 × 48 | 3,093 |

표시된 샘플 파일에서 측정되었습니다. 결과는 원본과 설정에 따라 달라집니다. 이 연습에서는 정사각형 또는 투명한 샘플 캔버스에 소유한 PixRinse 아트웍을 사용합니다.
몇 가지 일반적인 질문
favicon.ico을 생성합니까?
아니요. 내장 세트는 특정 파일 이름을 가진 6개의 PNG 파일을 내보냅니다.
넓은 로고가 효과가 있을까요?
정사각형 소스가 바람직합니다. 표지 규칙은 넓은 소스를 자를 수 있으므로 미리보기를 주의 깊게 검토하세요.
워크플로를 작업에 활용하세요.
PixRinse을 열고 몇 가지 이미지를 추가한 후 위의 설정으로 시작하세요.
Mac용 다운로드무료: 배치당 최대 10 이미지 및 소스당 출력 1개. 이 워크플로우의 다중 출력에는 Pro가 필요합니다. 무료와 Pro를 비교합니다.