본문 바로가기
워드프레스

사이트에 아이콘, 파비콘 추가 - 워드프레스

by porsche-ai 2024. 2. 9.

이번엔 제대로 된 블로그를 만들기 위한 작지만 중요한 작업을 알려드리고자 합니다. 블로그의 아이콘과 파비콘을 만드는 작업입니다. 구글 SEO (Search Engine Optimization)이 좋아하는 로직 중의 하나라고 합니다. 이 화면에 들어오기 전에 워드프세스 뉴스페이퍼 테마를 설치하고 이것을 셋업하는 방법은 해당 카테고리의 다른 글을 보시면 됩니다.

 

아이콘, 파비콘 셋업

아이콘과 파비콘은 무료사이트에서 만들수 있습니다. 아이콘은 사이트에서 나만을 나타낼수 있는 그야말로 아이콘의 역할을 합니다. 파비콘은 우리가 웹을 검색하면 결과에 나오는 아이콘을 얘기합니다. 파비콘을 세팅해 놓으면 즐겨찾기라던지 웹 검색을 했을때 해당 내용이 보여집니다. 가장 많이 사용되는 공짜 아이콘 만드는 사이트로 'Hatchful'을 검색합니다.

구글 검색 - Hatchful

구글에서 위의 검색결과를 얻으실 수 있습니다. 이 중에서 두번째 항목인 'Shopify'의 사이트를 클릭합니다.

Hatchful 검색 결과

위의 화면을 보실 수 있습니다.

여기서 부터 차례로 아래의 순서로 진행합니다. 일단 'CREATE A LOGO NOW'를 클릭합니다.

비즈니스 영역 선택 화면

여기서 다양한 여러분이 원하시는 비즈니스 영역을 선택하실 수 있습니다. 저는 편의상 워드프레스와 관련이 있는 아이콘을 만들기 위해 'Tech' 영역을 선택하겠습니다.

아이콘 설정 - 스타일 설정

Tech 영역 중에서 여러분이 원하는 스타일을 선택할 수 있습니다. 저는 편의상 'Creative'를 선택하겠습니다.

로고를 위한 정보 입력

여러분의 비즈니스 명과 슬로건을 입력합니다.

어떤 용도에 아이콘을 넣을지 질문

스타일을 선택하면 그 다음에 어떤 용도로 사용할 지 묻습니다. 저는 블로그를 위한 아이콘이므로 'Social media'를 선택하고 'Next' 버튼을 누르겠습니다.

만들어진 로고

그럼 위의 그림과 같이 다양하게 만들어진 로고를 보실 수 있습니다. 이중에 마음에 드는 로고를 선택하시면 됩니다.

저는 보라색의 아이콘을 선택하겠습니다.

선택된 로고

그럼 위의 그림과 같은 화면을 보실 수 있습니다. 'Next' 버튼을 누르면 다음과 같은 화면을 보실수 있습니다.

선택된 로고

여러분이 로그인을 하셨을때 사용했던 이메일로 로고 파일을 전송한다는 메시지을 보실 수 있습니다. - 1번

로고 세팅 메뉴

이후 admin 메뉴 (https://사이트명/wp-admin/)로 오시면 위의 화면을 보실 수 있으며 이중 오른쪽의 Newspaper의 HEADER를 클릭하시면 'Logo & Favicon'이라는 메뉴를 보실 수 있습니다. - 2번

로고 & 파비콘

로고의 '업로드'를 클릭하면 다음의 화면을 보실 수 있습니다.

로고 업로드

'파일 선택'을 누르기고 1번에서 이메일로 다운로드 한 파일의 폴더로 이동합니다.

로고 선택

이메일에서 다운로드한 파일을 풀고, 그 중에 'logo.png'를 선택하고 '열기' 버튼을 클릭합니다.

로고 업로드

그럼 위의 그림과 같이 선택된 로고 파일을 업로드한 화면을 볼 수 있습니다. 여기서 아래의 '글에 삽입하기' 버튼을 클릭합니다.

로고가 적용된 홈페이지

위와 같이 홈페이지에 적용된 로고를 볼 수 있습니다.

파비콘은 위의 2번 화면에서 파비콘 (FAVICON)의 업로드를 누르고 이메일에서 다운받은 파일 중에 'favicon.png'를 선택하시면 됩니다.

이것을 통해 Newpaper 테마의 세팅을 이용해 아이콘과 파비콘을 설치하는 것까지 완성을 하였습니다.