대부분의 favicon 조언은 2014 년에 작성된 발전기에서 복사 한 12 개의 PNG 크기 목록입니다. 그 크기의 대부분은 더 이상 아무 것도하지 않습니다. 오늘날 사이트에 필요한 것은 짧습니다: 하나 favicon.ico 여전히 찾고 있는 브라우저와 도구에 대해,현대적인 모든 것에 대해 하나의 확장 가능하거나 고해상도 아이콘,그리고 전화기에 대해 하나의 터치 아이콘을 제공합니다. 사람들을 넘어뜨리는 부분은.ico 자체입니다. 왜냐하면 이상한 확장자를 가진 이미지가 아니기 때문입니다. 여러 개의 이미지를 담는 작은 컨테이너입니다.
이 가이드는 ICO 파일이 어떻게 구축되는지, 어떤 크기가 favicon.ico 내부에 속하는지, 왜 사이트가 옆에 필요한 다른 아이콘 파일, 브라우저 탭에서 아이콘을 부드럽거나 읽을 수 없게 만드는 실수를 다루고 있습니다 이미지 도구 허브그리고 Toolz 변환기에 대해 인용된 모든 크기는 소스 코드에서 나옵니다.
TL;DR: ICO 파일은 컨테이너입니다: 짧은 디렉토리 다음에 여러 개의 정사각형 이미지가 있으며,크기 당 하나씩 브라우저 또는 운영 체제가 가장 가까운 일치 항목을 선택합니다. favicon.ico 의 경우 16,32 및 48 px 를 포함하고 동일한 파일이 Windows 아이콘으로 두 배가되면 256 px 를 추가합니다. 각 항목은 최대 256 x 256 픽셀을 보유 할 수 있습니다. 그와 함께 SVG 또는 대형 PNG 아이콘과 180 x 180 을 선언합니다
apple-touch-icon. 그만큼 PNG 에서 ICO 변환기 16, 32, 48 및 256 px 항목을 투명도, 클라이언트 측, 업로드되지 않음, 무료, 가입 없음이 포함된 PNG로 씁니다.
ICO 파일이란 무엇입니까?
ICO 파일은 Windows 아이콘 형식입니다: 헤더,내부의 각 이미지를 나열하는 디렉터리 및 각 항목의 이미지 데이터. Microsoft 는 레이아웃을 그것의 아이콘 기술 문서그리고,윈도우 프로그램의 첫 번째 버전 이후 Windows 프로그램,바로 가기 및 폴더 아이콘에 대한 형식되었습니다. 브라우저는 대부분의 웹 사이트에 파일이 여전히 호출되는 이유입니다 1990 년대 후반에 favicons 에 대해 채택했다 favicon.ico.
디렉토리는 PNG 또는 JPG 와 다른 점입니다. 16 픽셀의 아이콘이 필요한 소프트웨어는 디렉토리를 읽고 16 에 가장 가까운 항목을 찾아 그 하나를 그립니다. 탭,북마크 목록,작업 표시줄 버튼 및 데스크탑 바로 가기는 각각 동일한 파일에서 다른 이미지를 가져올 수 있습니다. 이를 통해 디자이너는 단일 이미지를 모든 곳에서 스케일링하는 대신 작은 크기에 대한 단순화된 표시와 큰 크기에 대한 세부 표시를 제공할 수 있습니다.
형식은 두 가지 미디어 유형으로 진행됩니다. IANA 목록 image/vnd.microsoft.icon대부분의 서버와 브라우저는 이전 버전을 사용하지만 image/x-icon. 둘 다 favicon 을 위해 일한다.
ICO 파일은 어떻게 구성되어 있습니까?
ICO 파일은 6 바이트 헤더로 시작하고 이미지 당 하나의 16 바이트 디렉토리 항목이 뒤따르고 이미지 데이터가 뒤따릅니다. 모든 숫자는 리틀 엔디안입니다.
ICONDIR (6 bytes)
reserved 2 bytes always 0
type 2 bytes 1 = icon (2 = cursor)
count 2 bytes number of images
ICONDIRENTRY (16 bytes, repeated count times)
width 1 byte pixels; 0 means 256
height 1 byte pixels; 0 means 256
colorCount 1 byte palette size; 0 when there is no palette
reserved 1 byte 0
planes 2 bytes 1
bitCount 2 bytes bits per pixel, e.g. 32
bytesInRes 4 bytes size of this image's data
imageOffset 4 bytes where this image's data starts in the file
Image data (one block per entry)
either a BMP-style DIB (without the file header)
or a complete PNG file
그 레이아웃의 두 가지 세부 사항은 아이콘에 대한 대부분의 혼란스러운 것들을 설명합니다.
256 픽셀 천장은 단일 바이트에서 온다. 너비와 높이는 각각 0 에서 255 까지 저장할 수 있는 1 바이트에 저장됩니다. 형식은 0 을 재사용하여 256 을 의미하며 더 큰 것을 표현할 방법이 없습니다. 512 x 512 항목은 생성기가 주장하는 것이 무엇이든 유효한 ICO 에 존재할 수 없습니다.
항목은 PNG일 수 있습니다. 초기 아이콘은 모든 이미지를 별도의 1비트 투명 마스크를 사용하여 압축되지 않은 비트맵으로 저장했습니다. Windows Vista부터 항목은 대신 전체 PNG 파일을 보유할 수 있으며, 이는 큰 크기에서는 훨씬 작고 적절한 알파 채널을 전달합니다. 압축되지 않은 32비트 비트맵으로 저장된 256 x 256 아이콘은 대략 256KB입니다; PNG와 동일한 이미지는 일반적으로 그 일부입니다.
Toolz 변환기는 현대 변형을 작성합니다. 그것의 ICO 빌더는 유형 1 을 설정하고,평면 1 과 픽셀 당 32 비트로 크기 당 하나의 디렉토리 항목을 설정하고,256 을 0 으로 쓰고,각 항목을 알파 채널이있는 PNG 로 저장합니다. 디렉토리가 기록 할 방법이 없기 때문에 1 에서 256 까지의 외부 크기를 묻는 것은 무엇이든 쓰기 전에 거부됩니다.
파비콘은 어떤 크기여야 하나요?
favicon.ico 에는 16 x 16,32 x 32 및 48 x 48 이미지가 포함되어야하며 파일이 Windows 아이콘으로도 작동하려면 256 x 256 이미지가 포함되어야합니다. .ico 외에도 최신 브라우저는 SVG 또는 링크 태그로 선언 된 대형 PNG 를 선호하며 전화는 별도의 터치 아이콘을 사용합니다.
이 표는 각 크기를 사용되는 위치에 매핑합니다. 정확한 동작은 브라우저,운영 체제 및 디스플레이 스케일링에 따라 다르므로 일반적인 경우로 취급하십시오:
| 크기 | 나타나는 곳 | favicon.ico에 필요하십니까? |
|---|---|---|
| 16 x 16 | 브라우저 탭, 주소 표시줄, 표준 디스플레이의 북마크 | 예 |
| 32 x 32 | 고밀도 디스플레이, Windows 작업 표시줄 및 바로가기에 대한 탭입니다 | 예 |
| 48 x 48 | 윈도우 데스크톱 바로 가기, 중간 아이콘 보기; 구글 검색은 이보다 더 크게 갈 것을 권한다 | 예 |
| 256 x 256 | Windows 대형 및 초대형 아이콘 보기 | Windows 아이콘으로 사용하는 경우에만 |
| 180 x 180 | 아이폰과 아이패드 홈 화면 (apple-touch-icon) |
아니, PNG를 분리하라 |
| 192 x 192 | 안드로이드 홈 화면, 웹 앱 매니페스트 | 아니, PNG를 분리하라 |
| 512 x 512 | 웹 앱 매니페스트, 설치 및 화면 스플래시 | 아니요, ICO에 들어갈 수 없습니다 |
| 모든 (SVG) | 다크 모드 변형을 포함하여 SVG 아이콘을 지원하는 최신 브라우저입니다 | 아니, 별도의 SVG |
검색 결과에, Google's 파비콘 가이드라인 정사각형 아이콘을 요청하고 48 x 48 픽셀보다 큰 아이콘을 추천하면 Google 이 홈 페이지에 선언 된 아이콘에서 가져옵니다. 16 픽셀에서 최고를 차지하는.ico 는 site's 아이콘이 검색 결과 옆에 흐릿하게 보이는 일반적인 이유입니다.
사이트에는 어떤 favicon 파일이 필요합니까?
사이트는 모든 주류 브라우저와 장치를 커버하기 위해 세 개의 아이콘 파일과 하나의 매니페스트 항목이 필요합니다. 그 이상은 거의 항상 남은 것입니다.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
각 줄에는 작업이 있습니다:
favicon.ico는 대체이다. The WHATWG HTML 표준 브라우저가 요청할 수 있습니다/favicon.ico사이트 루트에서 페이지가 아이콘을 전혀 선언하지 않고 RSS 리더, 크롤러 및 이전 도구가 여전히 선언 할 때 다른 아이콘을 선언하더라도 루트에 파일을 유지하십시오.icon.svg는 SVG 파비콘을 지원하는 브라우저의 날카로운 아이콘입니다. 모든 밀도로 확장되며 다음을 포함할 수 있습니다prefers-color-scheme미디어 쿼리 그래서 아이콘은 어두운 탭에 적응. 모든 브라우저가 그것을 존중하지 않습니다. 이것이 .ico 가 머무는 이유입니다.apple-touch-icon.pngat 180 x 180 은 누군가가 홈 화면에 사이트를 추가 할 때 iOS 가 사용하는 것입니다. iOS 는 홈 화면 아이콘에 투명성을 유지하지 않기 때문에 불투명한 배경을 제공합니다.- 192 및 512의 매니페스트 아이콘은 에 설명된 대로 사이트가 앱으로 설치될 때 Android 및 Chromium 기반 브라우저가 사용하는 것입니다 W3C 웹 애플리케이션 매니페스트.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 sizes .ico 링크의 속성은 한 가지 방법으로 중요합니다. 브라우저가 SVG 와 크기 .ico 를 볼 때 SVG 가 확장 가능한 선택임을 알 수 있습니다. 일부 설정은 사용합니다 sizes="any" 대신.ico 에서,그리고 일부 크롬 버전은 SVG 위에.ico 를 선택함으로써 응답했습니다. 특정 크기는 그것을 피합니다.
왜 내 파비콘이 흐릿하거나 잘못 보입니까?
대부분의 파비콘 문제는 포맷이 아닌 소스 이미지에서 비롯됩니다. ICO 는 각 크기에 주어진 것이 무엇이든 저장하며,스케일링은 한 방향으로만 잘 진행될 수 있습니다.
| 증상 | 원인 | 고치다 |
|---|---|---|
| 부드럽고 얼룩덜룩한 256px 항목 | 256px보다 작은 소스이므로 늘렸습니다 | 512 x 512 이상의 내보내기부터 시작하세요 |
| 로고가 찌그러지거나 늘어졌습니다 | 정사각형이 아닌 소스가 정사각형으로 늘어납니다 | 변환하기 전에 자르거나 패드를 사각형으로 만듭니다 |
| 탭에서 읽을 수 없는 워드마크 | 16px로 그린 텍스트의 높이는 2픽셀입니다 | 16 및 32 px에 대해 기호만 사용하십시오 |
| 얇은 윤곽이 사라집니다 | 작은 크기에서 1px 미만의 스트로크 | 작은 크기의 변형으로 스트로크를 두껍게 합니다 |
| 아이콘 주위의 흰색 상자 | JPG 소스는 투명성이 없습니다 | 알파 채널이 있는 PNG를 사용합니다 |
| 오래된 아이콘이 계속 표시됩니다 | 브라우저는 공격적으로 파비콘을 캐시합니다 | 파일 이름을 바꾸거나 쿼리 문자열을 추가한 다음 하드 새로 고침합니다 |
| Google 결과에 아이콘이 없습니다 | 48px 미만의 아이콘, robots.txt에 의해 차단되었거나 홈 페이지에 없습니다 | 홈 페이지에서 더 큰 아이콘을 제공 하 고 크롤링을 허용 합니다 |
첫 번째 행은 철자를 쓸 가치가 있습니다. 왜냐하면 숙련된 디자이너도 잡아내기 때문입니다. 256 을 체크한 상태로 변환된 64 px 소스는 4 배 확대된 64 px 이미지인 256 px 엔트리를 생성합니다. 정확히 엔트리 고밀도 Windows 뷰와 큰 단축키가 보여주는 큰 소스로부터의 다운스케일링이 좋아 보이는 방향입니다.
세 번째 행은 산술의 문제입니다. 16 x 16 아이콘은 총 256 픽셀을 가지고 있습니다. 그 너비에 압착 된 5 글자 워드 마크는 문자 당 약 3 픽셀을 얻고 앤티 앨리어싱은 회색 얼룩으로 바꿉니다. 거의 모든 잘 알려진 사이트는 그 이유로 파비콘에 단일 문자 또는 기호를 사용합니다.
PNG 에서 favicon.ico 를 어떻게 만들 수 있습니까?
투명한 배경의 최소 512 x 512 픽셀의 정사각형 PNG를 내보내고 필요한 크기로 ICO로 변환한 다음 게시하기 전에 실제 크기로 16 px 항목을 확인하십시오.
를 사용하여 PNG 에서 ICO 변환기 toolz에서:
- PNG 를 떨어 뜨리십시오. 여러 개가 한 번에 들어갈 수 있습니다; 각각은 자신의 .ico 가됩니다.
- 아이콘 크기를 선택하십시오. 16,32, 48 및 256 px 의 네 상자 모두 틱되어 시작됩니다. 순수한 파비콘의 경우 256 항목이 대부분의 무게이기 때문에 파일을 훨씬 가볍게 만들기 위해 256 을 틱 해제하십시오. 4 개를 모두 선택 해제하면 변환기는 빈 아이콘을 생성하지 않고 4 개를 모두 쓰는 것으로 돌아갑니다.
- ICO 로 변환을 누릅니다. A square 512 x 512
logo.png로 돌아옵니다logo.ico메모 "16, 32, 48, 256 px 아이콘을 포함합니다." - 파일을 다운로드하거나 일괄 처리를 다음으로 수행합니다.Download the file, or take a batch as
converted-ico.zip.
변환기는 각 크기에서 캔버스에 이미지를 그리고,각 사각형을 PNG 로 인코딩하고,가장 작은 것을 먼저 하나의.ico,모든 클라이언트 측으로 포장하므로 아트워크는 장치를 떠나지 않습니다. 모든 크기에서 투명도가 유지되지 않는 소스는 자르기보다는 각 사각형을 채우기 위해 늘어나며 메모는 그렇게 말합니다: 1024 x 256 워드마크를 떨어뜨리면 이미지가 1024x256 이고 선택한 크기의 사각형으로 늘어났다고 보고됩니다. 그 메모는 자르기 또는 패드 우선의 큐입니다.
작은 크기에서 최상의 결과를 얻으려면 두 개의 PNG 를 만드십시오: 48 및 256 px 에 대한 자세한 것 및 16 및 32 px 에 대한 단순화 된 기호. 크기가 체크 된 것만으로 각각 변환하십시오. 변환기는 파일 당 하나의 소스를 작성하므로 두 이미지 접근 방식은 두 개의.ico 파일을 제공합니다; 로 단순화 된 것을 사용하십시오 favicon.ico브라우저는 대부분 작은 항목을 선택하고 Windows 응용 프로그램이나 바로 가기 아이콘에 대한 자세한 항목을 선택하기 때문입니다.
JPG나 SVG로 ICO를 만들 수 있나요?
둘 다 예, 각각에 대한 주의 사항이 있습니다.
JPG 는 작동하지만 모든 아이콘 항목은 투명도가없는 채워진 사각형으로 나옵니다. JPEG 에는 알파 채널이없고 변환기가 하나를 복구 할 수 없기 때문입니다. The ICO 변환기에 JPG 사진을 동일한 16,32, 48 및 256 px 사각형으로 다시 샘플링합니다. 사진도 16 px 에서 거의 모든 세부 사항을 잃어 버리기 때문에 단일 고대비 피사체 주위에 단단히 자르고 변환하기 전에 자르기 사각형을 만듭니다. 그대로 변환 된 4032 x 3024 전화 사진은 수평으로 압착되며 메모는 그렇게 알려줍니다.
SVG 는 가능한 최고의 소스입니다. 고정된 해상도가 없고 모든 엔트리 크기에서 선명하게 렌더링되기 때문입니다. 경로는 원하는 제어의 양에 따라 달라집니다. The SVG 에서 PNG 변환기 먼저 검사하고 편집할 수 있는 PNG 로 SVG 를 렌더링합니다; 가장 긴 변이 512 px 미만인 모든 SVG 는 512 로 그려지므로 24 x 24 아이콘 SVG 는 여전히 256 항목에 대한 깨끗한 소스를 제공합니다. 또는 SVG 를 일반에 바로 놓습니다 이미지 변환기SVG, PNG, JPG 및 기타 12가지 형식을 허용하고 ICO를 대상으로 선택하여 한 단계로 렌더링하고 포장합니다.
| 소스 | ICO의 투명성 | 256px에서의 선명도 | 최고의 사용 |
|---|---|---|---|
| SVG | 보관됨 | 벡터에서 렌더링된 샤프 | 벡터 형태로 가지고 있는 로고 |
| PNG 512px 이상 | 보관됨 | 날카로운 | 대부분의 파비콘 |
| 256px 미만의 PNG | 보관됨 | 256 에서 부드러운 | 256을 선택 취소하거나 더 크게 다시 내보냅니다 |
| JPG | 없음, 채워진 사각형 | 소스 크기에 따라 다릅니다 | 사진 기반 아이콘만 가능합니다 |
| 기존 ICO | 보관됨 | 브라우저가 디코딩하는 항목에서 다시 작성되었습니다 | 파일이 전달하는 크기를 변경합니다 |
기존 .ico 도 다시 입력할 수 있습니다. 변환기는 ICO 를 ICO 로 이름 바꾸기로 처리하지 않습니다; 항상 체크하는 크기로 파일을 다시 빌드합니다. 이는 브라우저가 디코딩하는 하나의 항목에서 다시 빌드하지만 부풀어 오른 파비콘을 16,32 및 48 까지 제거하는 빠른 방법이므로 원본 아트워크가있는 경우 시작하십시오. SVG 대 PNG 벡터 마스터가 정확히 이런 종류의 재수출을 위해 보관할 가치가 있는 이유를 다룹니다.
favicon.ico 는 2026 년에도 여전히 중요합니까?
예, 대체 수단으로. 현재 브라우저는 선언한 SVG 또는 PNG 아이콘을 사용하지만 루트는 사용합니다 /favicon.ico 는 여전히 일부 브라우저,피드 리더,북마크 도구 및 크롤러가 선언을 찾지 못하거나 선언된 유형을 지원하지 않을 때 가져오는 것입니다. 누락된 것은 파일이 존재하든 존재하지 않든 해당 요청이 도착하기 때문에 서버 로그를 404s 로 채웁니다.
더 이상 중요하지 않은 것은 레거시 크기의 긴 꼬리입니다. 별도의 57,60, 72,76, 114,120, 144 및 152 픽셀 터치 아이콘은 이전 iOS 버전에서 날짜로 지정되었으며 단일 180 px 파일을 통해 선언 된 Windows 타일 이미지 browserconfig.xml 윈도우 8,10 시작 화면 타일에 속했다. 둘 다 새로운 사이트에 필요하지 않습니다.
다음은 예상할 수 있는 파일 크기로 설정된 실용적인 최소값입니다:
| 파일 | 화소 크기 | 전형적인 무게 | 필수? |
|---|---|---|---|
favicon.ico 16, 32, 48로 |
16, 32, 48 | 몇 KB | 네, 대체품으로요 |
icon.svg |
확장 가능 | 간단한 표시의 경우 2KB 미만입니다 | ...에 추천된 |
apple-touch-icon.png |
180 x 180 | 5~20KB | 네, iOS의 경우입니다 |
icon-192.png, icon-512.png |
192, 512 | 10~60KB | 사이트에 매니페스트가 있는 경우 |
브라우저에서 아이콘을 변환하는 것은 비공개인가요?
예. Toolz 에서 디코딩,크기 조정,PNG 인코딩 및.ico 패킹은 모두 브라우저 탭 내부에서 클라이언트 측에서 발생하므로 이미지가 업로드되지 않으며 페이지가 로드되면 오프라인으로 계속 작동합니다. 소스에 연결된 메타데이터 및 색상 프로필은 캔버스 단계에 의해 삭제되며 아이콘의 경우 무해합니다.
100 메가 픽셀 이상의 이미지와 빈 파일은 메시지와 함께 거부되며 50 MB 이상의 SVG 소스는 거부됩니다. 도구는 무료이며 가입이 없으며 매일 전환이 제한됩니다.
