파비콘 생성기

웹사이트에 사용할 다양한 파비콘을 생성하는 도구 입니다.
손쉽게 파비콘을 생성하고, 웹사이트에 적용하세요.

파비콘 생성기 - 펭수의 워드프레스 꾸미기
펭수
by pengsu

파비콘이란 무엇입니까?

파비콘은 브라우저 주소 표시줄에서 사이트 URL 옆에 표시되는 작은 16x16 아이콘 파일입니다. 또한 사용자의 열린 탭 목록과 북마크 목록에서 사이트 이름 옆에 표시되는 경우가 많아 사용자가 다른 사이트를 더 쉽게 식별할 수 있습니다.

앱 아이콘이란 무엇입니까?

앱 아이콘은 스마트폰에서 애플리케이션을 실행하기 위해 누르는 이미지입니다. 더 높은 해상도의 화면을 갖춘 최신 휴대폰이 출시됨에 따라 더 높은 해상도의 앱 아이콘이 필요합니다. 개발자는 여전히 해상도가 낮은 구형 휴대폰에 대한 지원을 유지하기를 원하므로 앱 아이콘을 만들 때 동일한 이미지의 여러 크기 변형을 만들어야 합니다. 이는 iPhone 및 Android와 같은 모든 스마트폰은 물론 iPad와 같은 태블릿에도 해당됩니다.

이 도구의 기능은 무엇입니까?

아이콘 파일을 업로드하면 여러종류의 아이콘을 자동으로 생성해주는 사이트 입니다. 이와 함께 <head></head>에 추가되어야 할 코드도 함께 제공 합니다.

파비콘 사용

이 도구를 사용하여 파비콘을 생성한 후 압축을 풀어서 사이트의 루트 디렉터리에 다운로드하여 저장하세요. 그런 다음 HTML 문서의 헤드에 다음 코드를 포함시킵니다.
저장 경로가 다를경우 아래 경로를 수정해야 합니다.

<!-- Apple Touch Icons --> <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"> <!-- Android and Favicon Icons --> <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="icon" href="/favicon.ico" type="image/x-icon">