파비콘 (Favicon)은 웹사이트나 블로그를 검색 시 왼쪽 작은 이미지에 보이는 내 사이트의 표시입니다. 일반적으로 티스토리는 빨간색 'T'로 표시되며 다른 대표 로고로도 나타납니다. 그럼 만들기 방법과 최대한 선명하게 만드는 방법을 알려드리겠습니다.
파비콘 (Favicon)은 무엇인가?
'Favorite Icon'의 약자로 쓰이는 말로써 일반적인 대표 웹사이트의 로고와 같은 아이콘을 나타납니다. 각자의 사이트 이미지나 로고등이 포함되어 있으며 브라우저를 열거나 구글, 네이버와 같은 포털에서 검색할 때 잘 식별할 수 있도록 보여줍니다. 그래서 각각의 사이트마다 고유의 로고와 이미지를 통해 신뢰도를 높이고 전문성을 강조할 수 있게 됩니다.
설정 방법
기본적으로 티스토리, 블로그스팟, 워드프레스 같은 곳에서는 파비콘을 만들어 주어야 합니다. 아니면 기존 사이트 제목이 나오거나 때론 내 사이트와 관계없는 동일한 이미지가 만들어지기 때문에 꼭 업로드를 하는 것이 홈페이지나 내 사이트의 신뢰도를 높일 수 있습니다.
파비콘 만들기
- 이미지 형식 : . ico 또는. png 파일
- 기존에는. ico 확장자만 인식되었지만 요즘은. png 파일도 모두 적용 되고 더 높은 화질이라 많이 사용하고 있습니다.
- 이미지 사이즈 : 픽셀 기준 16*16, 32*32, 48*48 정도를 가장 많이 사용하고 있으며 더 크더라도 사용은 가능합니다. 해상도를 높여 주는 역할을 하지만 굳이 더 사이트를 무겁게 할 필요는 없어 보입니다.
- 제작 방법 : 기존에 많이 제공하는 이미지 편집 프로그램을 이용하면 되고 포토샵이나 기본적인 파비콘 만들기 검색 후 생성해도 충분히 이용할 수 있습니다. 미리캔버스도 가능하겠네요.
그리고 요즘 ChatGPT 같은 제품을 무료로도 사용 가능하니 해당 AI에서 파비콘을 내 사이트 이미지에 맞게 만들어 달라고 해서 사이즈에 맞게 받을 수 있으니 사용하셔도 됩니다. 복잡하게 이미지 만들기 힘드시다면 이런 인공지능을 통해 금방 만들 수 있으니 참고하시기 바라겠습니다.
Favicon 생성하기
기본적으로 블로그스팟, 티스토리와 같은 곳에서는 파비콘 삽입 가능한 방법이 있기 때문에 해당 사이트에서 "파비콘"을 찾아서 이미지 업로드 후 저장만 해도 됩니다.
하지만 워드프레스 같은 자체 사이트는 아래와 같이 설정해 줍니다.
- 관리자 페이지 접속
- 사용자 정의 - 사이트 아이덴티티 - 사이트 아이콘 선택 - 업로드
일부 메타태그를 수정해 할 수도 있을 때 아래의 HTML을 적용하면 됩니다.
- <link rel="icon" type="image/png" sizes="16x16" href="/이미지경로. png">
<link rel="icon" type="image/png" sizes="32x32" href="/이미지경로. png">
<link rel="icon" type="image/png" sizes="48x48" href="/이미지경로_48x48.png">
<link rel="shortcut icon" href="/favicon.ico">
마지막 단계 캐시 정리
기존의 설정된 Favicon이 있다면 만들기 후에도 계속 기존 형태가 보이는 경우가 있습니다. 그럴 땐 아래 방식을 이용한 캐시 삭제 후 새로 고침을 하면 확인 가능합니다.
- 브라우저 캐시 정리 : 설정 - 개인정보 보호 - 데이터 삭제
- 새로고침 강제 적용 : Ctrl + F5(윈도), Cmd+Shift+R(Mac)
보통은 시간이 조금 지나면 자동 적용되니 크게 걱정하지 않아도 됩니다.
마치며
블로그나 사이트를 직접 관리하다 보면 생각보다 많은 것을 놓치게 되고 많은 것을 해야 하는 경우가 있습니다. 그래서 오늘은 파비콘 만들기 같은 간단한 설정을 복잡하게 생각하지 않고 간단히 설정하실 수 있도록 안내드렸습니다. 이런 세팅도 중요하지만 블로그나 사이트를 운영하시려면 좀 더 SEO 최적화 기준에 집중하시는 것도 가장 중요할 수 있으니 오랜 고민하지 마시고 빠르게 설정 후 추후에 더 나은 이미지도 바꾸셔도 됩니다.
2025.03.01 - [분류 전체보기] - Convergence AI 컨버전시 사용법 노코드 인공지능 초보도 가능해요
Convergence AI 컨버전시 사용법 노코드 인공지능 초보도 가능해요
Convergence AI (컨버전시)는 코딩을 못하는 노코드 유저들도 아주 쉽게 이용할 수 있는 플랫폼입니다. 기존의 복잡한 개발 과정을 직관적인 인터페이스로 단순화하여, 프로그래밍 지식이 없는 일반
caromance.com
2025.02.27 - [분류 전체보기] - Claude 3.7 클로드 소넷 (Sonnet) 초보자도 쉽게 시작하는 AI 비서 활용법
Claude 3.7 클로드 소넷 (Sonnet) 초보자도 쉽게 시작하는 AI 비서 활용법
인공지능의 발전으로 일상과 업무에 AI 도구가 필수가 되고 있습니다. 그중에서도 Anthropic의 Claude는 주목받는 AI 비서로 자리매김했습니다. 특히 2025년 2월 출시된 Claude 3.7 Sonnet은 향상된 성능으
caromance.com
2025.02.19 - [분류 전체보기] - Make (메이크) AI 자동화 플랫폼 쉬운 사용법 알기
Make (메이크) AI 자동화 플랫폼 쉬운 사용법 알기
요즘 대세인 AI 중에서도 자동화 플랫폼으로 만들 수 있는 Make AI가 대세입니다. 이 에이아이는 다양한 앱과 서비스를 연결하여 업무를 자동화하는 노코드(No-Code) 플랫폼입니다. 즉 어려운 코딩
caromance.com
댓글