WebP ICO 변환

Q: 애니메이션 WebP를 업로드하면 어떻게 됩니까?

ICO는 정지 이미지만 담기 때문에 변환기는 첫 프레임을 사용합니다(**애니메이션 입력**이 **첫 프레임만**으로 설정됨). 첫 프레임이 비어 있거나 전환 중간 장면이라면 다른 원본을 고르십시오.

로고가 내 사이트에서 저장한 WebP나 디자인 툴에서 내보낸 WebP로만 남아 있습니까? 브라우저, 북마크, Windows 바로 가기가 별도 마크업 없이 알아서 가져가는 favicon.ico로 바꿔 보십시오.

또는 JPG, JPEG, JPE … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

변환할 형식

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

1
WebP 로고 업로드
.webp 파일을 끌어다 놓으십시오. 한 번에 최대 20개, 파일당 95 MB까지 가능합니다. 256 × 256 px 이상의 정사각형 로고가 가장 좋습니다.
2
아이콘 크기 모두 유지
고급 설정의 아이콘 크기는 모든 크기 (16–256)로 시작합니다. 애니메이션 WebP는 첫 프레임을 사용합니다.
3
변환 후 사이트에 업로드
ICO로 변환을 누르고, 필요하면 파일 이름을 favicon.ico로 바꾼 뒤 웹사이트 루트 폴더에 넣으십시오.

요즘 웹사이트에서 저장한 로고는 대부분 WebP입니다. 한 번 변환하면 투명 배경을 유지한 채 여러 크기가 담긴 favicon.ico가 됩니다.

WebP 로고로 favicon.ico 만들기

WebP는 2010년 Google이 발표한 뒤 웹의 상당 부분에서 기본 이미지 형식이 되었습니다. WordPress는 2021년 5.8 버전부터 WebP 업로드를 받았고, 많은 이미지 CDN은 제공하는 PNG를 모두 WebP로 바꿉니다. 그래서 내 로고를 찾아보면 손에 들어오는 사본이 .webp인 경우가 많은데, 파비콘 생성기, Windows, 일부 호스팅 관리 화면은 이 파일을 받지 않습니다.

ICO 형식은 WebP와 다른 문제를 해결합니다. 압축된 그림 한 장 대신 여러 장의 정사각형 비트맵을 묶어 두고, 브라우저나 운영체제가 필요한 크기를 골라 씁니다. 탭에는 16 px, 작업 표시줄이나 북마크 바에는 32 px, 바탕 화면 바로 가기와 고밀도 화면에는 더 큰 크기를 씁니다. 변환하면 이 크기들이 WebP 한 장에서 한 번에 만들어집니다.

페이지 헤더의 로고에는 WebP 원본을 그대로 쓰십시오. 두 파일은 쓰이는 자리가 다르며, 변환해도 원본은 전혀 바뀌지 않습니다.

변환기가 ICO에 담는 내용

.ico 하나에 담기는 5가지 크기: 16–256 px
한 번에 처리하는 WebP 파일 수: 20
파일당 최대 용량: 95 MB
이후 서버에서 삭제: 30분

WEBP

WebP 이미지

WebP는 웹 페이지를 더 빨리 불러오도록 Google이 2010년에 공개한 이미지 형식입니다. 한 형식 안에서 손실과 무손실 압축, 알파 투명도, 애니메이션을 모두 지원합니다. 손실 WebP 파일은 비슷한 화질의 JPEG보다 보통 25–35% 작고, 무손실 WebP는 대개 PNG보다 작습니다. 현재 모든 브라우저가 지원하지만, 일부 오래된 데스크톱 소프트웨어, 인쇄 서비스, 업로드 양식은 여전히 받지 않습니다. Windows, macOS와 대부분의 최신 이미지 편집기에서 WebP 파일을 열 수 있습니다.

압축 방식: 손실 또는 무손실
투명도: 예
애니메이션: 예
도입 연도: 2010 · Google

WEBP 변환

ICO

Windows 아이콘(ICO)

ICO는 Windows 프로그램 아이콘과 웹사이트 파비콘에 쓰이는 Microsoft의 아이콘 형식입니다. .ico 파일 하나에 16×16, 32×32, 48×48, 256×256 픽셀처럼 여러 크기의 이미지를 담을 수 있어 시스템이 가장 알맞은 것을 고릅니다. 각 이미지는 비트맵이나 PNG 데이터로 저장할 수 있고 완전한 알파 투명도를 지원합니다. ICO는 사진이나 큰 작업물용이 아닙니다. 브라우저, Windows, 대부분의 아이콘 편집기에서 읽을 수 있습니다.

