홈페이지 파비콘(favicon)은 사용자가 홈페이지는 기억하기에 좋은 도구로 사용되는 것 같습니다. 아이콘 형태의 이미지로 브라우저에서 즐겨찾기 또는 브라우저 탭의 홈페이지명 왼쪽에 있으며, 여러 곳에서 확인할 수 있습니다.
파비콘 만들어서 추가하는 방법
초보 시절에는 파비콘(favicon)의 확장자는 ico만 가능했지만, 요즘은 png도 가능합니다. 오늘 소개해 드릴 부분은 png 파일을 만들어서 아주 간단하게 홈페이지 파비콘을 추가하는 방법을 알려드리겠습니다.
파비콘 만들기 : 미리캔버스
- 브라우저로 미리캔버스 워크스페이스 접속합니다.
- 로그인은 각자 알아서 해주세요. 구글 계정으로 로그인
- 홈페이지 상단 오른쪽 “새 디자인 만들기“를 선택 후 직접 직접 입력을 선택합니다.
- 파비콘 권장 사이즈를 인터넷에서 검색 후 원하는 사이즈를 입력합니다. 전 256 x 256으로 입력했습니다.
- 이미지 편집기가 보이고, 백지 캔버스가 보이는데 여기에서 오늘은 간단하게 영문으로 만들어 보겠습니다.
- 왼쪽에서 텍스트를 선택하시고, 스타일에서 제목 텍스트 추가를 선택하면, 캔버스에 제목을 입력해주세요.가 활성화 됩니다.
- 영문 대문자 “W“를 입력하고, 글자 크기는 마우스를 이용해서 백지에 꽉 채워주도록 조절합니다.
- 조절 후 웹페이지 상단 오늘쪽에 다운로드를 선택합니다.
- 파일 형식은 PNG 선택(자동선택). 바로 아래 투명한 배경 체크해서 선택 후 빠른 다운로드를 선택하면 PC에 다운로드 됩니다.
- 다운로드된 PNG 파일은 배경이 투명한 이미지인지 확인하면 끝
홈페이지 파비콘 추가하는 방법
⭐ 홈페이지 파비콘 추가를 위해 사용한 프로그램이 한가지 있습니다. VSCODE 입니다. VSCODE가 없다면 FTP 프로그램은 있어야 합니다.
- 다운받은 파비콘(png 파일)을 홈페이지 FTP의 특정 위치에 업로드 합니다.
- 특정 위치라 함은 http://도메인/img/파비콘.png 이런 주소로 브라우저 접속 시 업로드 한 이미지가 보이면 성공입니다.
- 홈페이지 html 코드를 추가를 해야합니다. 아래 코드를 추가 하시면됩니다.
<link rel="icon" href="http://도메인/img/파비콘.png" type="image/png">- 위 코드를 <head></head> 사이에 추가를 해주시면 끝.
- 도메인으로 접속해서 브라우저 탭에 추가한 파비콘이 보이면 성공입니다.
마무리
홈페이지 파비콘 추가를 하면 사용자가 해당 홈페이지를 인식하는 게 큰 도움을 줄 수 있습니다. 심지어 즐겨찾기를 했다 하면 설정된 파비콘이 보일 것이고, 이게 어떤 홈페이진지 파비콘만 봐도 알게 됩니다. 없는 것보다는 있는 것이 홈페이지를 알리는 데 도움이 되고, 생각보다 어려운 부분이 아닌데 많은 분이 놓치고 있는 것 같습니다.