favicon(파비콘) 만들기 전 주의사항

favicon(파비콘)이란?

: favicon은 favorites + icon의 합성어

: 인터넷 웹 브라우저 주소창에 표시되며, 웹사이트나 웹 페이지를 대표하는 아이콘

Favicon을 설계하는 방법

파비콘 디자인에 대해 알아야 할 것은 황금률, 팁, 편리한 파비콘 치트시트입니다.

파비콘 디자인은 중요하다.

잘 디자인된 로고는 어떤 크기로 보든 알아볼 수 있어야 하기 때문에 크기는 정말 중요하다.

그것은 거대한 화면에서 파비콘으로 알려진 16 x 16 픽셀 크기의 아이콘으로 바로 축소될 필요가 있다.

파비콘 디자인의 좋은 예는 구글 로고이다.

그것은 큰 'G'와 독특한 4색 글씨로 더 큰 화면에 완벽하게 작동한다.

그리고 웹 브라우저 주소 표시줄에서 볼 수 있는 작은 네 가지 색깔의 'G'로 줄어들어도 여전히 알아볼 수 있다.

완벽한 파비콘을 디자인하는 과정을 살펴보자.

Apple 기기, Android, Chrome, Opera 및 Safari용 파비콘을 만들기 위한 구체적인 팁을 포함한다.

또한 알아야 할 다양한 파비콘 크기와 형식에 대한 유용한 가이드를 제공한다.

웹의 초기에는 favicon은 단순히 16x16px 아이콘 파일이었지만 요즘은 조금 더 복잡하다.

문맥에 따라 각기 다른 파비콘 크기와 프로세스가 있다.

적절한 파비콘을 만드는 것은 과학이다.

FAVICON 설계 규칙

1. 인식 가능

파비콘 디자인을 할 때 가장 먼저 고려해야 할 것은 캔버스에 표현해야 하는 것이다.

favicon으로 사용자를 끌어들이려고 할 필요가 없다.

ㄴ 왜냐하면 favicon은 사용자가 이미 웹 사이트에 있거나 즐겨찾기에 추가한 경우에만 사용자에게 표시된다.

2. 로고를 사용
favicon은 사용자가 책갈피 목록과 홈크림을 검색할 때 웹 사이트를 쉽게 알아볼 수 있도록 도와주는 게시물이다.

따라서 로고 또는 사용자가 웹 사이트를 가장 쉽게 인식할 수 있는 기호를 사용한다.

2차 캔버스에 맞는 로그마크가 없는 경우 로고에서 가장 알아보기 쉬운 부분을 사용한다.

3. 확실히 해두기 (피해야 하는 사항들)

마케팅 도구로 favicon을 사용하지 말기

ㄴ 가격표, '신규' 또는 '업데이트' 배너 등이 없다.

favicon 안에 텍스트 넣지 말기

ㄴ 글자의 배율이 잘 맞지 않고, 어차피 판독이 안 될 가능성이 크다.

사진 사용하지 말기

ㄴ 사진이 흐릿하고 사진이 표시되는 크기를 인식할 수 없다.

4. 두 가지 버전 만들기

파비콘이 인터넷 익스플로러 5에 처음 도입되었을 때 URL 표시줄과 책갈피 목록에 나타났다.

오늘날 파비콘은 책갈피 목록, 바로 가기 메뉴, 심지어 모바일 및 TV 홈크리어를 포함한 많은 다른 컨텍스트에서 표시됩니다.

따라서 최종 사용자에게 패비콘이 어떻게 표시될지 예측하기 어렵습니다.
다양한 상황에서 파비콘이 잘 보이도록 하려면 두 가지 파비콘 스타일을 제공하는 것이 좋습니다.

투명 배경에 로고
이 버전은 URL 표시줄, 책갈피 목록 및 웹 사이트 URL 또는 이름 옆에 favicon이 나타나는 기타 위치에 표시됩니다.

배경색이 있는 로고
브라우저나 장치가 배경을 마스킹하는 그리드 같은 북마크와 바로 가기 메뉴에 사용되어 컨텍스트에서 균일한 모양을 구현합니다.

기존에는 파비콘을 ICO 형식으로 제공해야 했다.

현재는 파일을 PNG 형식으로 제공해도 된다. (Svg로 제공되어야 하는 Safari Pinned Tab 아이콘 제외)

데스크톱 브라우저 favicon을 만드는 방법
먼저 만들어야 할 가장 간단한 파비콘인 클래식 데스크톱 브라우저용 파비콘부터 시작하겠습니다.

