스크린샷은 영어 앱을 보여줍니다. 사전 설정된 이름과 컨트롤은 앱 언어로도 사용할 수 있습니다.

당신의 출발점

PixRinse에서 Favicon 세트을 사용한 다음 실제 대상과 비교하여 이러한 설정을 검토하세요.

이 워크플로에 대한 설정
파비콘 PNG16 / 32 / 48 px
Apple 터치 PNG180 px
웹앱 PNG192 / 512 px
색상sRGB
6가지 PNG 웹사이트 아이콘 크기로 사전 설정된 PixRinse Favicon 세트
이 연습에 사용되는 설정입니다. 전체 크기로 검사하려면 스크린샷을 선택하세요.
PNG 형식과 sRGB로 변환은 인코딩 컨트롤에 표시됩니다.
PNG 형식과 sRGB로 변환은 인코딩 컨트롤에 표시됩니다.

그것을하는 방법

  1. 정사각형 소스 마크를 준비합니다.

    최소한 필요한 가장 큰 아이콘만큼 큰 소스를 사용하십시오. 16 px에서 사라질 수 있는 미세한 세부 사항을 단순화합니다.

  2. Favicon 세트을 선택하세요

    6가지 크기를 검토하세요. 템플릿은 중앙 표지 규칙을 사용하므로 정사각형이 아닌 소스는 잘릴 수 있습니다.

  3. 가장 작은 출력 검사

    16 및 32 px 파일을 실제 크기로 확인하세요. 자동 크기 조정은 복잡한 브랜드 마크에 대한 의도적인 광학 조정을 대체할 수 없습니다.

  4. 이미지 내보내기 및 웹사이트 코드에 참조 추가

    웹사이트에 PNG 파일을 추가하고 HTML 헤드 및 웹 앱 매니페스트에서 관련 크기를 참조하세요.

이 연습의 파일

이 예제의 결과

1024 × 1024 정사각형 표시는 정사각형이 아닌 소스 경고 없이 6개의 PNG를 생성합니다. 내보낸 모든 파일에는 sRGB 프로필이 포함되어 있습니다.

정사각형 소스
1024 × 1024
PNG 수출
6
색상 프로필
모든 출력에서 ​​sRGB
실제 내보낸 파일
파일체재픽셀바이트
android-chrome-192x192.pngPNG192 × 19226,980
android-chrome-512x512.pngPNG512 × 512174,868
apple-touch-icon.pngPNG180 × 18023,839
favicon-16x16.pngPNG16 × 16692
favicon-32x32.pngPNG32 × 321,751
favicon-48x48.pngPNG48 × 483,093
웹사이트 아이콘 세트 만들기: 실제 내보낸 결과
이 연습에 표시된 샘플 파일의 실제 내보내기 결과입니다.

표시된 샘플 파일에서 측정되었습니다. 결과는 원본과 설정에 따라 달라집니다. 이 연습에서는 정사각형 또는 투명한 샘플 캔버스에 소유한 PixRinse 아트웍을 사용합니다.

몇 가지 일반적인 질문

favicon.ico을 생성합니까?

아니요. 내장 세트는 특정 파일 이름을 가진 6개의 PNG 파일을 내보냅니다.

넓은 로고가 효과가 있을까요?

정사각형 소스가 바람직합니다. 표지 규칙은 넓은 소스를 자를 수 있으므로 미리보기를 주의 깊게 검토하세요.

워크플로를 작업에 활용하세요.

PixRinse을 열고 몇 가지 이미지를 추가한 후 위의 설정으로 시작하세요.

Mac용 다운로드무료: 배치당 최대 10 이미지 및 소스당 출력 1개. 이 워크플로우의 다중 출력에는 Pro가 필요합니다. 무료와 Pro를 비교합니다.