Safari의 마스크 아이콘 변경하기

Safari는 macOS와 iOS에 기본적으로 제공되는 웹 브라우저입니다. 티스토리 반응형 스킨, 프라치노 공간은 이 웹 브라우저를 위한 마스크 아이콘을 지원합니다.

Safari 웹 브라우저를 실행했을 때 MacBook Pro의 Touch Bar에 표시된 마스크 아이콘과 고정된 탭에 표시된 마스크 아이콘

마스크 아이콘은 Safari 웹 브라우저를 실행했을 때 MacBook Pro의 Touch Bar에 표시되는 아이콘 또는 고정된 탭에 표시되는 아이콘을 의미합니다. Illustrator나 Inkscape 등의 벡터 이미지 편집 프로그램을 다룰 줄 안다면 이것을 손쉽게 변경할 수 있습니다.

image_mask.svg 벡터 이미지 파일

아이콘 편집하기

images 폴더에 있는 image_mask.svg 파일을 엽니다. 이 벡터 이미지 파일은 너비와 높이가 16픽셀인 정사각형으로 작은 편입니다. 도형은 검정색이고 단일 레이어여야 합니다.

파일 편집이 완료되면 파일을 업로드한 뒤 브라우저의 캐시를 초기화합니다.

아이콘 컬러 설정하기

아이콘 컬러는 skin.html을 편집하여 설정합니다. 이 파일은 블로그 관리 페이지에서 ‘HTML / CSS 편집’으로 이동한 다음 ‘HTML’ 탭에서 편집할 수 있습니다. 13번째 줄을 보면 아래의 코드가 보일 것입니다.

<link rel="mask-icon" href="./images/image_mask.svg" color="#0c4666" />

눈여겨 봐야 할 코드는 #0c4666입니다. 이를 다른 16진수 컬러값으로 변경합니다. 예를 들어 아이콘 컬러를 경쾌한 파랑으로 바꾸고 싶다면 #3399ff로 변경합니다.

편집이 완료되면 스킨을 저장하고 마스크 아이콘이 제대로 작동되는지 확인합니다.

티스토리 툴바