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>์ฌ์ด์ ๋ฃ๊ธฐ
<link rel="shortcut icon" href="ํ๋น์ฝ์ฃผ์.ico" type="image/x-icon">
'๐งก 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 |
๋๊ธ