| [개요] 1. 파비콘이란? 2. 파비콘의 효과 3. 파비콘의 제작 방법 4. 파비콘에 대한 추가 설명 (1) 파비콘 제작의 실제 (2) 티스토리(Tistory)에서 파비콘 구현하기 * (참고) SEO 이해 |
[동영상 예정] youtube 솔숲카페 @pineforestwind
[들어가는 말]
요즘, 웹사이트를 방문하다 보면 동일 웹회사라 할지라도, 하위 분류 특성에 따라 각각 웹 아이콘(빨간 사각형 안)을 달리 적용하고 있습니다. 솔숲바람은 즐겨찾는 웹아이콘(페비콘)의 이름은 지워버리고(괜히 자리만 차지함으로) 페비콘의 모양만으로 해당 웹 사이트를 즐겨 찾고 있습니다.
이 글은, 챗지피티(Chat GPT)의 도움을 받아 작성하였습니다.
이하, 챗지피티의 아이콘이 부착된 글(개요 1,2,3)은 챗지피티가 작성하고 솔숲바람이 편집하였으며,
솔숲바람의 로고가 부착된 개요4. (파비콘에 대한 추가설명, - 파비콘 제작의 실제)는 챗지피티의 미흡한 점과 오해가 있을 듯한 점을 보완하여 제가 작성한 글입니다.
1. 파비콘이란?
파비콘(Favicon)은 웹 사이트나 웹 페이지의 아이콘을 말합니다. 이 아이콘은 웹 브라우저 탭에 표시되거나, 사용자가 웹 페이지를 북마크할 때 사용되며, 웹 사이트의 로고와 같은 역할을 합니다. 파비콘은 작은 크기의 이미지이며, 일반적으로 16x16 픽셀 크기의 정사각형 이미지를 사용합니다.
2. 파비콘의 효과
1) 웹 사이트 브랜딩: 파비콘은 웹 사이트의 브랜드 이미지를 강화할 수 있습니다. 웹 사이트의 로고나 아이콘과 유사한 이미지를 사용하면, 사용자가 웹 사이트를 더욱 기억하기 쉽습니다.
2) 사용자 경험 개선: 파비콘은 웹 브라우저 탭에 표시되므로, 사용자가 다른 탭에서 작업하는 동안에도 웹 사이트를 쉽게 식별할 수 있습니다.
3) SEO 향상: 파비콘은 웹 사이트의 전반적인 사용자 경험을 개선할 수 있으며, 이 는 검색 엔진 최적화에도 영향을 미칠 수 있습니다.
3. 파비콘의 제작 방법
만드는 방법은 여러 가지가 있는데, 대표적인 방법은 다음과 같습니다.
- 이미지 파일 변환: 파비콘 이미지를 만들기 위해서는 먼저 원하는 이미지를 선택하고, 이를 16x16 픽셀 크기로 축소해야 합니다. 그 다음, 해당 이미지를 .ico 확장자 형식으로 변환하면 파비콘 이미지를 만들 수 있습니다.
- 온라인 파비콘 제작 도구 사용: 인터넷에서는 파비콘 이미지를 만들 수 있는 다양한 온라인 도구가 제공됩니다. 이들 도구는 일반적으로 이미지 파일을 업로드하고, 파비콘 이미지를 생성하는 간단한 단계를 제공합니다.
- HTML 코드를 이용한 파비콘 설정: 만들어진 파비콘 이미지를 사용하려면, 해당 이미지를 웹 사이트 루트 디렉터리에 저장한 다음, HTML 코드에서 파비콘 링크를 설정해야 합니다. 이를 위해 일반적으로 <link rel="icon" href="파비콘 이미지 경로"> 코드를 사용합니다.
4. <파비콘에 대한 추가 설명>
(1) 파비콘 제작의 실제
1. 개념 : 파비콘(Favicon)은 Favorite & icon의 합성어입니다. 아이콘즐겨찾기 정도가 될까요?
2. 크기 : 요즘은, HTML을 비롯한 그것을 구현하는 기술들도 많이 발전되어서, 픽셀 크기가 꼭 16X16 픽셀이 아니어도 좋습니다. 제 블로그의 파비콘도 32X32 픽셀로 만든 것입니다. 저의 로고를 이미지를 축소해서 파비콘으로 만들었습니다.
포토샵에서 이미지를 자르지 않고 픽셀 수를 줄이는 방법입니다. 이미지 > 이미지 크기 > 폭/높이
3. 파비콘은 웹 문서의 타이틀, 즐겨찾기 목차, 북마크에 반영되어 나타납니다. 예전보다 요즘은 파비콘에 대한 인식이 널리 퍼져 있어서, 많은 웹사이트에서 사용하고 있습니다.
4. 파비콘 제작은 예전에는 확장자가 .ICO 만 되어서 별도의 프로그램이 필요했지만, 요즘은 PNG 형식도 지원함으로 대부분의 그림편집 프로그램에서도 제작이 가능하게 되었습니다. 포토샵에서는 [파일 > 내보내기 > PNG으(로) 빠른 내보내기]로 PNG 형식의 아이콘(파비콘)을 만들 수 있습니다.
(2) 티스토리(Tstory)에서 파비콘 구현하기
티스토리에서는 파비콘을 연결(구현)하기 위해서는 간단합니다. 다른 웹사이트처럼 Html 소스를 만질 것이 없기 때문입니다. 링크에서 연결만 시켜주면, 끄~ㅌ 납니다.
티스토리 > 블로그관리 홈 으로 들어옵니다. 맨 아래 매뉴에 관리 > 블로그 메뉴를 선택합니다.
블로그 설정 창 아래 부분에 파비콘을 탑재하는 메뉴가 있습니다. 해당 컴퓨터에 저장된 파비콘 파일(ICO, PNG 다 가능)을 불러오기 > 변경사항 저장 합니다. 그림처럼 나의 블로그 모든 웹페이지에 상표처럼 파비콘이 요술처럼 나타납니다.
* (참고) SEO란 Search Engine Optimization의 약어로, 검색 엔진 최적화를 의미합니다. 검색 엔진은 인터넷 사용자가 검색어를 입력하면 이에 대한 검색 결과를 제공하는데, 이때 검색 결과 상위에 노출되는 웹 사이트가 더 많은 클릭을 받게 됩니다. 따라서, SEO는 웹 사이트의 검색 엔진 상위 노출을 목적으로, 다양한 기술적인 방법을 사용하여 웹 사이트의 가시성과 품질을 개선하는 작업을 의미합니다.
SEO의 작업 내용은 크게 내부 SEO와 외부 SEO로 구분됩니다. 내부 SEO는 웹 사이트 자체적으로 적용할 수 있는 기술적인 최적화를 의미하며, 예를 들면 메타 태그 작성, URL 최적화, 컨텐츠 최적화 등이 있습니다. 반면, 외부 SEO는 다른 웹 사이트로부터의 링크, 소셜 미디어를 통한 홍보 등과 같은 외부적인 요인을 통해 웹 사이트의 노출을 개선하는 작업입니다.
SEO는 검색 엔진에서 웹 사이트를 노출시키는 것이 목적이므로, 검색 엔진의 알고리즘을 이해하고 이를 고려하여 최적화 작업을 수행하는 것이 중요합니다. 검색 엔진은 다양한 요인을 고려하여 웹 사이트의 순위를 결정하므로, SEO 작업은 지속적으로 최적화를 수행해야 합니다. SEO를 잘 수행하면 웹 사이트의 노출이 개선되어 더 많은 방문자와 더 많은 비즈니스 기회를 얻을 수 있습니다.
'LifeIT' 카테고리의 다른 글
| 데이터케이블의 종류와 용도 (2) | 2023.05.11 |
|---|---|
| 챗GPT(2) - Chat 지피티 시작하기(설치하기) (0) | 2023.04.17 |
| 챗GPT(1) - 왜?, ChatGPT인가! (2) | 2023.04.08 |
| 모야모, 식물 이름이 궁금하시나요? (2) | 2023.04.07 |
| 엑셀로 만든 탁상용 만년달력(2024년) (6) | 2023.03.25 |