파비콘(favicon) 사이트 추천 적용 방법

파비콘은 웹 브라우저의 탭이나 북마크바에 나타나는 작은 아이콘입니다. 웹 사이트나 브랜드의 시각적 표현을 제공하는 데 자주 사용되며 사용자가 여러 탭이나 책갈피를 연 경우 사이트를 식별하는 데 도움이 될 수 있습니다.

favicon

 

파비콘이란?

favicon는 설정을 위한 권장 사이트 중 하나는 https://realfavicongenerator.net/입니다. 이 웹사이트는 다양한 장치 및 플랫폼에 필요할 수 있는 모든 다양한 파비콘 크기 및 유형을 생성하기 위한 포괄적인 도구를 제공합니다.

웹사이트에 파비콘을 설정하려면 몇 가지 단계를 거쳐야 합니다.

1. 파비콘으로 사용할 이미지 파일을 생성합니다. 일반적으로 약 32x32픽셀 크기의 정사각형 이미지여야 합니다.
2. https://realfavicongenerator.net/에서 제공하는 것과 같은 도구를 사용하여 필요할 수 있는 다양한 크기와 유형의 파비콘 파일을 모두 생성합니다.
3. 일반적으로 "favicon.ico" 또는 "favicon.png"라는 이름의 웹사이트 루트 디렉터리에 favicon 파일을 추가합니다.
4. 웹사이트의 HTML 코드에 링크 요소를 추가하여 favicon 파일의 위치를 ​​지정합니다. 이 링크 요소는 HTML 코드의 헤드 섹션에 배치되어야 하며 파비콘 파일의 유형과 크기를 지정하는 속성을 포함해야 합니다.

 

링크 요소

다음은 링크 요소의 모양에 대한 예입니다.

bashCopy code

<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">

이 예에서 링크 요소는 favicon이 "/favicon.png"에 있는 PNG 파일이고 크기가 32x32 픽셀임을 지정합니다. 다른 크기와 유형의 favicon 파일은 link 요소의 다른 속성을 사용하여 지정할 수 있습니다.

전반적으로 웹사이트에 파비콘을 설정하는 것은 사이트의 브랜딩과 유용성을 개선하는 데 도움이 되는 비교적 간단한 프로세스입니다. https://realfavicongenerator.net/과 같은 도구를 사용하여 웹 개발자는 필요한 다양한 파비콘 파일을 빠르고 쉽게 생성할 수 있으며 사이트가 모든 장치와 플랫폼에서 멋지게 보이도록 할 수 있습니다.

 

​

 

추천사이트

추가로  https://www.favicon-generator.org/ 사이트를 소개합니다.

1. 우선 포토샵이나 이미지툴로 192*192 픽셀의 이미지를 만들고. 이미지 확장자는 png나 jpg이면 상관없다.

2. www.favicon-generator.org 사이트 접속한다.

파일선택을 누른후 만든 이미지를 찾아 넣고 파비콘 ico를 생성한 후 아래 html 코드를 입력하여 

페이지에 노출 시키면 됩니다.  

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

참고하세요 ~