파비콘(Favicon)은 웹사이트 또는 웹페이지를 대표하는 작은 아이콘으로 일반적으로 브라우저의 탭, 북마크 목록과 같은 곳에서
해당 웹사이트를 쉽게 식별할 수 있는아이콘입니다. 파비콘은 모바일 장치에서 홈 화면에 바로가기 아이콘등록할 수도 있습니다.
파비콘 이미지 적용은 웹사이트에 파비콘 적용은 사소한 브랜드 부분까지 브랜딩해서 내 제품 웹사이트에 전문성을
더해주어 웹사이트의 완성도를 더 높여 줍니다
파비콘이란
파비콘 사이즈 및 저장방식
파비콘 HTML코드 삽입방법파비콘 만드는 방법
파비콘 사이즈 및 저장방법
사이즈
파비콘(Favicon)은 다양한 파일 형식으로 지원됩니다. 가장 일반적인 형식은 .ico 파일입니다. 이 파일은 윈도우 아이콘 파일로, 16x16 픽셀 크기뿐만 아니라 32x32, 48x48 등 다양한 크기로 제작할 수 있습니다.•16x16 : 브라우저용
•32x32 : 작업표시줄 단축키용
•96x96 : 데스크탑 단축키용
•180x180 : 애플 터치용
저장방법 (확장자)
.png 파일입니다. 이 파일은 투명도를 지원하기 때문에 다양한 디자인을 적용할 수 있습니다. 그 외에도 .gif, .jpg, .svg 등의 파일
형식도 사용될 수 있습니다. 하지만, 모든 브라우저에서 지원되지는 않으므로, 대체로 .ico 또는 .png 파일을 사용하는 것이 좋습니다.
파비콘 HTML코드 삽입방법
일반적으로 16x16 픽셀 크기의 .ico 파일을 사용하지만, .png 파일도 가능합니다.
아래 HTML 문서의 head 태그 안에 다음과 같은 코드를 추가합니다:
<head>
<link rel="icon" type="image/png" href="path/to/favicon.png">
<!-- 또는 -->
<link rel="shortcut icon" type="image/x-icon" href="path/to/favicon.ico">
</head>
favicon.png 또는 favicon.ico는 파비콘 이미지 파일의 경로를 입력합니다.
위 코드에서 rel 속성은 링크 태그의 관계(relations)를 정의하는 속성입니다. type 속성은 파일의 MIME 타입을 정의합니다. href 속성은 파비콘 파일의 경로를 지정해주세요.
위 코드의 두 번째 줄에서는 rel 속성에 shortcut icon을 사용하여 파비콘 이미지가 .ico 파일일 경우를 정의하고 있습니다.
마지막으로 파비콘이 정상적으로 추가되었는지 확인하려면 웹브라우저의 주소창 왼쪽에 나타나는 아이콘이 올바르게 표시되는지확인해주세요.
파비콘 만드는 방법
첫번째, Adobe의 포토샵이나 일러스트 혹은 파워포인트를 이미지 제작
Adobe의 포토샵이나 일러스트 혹은 파워포인트를 이미지 파일 작업하여 저장 확장자를 .png로 저장하는해서 파비콘을 만드는
방법이 있습니다.
두번째, 제작 사이트에서 제작 후 변환하여 사용
무료 디자인 툴이나 온라인 파비콘 제작 도구를 이용하면 쉽게 디자인할 수 있습니다.
Favicon Generator, Real Favicon Generator 등이 있습니다. 원하는 이미지나 로고를 업로드하고, 필요한 크기의 파비콘을 자동으로 제작해주는 기능을 제공합니다.
파비콘을 제작한 후, 해당 파일을 웹사이트 루트 디렉토리에 favicon.ico 형식으로 저장하고, HTML 코드 상에서 링크하면 됩니다. 다양한 크기의 파비콘을 제작하여 호환성을 고려하는 것도 중요합니다.
Favicon Generator
https://www.favicon-generator.org/
Real Favicon Generator
https://realfavicongenerator.net/
블로그나 카페 혹은 요즘 워드프레스 시작에서 꼭 필요한 파비콘으로 제품의 완성도를 높여 보세요
제 경우는 첫번째의 Adobe의 이미지를 제작후 두번째 무료변환 사이트에 넣어서 ico 파일을 만드는것을 추천합니다.
파비콘은 블로그 할때 꼭 필요한건 아니지만
자기만의 특색있는 아이콘으로 유저들이 찾기도 쉽고 첫 인상이라고 할 수 있습니다.
쉽게 작업 가능하니 블로그나 사이트를 운영하시는 분들은 꼭 한번은 만들어 보세요
'디자인 관련' 카테고리의 다른 글
| 포토샵 별색지정해서 인디자인으로 가지고오는 방법 (0) | 2023.11.08 |
|---|---|
| 인스타 사진 사이즈 쉽게 조정하기 (0) | 2023.08.15 |
| 어도비 파이어플라이 강력한 AI그림 인공지능 (0) | 2023.07.21 |
| 포토샵 단축키 모음 맥북 포함 (1) | 2023.07.19 |
| 저작권 없는 무료 상업용 이미지 사이트 리스트 (0) | 2023.07.18 |