압축 방식: 무손실
투명도: 예
애니메이션: 아니요
도입 연도: Microsoft

ICO 변환

브랜드 로고의 유일한 사본이 웹사이트나 CMS가 제공한 압축 WebP 파일뿐인데 사이트 루트에는 여전히 favicon.ico가 필요할 때 WebP 로고를 ICO로 변환합니다.

16 px 브라우저 탭에 맞게 WebP 로고 준비하기

심벌만 남기고 자르기
대부분의 로고는 가로로 깁니다. 심벌이나 첫 글자만 남기고 약간의 여백을 둔 정사각형으로 자르십시오.
작은 글자 빼기
슬로건과 워드마크는 16 px에서 회색 얼룩이 됩니다. 굵은 도형 하나는 살아남지만 가는 선은 사라집니다.
두 가지 탭 색상에서 확인
밝은 브라우저 테마와 어두운 테마에서 결과를 모두 확인하십시오. 투명 배경 위의 어두운 로고는 어두운 탭에서 보이지 않을 수 있습니다.

새 파비콘을 사이트에 적용하기

favicon.ico를 루트 폴더에 넣어 yoursite.com/favicon.ico 주소로 열리게 하십시오. 페이지 head에 <link rel="icon" href="/favicon.ico" sizes="any">로 선언하면 어떤 아이콘을 쓸지 명확해지며, WordPress 같은 CMS에는 이 태그를 대신 써 주는 사이트 아이콘 설정란이 따로 있습니다.

아이콘 두 개를 더 갖추면 구성이 완성됩니다. iPhone과 iPad는 누군가 사이트를 홈 화면에 추가할 때 180 × 180 px PNG인 apple-touch-icon을 사용합니다. WebP PNG 변환과 사진 비율 자르기 가이드로 만들 수 있습니다. Google 검색은 크기가 48 px의 배수인 정사각형 파비콘을 요구하므로, 홈페이지에서 연결한 96 px이나 144 px PNG가 있으면 검색 결과까지 대응됩니다. 브라우저는 파비콘을 강하게 캐시하므로 새 아이콘을 바로 확인하려면 시크릿 창에서 페이지를 여십시오.

WebP ICO 변환 자주 묻는 질문

로고가 이미 WebP인데 왜 .ico 파일이 필요합니까?

페이지에 아이콘이 선언되어 있지 않으면 브라우저는 스스로 사이트 루트의 /favicon.ico를 요청합니다. 또 Windows 바로 가기, 오래된 브라우저, 여러 CMS의 파비콘 입력란은 ICO나 PNG를 요구합니다. 루트에 .ico 하나만 두면 마크업 없이 이 모두에 대응할 수 있습니다.

WebP 로고 주변의 투명한 부분은 그대로 투명하게 남습니까?

그렇습니다. WebP와 ICO 모두 알파 채널을 지원하므로 투명 배경이 아이콘 안의 모든 크기에 그대로 옮겨지고, 파비콘은 밝은 탭과 어두운 탭 어디에서나 깔끔하게 보입니다.

애니메이션 WebP를 업로드하면 어떻게 됩니까?

ICO는 정지 이미지만 담기 때문에 변환기는 첫 프레임을 사용합니다(애니메이션 입력이 첫 프레임만으로 설정됨). 첫 프레임이 비어 있거나 전환 중간 장면이라면 다른 원본을 고르십시오.

WebP의 손실 압축 흔적이 파비콘에 드러납니까?

16–64 px에서는 거의 드러나지 않습니다. 축소하면서 작은 압축 흔적이 평균화되어 사라지기 때문입니다. 다만 128 px과 256 px 레이어에는 희미한 테두리 번짐이 남을 수 있습니다. 로고가 벡터 파일로도 있다면 SVG ICO 변환이 가장 깨끗한 가장자리를 만듭니다.

선명한 파비콘을 만들려면 WebP 로고의 해상도는 얼마여야 합니까?

최소 256 × 256 px의 정사각형이어야 가장 큰 레이어를 확대가 아니라 축소로 만들 수 있습니다. 페이지 헤더에서 저장한 120 px짜리 로고는 큰 크기에서 흐릿하게 보입니다.

WebP ICO 변환

이미지 변환

사용 방법

WebP 로고 업로드

아이콘 크기 모두 유지

변환 후 사이트에 업로드