[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:ko:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-ko-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","파비콘 크기: 2025년에 실제로 필요한 것들","파비콘 크기에 대한 명확한 가이드: 16x16, 32x32, 180x180, 192, 512, 최신 브라우저에서 사용하는 크기, 그리고 추가할 HTML.","2026-10-12","favicon size","favicon-generator","\u003Cp>파비콘 크기를 검색하면 상충하는 숫자들이 나타납니다: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. 이런 목록들은 대부분 10년 전에 작성되었고 업데이트된 적이 없습니다. 실제로 현대적인 사이트는 약 4개의 파일만 필요하며, \u003Ca href=\"\u002Fko\u002Ffavicon-generator\">파비콘 생성기\u003C\u002Fa>를 사용하면 한 번에 모든 파일을 만들 수 있습니다. 완전히 브라우저에서 실행되므로 로고가 당신의 컴퓨터를 벗어나지 않습니다.\u003C\u002Fp>\n\u003Cp>각 크기가 실제로 무엇인지, 그리고 무엇을 건너뛸 수 있는지 알아보겠습니다.\u003C\u002Fp>\n\u003Ch2>여전히 중요한 크기들\u003C\u002Fh2>\n\u003Ch3>16x16과 32x32 — 브라우저 탭과 북마크\u003C\u002Fh3>\n\u003Cp>이것은 클래식 파비콘입니다. 16x16은 많은 탭이 열려있는 탭 스트립에서 보이고, 32x32는 고DPI 화면, 북마크 바, 일부 주소 표시줄 UI에서 사용됩니다. 둘 다 전통적으로 한 개의 \u003Ccode>favicon.ico\u003C\u002Fcode> 파일로 묶여있으며, 여러 해상도를 동시에 포함할 수 있습니다. Windows는 데스크톱 바로가기를 위해 동일한 \u003Ccode>.ico\u003C\u002Fcode>에서 48x48도 가져오므로, 이를 포함해도 비용이 거의 없습니다.\u003C\u002Fp>\n\u003Ch3>180x180 — Apple 터치 아이콘\u003C\u002Fh3>\n\u003Cp>iPhone이나 iPad에서 누군가 "홈 화면에 추가"를 탭하면, Safari는 180x180 크기의 \u003Ccode>apple-touch-icon.png\u003C\u002Fcode>를 찾습니다. 없으면 iOS가 페이지를 스크린샷으로 캡처하여 사용하는데, 이는 보기 흉합니다. 이 하나의 PNG는 시스템이 필요에 따라 축소하므로 모든 현재 iOS 기기를 커버합니다.\u003C\u002Fp>\n\u003Ch3>192x192과 512x512 — Android와 PWA\u003C\u002Fh3>\n\u003Cp>Android Chrome과 설치 가능한 웹 앱은 \u003Ccode>site.webmanifest\u003C\u002Fcode>에서 아이콘을 읽습니다. 192는 홈 화면 아이콘이고, 512는 스플래시 화면과 앱 목록에 사용됩니다. 사이트를 설치 가능하게 하려면 둘 다 필요합니다.\u003C\u002Fp>\n\u003Ch3>SVG — 선택 사항이지만 좋음\u003C\u002Fh3>\n\u003Cp>Firefox와 Chrome은 모두 SVG 파비콘을 지원하며, 어떤 크기에서도 선명하게 유지되고 파일 내의 미디어 쿼리로 다크 모드에 반응할 수 있습니다. 이는 보너스이지 대체물이 아닙니다. Safari와 구형 브라우저는 여전히 래스터 버전을 원합니다.\u003C\u002Fp>\n\u003Ch2>건너뛸 수 있는 것들\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, Windows 타일 이미지의 전체 세트, 그리고 수십 개의 레거시 \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode> 스타일 파일들. 이들은 대부분 사라진 기기를 위해 필요했습니다. 20개의 아이콘 파일을 배포하면 저장소가 부풀어지고 측정 가능한 이득이 없습니다.\u003C\u002Fp>\n\u003Ch2>HTML\u003C\u002Fh2>\n\u003Cp>사이트 루트에 파일을 놓고 \u003Ccode><head>\u003C\u002Fcode>에 다음을 추가하세요:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>그리고 매니페스트에서:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>16픽셀에 맞게 디자인하기\u003C\u002Fh2>\n\u003Cp>어려운 부분은 내보내기가 아니라 전체 로고가 16x16에서 뭉게진다는 것입니다. 도움이 되는 몇 가지:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>전체 로고가 아닌 일부를 사용하세요.\u003C\u002Fstrong> 한 글자, 한 글리프, 한 모양. 단어 표식은 탭 크기에서 읽을 수 없습니다.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>정사각형으로 시작하세요.\u003C\u002Fstrong> 소스가 넓은 로고라면, 생성기가 빈 공간으로 레터박싱하지 않도록 먼저 \u003Ca href=\"\u002Fko\u002Fcrop-image\">정사각형으로 자르세요\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>대비를 높게 유지하세요.\u003C\u002Fstrong> 얇은 윤곽은 사라집니다. 단색 모양이 살아남습니다.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>배경을 결정하세요.\u003C\u002Fstrong> 투명한 PNG는 밝고 어두운 브라우저 크롬에 적응합니다. 마크가 어두우면 단색 타일을 대신 제공하는 것을 고려하세요. 평면 JPG만 있는 경우 \u003Ca href=\"\u002Fko\u002Fremove-background\">로고 스크린샷에서 배경을 제거\u003C\u002Fa>할 수 있으며 몇 초면 됩니다.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>안전 영역을 유의하세요.\u003C\u002Fstrong> Android는 아이콘을 원과 스콰클로 마스킹하므로, 512 아트웍의 가장자리 주변에 대략 10% 패딩을 남겨두세요.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>파비콘의 배경을 사이트의 브랜드 색상과 맞추려면, \u003Ca href=\"\u002Fko\u002Fcolor-picker\">이미지 색상 선택기\u003C\u002Fa>가 기존 스크린샷에서 정확한 16진수를 추출합니다. \u003Ccode>theme-color\u003C\u002Fcode> 메타 태그에도 유용합니다.\u003C\u002Fp>\n\u003Ch2>전체 세트를 한 번에 생성하세요\u003C\u002Fh2>\n\u003Cp>아무것도 업로드하지 않습니다. 정사각형 PNG나 SVG를 \u003Ca href=\"\u002Fko\u002Ffavicon-generator\">무료 브라우저 기반 파비콘 생성기\u003C\u002Fa>에 드롭하면 \u003Ccode>.ico\u003C\u002Fcode>, Apple 터치 아이콘, 192\u002F512 PNG를 로컬로 당신의 탭에서 생성합니다. 서버에 전송되는 것이 없고, 가입도 필요 없으며, 미공개 로고의 사본이 누군가의 저장 공간에 남아있지 않습니다.\u003C\u002Fp>\n\u003Cp>그러면 브라우저를 축소하여 탭을 보고, 중요한 유일한 질문을 하세요: 그것이 무엇인지 알 수 있나요?\u003C\u002Fp>\n",1791831541671]