이러한 유형의 파비콘은 URL 표시줄과 책갈피 목록에 자주 나타나기 때문에 투명한 배경에 가장 적합합니다.

Google Chrome의 책갈피 모음 및 URL 표시줄에 표시되는 파비콘
이러한 유형의 파비콘은 세 가지 크기로 제공되어야 하며, 모두 PNG 형식으로 투명한 배경화면입니다.

16x16
32x32
48x48

Apple Touch favicon을 만드는 방법
애플의 iOS는 애플 터치 아이콘을 사용하여 iOS 홈 스크린에 저장된 웹 사이트를 책갈피로 표시합니다.

이는 애플 터치 아이콘이 iOS 앱 아이콘의 스퀴클 마스크로 반올림된다는 것을 의미합니다.
또한 사용자가 홈스크린으로 선택한 배경에도 표시됩니다.

이러한 점을 염두에 두고 Apple Touch 아이콘은 채워진 배경 스타일을 가져야 합니다.

이 파비콘은 사용자의 홈 스크린 배경에 표시됩니다.
애플 파비콘은 PNG 형식으로 공급되어야 합니다.

다양한 아이폰과 아이패드 크기에 맞게 자동으로 확장되는 180x180 애플 터치 아이콘을 제공하면 벗어날 수 있습니다.

대부분의 경우 이 방법은 잘 작동합니다.

그렇지 않으면 다음과 같이 다양한 Apple 장치에 대한 추가 크기를 제공할 수 있습니다.
60x60
76x76
120x120
152x17
180x180

Android, Chrome 및 Opera용 패비콘을 만드는 방법
Android, Chrome 및 Opera는 Google이 권장하는 Android-chrome-192x192.png 및 Android-chrome-512.png를 사용합니다.

안드로이드에 적응형 아이콘이 도입된 이후 안드로이드 홈스크린에 추가된 웹사이트는 192x192 디자인을 마스킹하기 때문에 사용자가 선호하는 마스킹 스타일을 따라 아이콘이 형성된다.

이것은 뭉툭한 모양, 줄임표 모양, 직사각형, 둥근 직사각형 또는 눈물방울 모양일 수 있다.

여기에 있는 favicon은 사용자 기본 설정에 따라 다른 모양으로 마스킹됩니다.
192x192와 512x512에 솔리드 배경을 가진 PNG favicon을 만들어야 합니다.

Safari 고정 탭을 위한 Favicon을 만드는 방법
이것은 홀수 아웃이며 SVG 파일로 벡터 형식으로 제공되어야 하는 유일한 파비콘입니다.

사용자가 Safari 브라우저 창에 탭을 고정하면 축소판 그림 아이콘으로 표시됩니다.

다른 모든 파비콘과 달리 이 아이콘은 SVG 이미지에서 생성됩니다
이 favicon은 배경이 투명한 100% 검은색 SVG 파일이어야 합니다.

SVG는 하나의 계층만 될 수 있으며, 사파리에서는 SVG의 viewBox 특성을 "0 0 16"으로 설정해야 합니다.

파비콘 삽입 방법

<head>와</head>사이에 넣기

https://www.creativebloq.com/illustrator/create-perfect-favicon-12112760#section-favicon-design-rules

'🧡 UIUX > UIUX STUDY' 카테고리의 다른 글

내가 원하는 회사와 회사가 원하는 JD(job description) 분석 (0)	2022.02.12
저니맵(journey map) (0)	2022.02.12
유저 져니맵(User Journey Map) (0)	2022.02.11
디자인 씽킹(Design Thinking), 그리고 서비스디자인의 모든 것 (0)	2022.02.10
디자인 씽킹 Design Thinking (와우디랩 강의) (0)	2022.02.10

favicon(파비콘) 만들기 전 주의사항

favicon(파비콘)이란?

Favicon을 설계하는 방법

파비콘 디자인에 대해 알아야 할 것은 황금률, 팁, 편리한 파비콘 치트시트입니다.

FAVICON 설계 규칙

파비콘 삽입 방법

'🧡 UIUX > UIUX STUDY' 카테고리의 다른 글

댓글

티스토리툴바

favicon(파비콘) 만들기 전 주의사항

favicon(파비콘)이란?

Favicon을 설계하는 방법

파비콘 디자인에 대해 알아야 할 것은 황금률, 팁, 편리한 파비콘 치트시트입니다.

FAVICON 설계 규칙

파비콘 삽입 방법

'🧡 UIUX > UIUX STUDY' 카테고리의 다른 글

관련글

댓글

티스토리툴바