์›น์‚ฌ์ดํŠธ ์•„์ด์ฝ˜ (Favicon) ๋งŒ๋“ค๊ธฐ

์ž์‹ ๋งŒ์˜ ๋ธ”๋กœ๊ทธ/์›น์‚ฌ์ดํŠธ์— ์•„์ด์ฝ˜์„ ์ž…ํžˆ์ž.

๋„ค์ด๋ฒ„, ํ‹ฐ์Šคํ† ๋ฆฌ ๋“ฑ ๋ธ”๋กœ๊ทธ ํ”Œ๋žซํผ์„ ์ด์šฉํ•˜์ง€ ์•Š๊ณ  ์ž์‹ ๋งŒ์˜ ๋ธ”๋กœ๊ทธ์™€ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค๋ฉด, ์ด์ œ ์ฐจ์ธฐ ๋ถ€์กฑํ•จ์„ ๋А๋ผ๊ธฐ ์‹œ์ž‘ํ•  ๊ฒƒ์ด๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๋ธ”๋กœ๊ทธ ํ”Œ๋žซํผ์—์„œ ์ œ๊ณตํ•˜๋Š” ๋‹ค์–‘ํ•œ ์„œ๋น„์Šค๋ฅผ ์•Œ๊ฒŒ ๋ชจ๋ฅด๊ฒŒ ๋ˆ„๋ฆฌ๊ณ  ์žˆ์—ˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์ธ์ง€ํ•œ๋‹ค. ์ฒ˜์Œ์—๋Š” ๋ณ„๊ฑฐ ์•„๋‹ˆ๊ฒŒ ์ƒ๊ฐํ–ˆ๋˜๊ฒƒ๋“ค์ด ๋ˆˆ์— ๊ฑฐ์Šฌ๋ฆฌ๊ธฐ ์‹œ์ž‘ํ•œ๋‹ค.

๊ฐ€์žฅ ์ฒ˜์Œ ๋ˆˆ์— ๋“ค์–ด์˜จ ๊ฒƒ์€ ์•„์ด์ฝ˜์ด๋‹ค. ์ด์˜์ง€๋Š” ์•Š๋”๋ผ๋„, ์ €๋ ‡๊ฒŒ ๋น„ํ™œ์„ฑํ™” ๋œ๋“ฏํ•˜๊ฒŒ ๋ณด์ด๋Š” ์•„์ด์ฝ˜์€ ์ข€ ์•„๋‹ˆ์ง€๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค.

image-20210531110247169

์ด์˜๊ฒŒ ๋งŒ๋“œ๋Š” ์ผ์€ ์‹œ๊ฐ„์ด ๋  ๋•Œ ์กฐ๊ธˆ์”ฉ ํ•˜๋ฉด ๋ ๊ฒƒ์ด๊ณ , ์ผ๋‹จ์€ ๊ตฌ์ƒ‰๋ถ€ํ„ฐ ๊ฐ–์ถ”์ž.

ํŒŒ๋น„์ฝ˜(Favicon) ์ด๋ž€?

ํŒŒ๋น„์ฝ˜์€ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋Œ€ํ‘œํ•˜๋Š” ์•„์ด์ฝ˜ ์ด๋ฏธ์ง€๋กœ์จ, ์›น๋ธŒ๋ผ์šฐ์ €๋ฅผ ์—ด์—ˆ์„ ๋•Œ ํƒญ์œ„์— ํ‘œ๊ธฐ๋˜๋Š” ์•„์ด์ฝ˜ ์ด๋ฏธ์ง€๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์€ ์ด๋ฏธ์ง€ ๋“ค์ด๋‹ค.

image-20210531123313092

์›น์‚ฌ์ดํŠธ์˜ <head> ์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ link ์„ ์–ธํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

<link rel="shortcut icon" href="http://mysite.com/myicon.ico"/>

๋˜๋Š” ๋‹ค์Œ์ฒ˜๋Ÿผ ์ƒ๋Œ€์ฃผ์†Œ๋„ ๊ฐ€๋Šฅํ•œ๋‹ค.

<link rel="shortcut icon" href="/myicon.ico"/>

์•„์ด์ฝ˜(Icon) ์ค€๋น„

ํŒŒ๋น„์ฝ˜(Favicon)์ด ๋ฌด์—‡์ธ์ง€, ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ• ์ง€ ์•Œ์•„๋ณด์•˜์œผ๋‹ˆ, ์ด์ œ ์‹ค์ œ ์žฌ๋ฃŒ(์•„์ด์ฝ˜)์„ ์ค€๋น„ํ•  ์ฐจ๋ก€์ด๋‹ค. ์ด๋ฏธ ์•„์ด์ฝ˜์ด ์žˆ๊ฑฐ๋‚˜, ํฌํ† ์ƒต ๋“ฑ์œผ๋กœ ๋งŒ๋“ค์–ด ๋†“์€ ์•„์ด์ฝ˜์ด ์žˆ๋‹ค๋ฉด ๋‹ค์Œ Section์œผ๋กœ ๊ฑด๋„ˆ ๋›ฐ๋ฉด ๋œ๋‹ค.

๋งŒ์•ฝ, ์ €์™€ ๊ฐ™์ด ๋””์ž์ธ์— ์ทจ์•ฝํ•œ ์‚ฌ์šฉ์ž๋ผ๋ฉด, ๋‹ค์Œ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ๋Œ€์ถฉ์ด๋ผ๋„ ์•„์ด์ฝ˜์„ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ๋ฅผ ๊ถŒํ•œ๋‹ค. (ํฌํ† ์ƒต, ์ผ๋Ÿฌ์ŠคํŠธ๋ ˆ์ดํ„ฐ ๋“ฑ ์ด๋ฏธ์ง€ ํŽธ์ง‘ํˆด์ด ์žˆ์œผ๋ฉด ๊ทธ๋ƒฅ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค. )

์›น ์ด๋ฏธ์ง€ ์—๋””ํ„ฐ

๊ณผ๊ฑฐ์—๋Š” ํฌํ† ์ƒต์„ ๋งŽ์ด ์‚ฌ์šฉํ–ˆ์—ˆ๋‹ค. ํ•™๊ต/๊ธฐ๊ด€ ๋ผ์ด์„ ์Šค ๋“ฑ์ด ์žˆ์–ด์„œ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ, ์š”์ฆˆ์Œ์€ ๊ธฐ๊ด€ ๋ผ์ด์„ ์Šค ๋ฐ›์€ ๊ฒƒ๋“ค๋„ ์—†๊ณ  ํฌํ† ์ƒต์„ ์‚ฌ์šฉํ•ด ๋ณธ์ง€ 10๋…„์ด ๋‹ค ๋˜์–ด ๊ฐ€๋Š”๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ž˜๋„ ๊ณผ๊ฑฐ ์‚ฌ์šฉํ•œ ํฌํ† ์ƒต ์Šคํƒ€์ผ์ด ์ด๋ฏธ์ง€ ํŽธ์ง‘์— ์†์— ์ต์–ด์„œ ํŽธํ•˜๋‹ค.

์ด๋Ÿฌํ•œ ํฌํ† ์ƒต์˜ UI์™€ ์ƒ๋‹นํžˆ ๋น„์Šทํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ๋†“์€ ์›น์ด๋ฏธ์ง€ ์—๋””ํ„ฐ๊ฐ€ ์žˆ์–ด์„œ ์†Œ๊ฐœ ํ•œ๋‹ค. ์›น์‚ฌ์ดํŠธ์—์„œ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณ„๋‹ค๋ฅธ ์„ค์น˜๊ฐ€ ํ•„์š”์—†๊ณ , Layered ๊ด€๋ฆฌ๋ฅผ ์ž˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํƒ€ ์›น์ด๋ฏธ์ง€ ์—๋””ํ„ฐ ๋Œ€๋น„ ์‚ฌ์šฉ์ด ํŽธํ•œ๊ฒƒ ๊ฐ™๋‹ค.

์›น์‚ฌ์ดํŠธ์— ์ ‘์†ํ•˜๋ฉด, PIXLR ์—๋””ํ„ฐ๊ฐ€ 2์ข…๋ฅ˜๊ฐ€ ์žˆ๋‹ค. 1) ํฌํ† ์ƒต๊ณผ ๊ฐ™์€ Photo Editor, 2) ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑ์„ ์œ„ํ•ด ํ…œํ”Œ๋ฆฟ๋ฒ ์ด์Šค๋กœ ๊ตฌ๋™๋˜๋Š” ๋””์ž์ธ์—๋””ํ„ฐ. ๊ฐ๊ฐ ํŠน์ง•์ด ์žˆ๊ณ  ๋„์›€์ด ๋œ๋‹ค.

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” Photo Editor๊ฐ€ ํ•„์š”ํ•˜๋‹ค. Design Editor๋Š” ๊ฐ์ž ํ•œ๋ฒˆ ์‚ฌ์šฉํ•ด ๋ณด๊ธฐ๋ฅผ ๊ถŒํ•œ๋‹ค.

์›น์ด๋ฏธ์ง€์—๋””ํ„ฐ PIXLR

์ด๋ฏธ์ง€์—๋””ํ„ฐ E๋ฉ”๋‰ด ๋””์ž์ธ์—๋””ํ„ฐ X๋ฉ”๋‰ด
PIXLR E : https://pixlr.com/kr/e/#editor PIXLR X : https://pixlr.com/kr/x

์ด๋ฏธ์ง€ ์—๋””ํ„ฐ๋Š” ํฌํ† ์ƒต๊ณผ ๋งค์šฐ ์œ ์‚ฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋งŽ์€ ์‚ฌ์šฉ์ž๋“ค์ด ์ต์ˆ™ํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค. ํ•„์ž์˜ ๊ฒฝ์šฐ, ๋Œ€์ถฉ Gradient๋กœ ๋ฐฐ๊ฒฝ ์ƒ‰์„ ์ฑ„์šฐ๊ณ , ๋„ํ˜• ๋ช‡๊ฐœ ๊ทธ๋ฆฐ ๋‹ค์Œ ๋ผ์šด๋“œ๋ฅผ ์ฃผ์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ €์žฅ.. ์•ฝ 5๋ถ„ ์ •๋„ ๊ฑธ๋ฆฐ๊ฒƒ ๊ฐ™๋‹ค.

์šฐ์ธก ์ด๋ฏธ์ง€๋Š” ํ…œํ”Œ๋ฆฟ ๋””์ž์ด๋„ˆ (PIXLR X)ํ™”๋ฉด์ด๋‹ค. ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์œ ํ˜•์˜ ํ…œํ”Œ๋ฆฟ์„ ์ œ๊ณตํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ์•„์ฃผ ๋น ๋ฅด๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ญ”๊ฐ€๋ฅผ ๋งŒ๋“ค์–ด ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ๋‹จ์ ์œผ๋กœ๋Š” ์œ ๋ฃŒ ๊ธฐ๋Šฅ์ด ๋งŽ์•„์„œ ์‚ฌ์šฉ์— ์ œํ•œ์ด ๋˜๋Š” ์ ์ด๋‹ค. ํŠธ๋ผ์ด์–ผ ๋ฒ„์ „์„ ์ œ๊ณตํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ์ž ์‹œ ์‚ฌ์šฉํ•ด ๋ณด๊ณ  ์ง€์† ์‚ฌ์šฉ์—ฌ๋ถ€๋Š” ๊ทธ ๋•Œ ๊ฐ€์„œ ๊ฒฐ์ •ํ•ด๋„ ๋˜๋ฏ€๋กœ, ์ผ๋‹จ ๋ฌด๋ฃŒ ๊ธฐ๋Šฅ์„ ์จ๋ณด๋Š” ๊ฒƒ์œผ๋กœ... ์ฟจ๋Ÿญ.!

์•„๋ž˜์™€ ๊ฐ™์€ ํ…œํ”Œ๋ฆฟ๋“ค์„ ์ œ๊ณตํ•œ๋‹ค. ๋น ๋ฅด๊ฒŒ ๋ฌด์—‡์ธ๊ฐ€๋ฅผ ํ•ด๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.

image-20210531111153271 image-20210531111345396

๊ธฐํƒ€ ๋””์ž์ธ ์—๋””ํ„ฐ (๋ง๊ณ ๋ณด๋“œ)

์šฉ๋„๊ฐ€ ๋‹ค๋ฅด๊ธด ํ•˜์ง€๋งŒ, ์›น ์ƒ์—์„œ ๋””์ž์ธ/ํฌ์Šคํ„ฐ๋ฅผ ๋งŒ๋“ค ๋•Œ ๊ตญ๋‚ด ์„œ๋น„์Šค์ธ ๋ง๊ณ ๋ณด๋“œ๋ฅผ ์ฐธ์กฐํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

๋ง๊ณ ๋ณด๋“œ-ํฌ์Šคํ„ฐ๋ฅผ ๋งŒ๋“ค๋•Œ ์œ ์šฉํ•˜๋‹ค

์•„์ด์ฝ˜ ํ™•๋ณด ์™„๋ฃŒ

์–ด์จŒ๋“ , ๊ตฌ์ƒ‰๋ถ€ํ„ฐ ๊ฐ–์ถ”์ž. ํ•„์ž๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋Œ€์ถฉ 5๋ถ„๋งŒ์— ์•„์ด์ฝ˜์„ ํ™•๋ณด ํ–ˆ๋‹ค. (์ง„์งœ ํฐ ์˜๋ฏธ ์—†๋Š” ์•„์ด์ฝ˜์ด๋‹ค. ๊ทธ๋ƒฅ ํšŒ์ƒ‰ ์•„์ด์ฝ˜๋งŒ ์ง€์šฐ๋ ค๊ณ  ๋Œ€์ถฉ ๊ทธ๋ ธ๋‹ค. )

image-20210531110503698

ํ•ด๋‹น ์ด๋ฏธ์ง€๋ฅผ PNG ๋˜๋Š” JPG ๋“ฑ์˜ ์ด๋ฏธ์ง€ ํŒŒ์ผ๋กœ ์ €์žฅํ•œ๋‹ค. ์•„์ด์ฝ˜์„ PNG์ž์ฒด๋กœ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ๋ฒ”์šฉ์„ฑ์„ ์œ„ํ•ด์„œ ICOํŒŒ์ผ๋กœ ๋งŒ๋“ค์–ด ์ฃผ์ž.

์•„์ด์ฝ˜(Icon) ํŒŒ์ผ๋กœ ๋ณ€ํ™˜

PNG ๋“ฑ์˜ ์ด๋ฏธ์ง€์™€๋Š” ๋‹ค๋ฅธ icon ํŒŒ์ผ๋กœ ๋ณ€ํ™˜ ํ•ด์•ผ ์ฃผ์–ด์•ผ ํ•œ๋‹ค. icon์˜ ์‚ฌ์ด์ฆˆ๋Š” 16x16, or 32x32์ด๋‹ค. ๊ตฌ๊ธ€์—์„œ favicon ์ƒ์„ฑ์œผ๋กœ ๊ฒ€์ƒ‰ํ•˜๋ฉด ๋งŽ์€ ์‚ฌ์ดํŠธ๋“ค์ด ๋ณด์—ฌ์ง€๊ธฐ ๋•Œ๋ฌธ์— ์ด์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•ด์„œ ํŒŒ์ผ์„ ์—…๋กœ๋“œ ํ•ด์„œ ๋ณ€ํ™˜ ํ•˜๋ฉด, ๋œ๋‹ค. ์—ฌ๊ธฐ์—์„œ๋Š” ๊ทธ์ค‘ ์˜ˆ๋ฅผ ํ•˜๋‚˜ ๋“ค์–ด ๋ณด๊ฒ ๋‹ค.

์ถ”์ฒœ ICON ์ƒ์„ฑ ์‚ฌ์ดํŠธ

๋‹ค์Œ์€ ๊ฐ ์‚ฌ์ดํŠธ์˜ ํ™”๋ฉด์ด๋‹ค. ์ค€๋น„ํ•œ ์•„์ด์ฝ˜ ํŒŒ์ผ(PNG, JPG)๋ฅผ ์—…๋กœ๋“œํ•˜์—ฌ ICOํŒŒ์ผ๋กœ ๋ณ€ํ™˜ํ•˜๋ฉด ๋œ๋‹ค.

ํŒŒ๋น„์ฝ˜ ์ œ๋„ˆ๋ ˆ์ดํ„ฐ ์•„์ด์ฝ˜ ์ปจ๋ฒ„ํ„ฐ
ํŒŒ๋น„์ฝ˜ ์ƒ์„œ๊ธฐ ์•„์ด์ฝ˜ ์ปจ๋ฒ„ํ„ฐ

์ด ๊ธ€์—์„œ๋Š” ํŒŒ๋น„์ฝ˜ ์ œ๋„ˆ๋ ˆ์ดํ„ฐ๋ฅผ ๋”ฐ๋ผ๊ฐ€๋Š” ๊ฒƒ์œผ๋กœ ํฌ์ŠคํŒ… ํ•œ๋‹ค. ํŒŒ์ด์ฝ˜์— ์ตœ์ ํ™” ๋˜์–ด์„œ ์—ฌ๋Ÿฌ ์•„์ด์ฝ˜์„ ์ƒ์„ฑํ•˜๊ณ , ์ ์šฉํ•˜๋Š” ํ…Œ๊ทธ์— ๋Œ€ํ•œ ๊ฐ€์ด๋“œ๋„ ํ•จ๊ป˜ ์ œ๊ณตํ•œ๋‹ค. (์‚ฌ์‹ค ์–ด๋А ์‚ฌ์ดํŠธ๋ฅผ ์ด์šฉํ•ด๋„ ๋™์ผํ•˜๋‹ค. ) ๋‹ค์Œ์€ ํ•ด๋‹น ์‚ฌ์ดํŠธ์—์„œ ๋ณ€ํ™˜ํ›„ ๋‹ค์šด๋กœ๋“œํ•œ ํŒŒ์ผ๋“ค์ด๋‹ค.

image-20210531110432177

ํŒŒ๋น„์ฝ˜(Favicon) ์ ์šฉ ํ•˜๊ธฐ

์ž. ์ด์ œ ์ž์‹ ์˜ ์›น์‚ฌ์ดํŠธ์˜ ํƒœ๊ทธ ์•ˆ์— ์•„๋ž˜ ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ•ด ์ฃผ๋ฉด, ํŒŒ๋น„์ฝ˜ ์ ์šฉ์ด ์™„๋ฃŒ ๋œ๋‹ค.

<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">

shortcut icon ๊ณผ icon ๋‘๊ฐœ๋ฅผ ์‚ฝ์ž…ํ•œ ์ด์œ ๋Š” ๋ธŒ๋ผ์šฐ์ €๋ณ„๋กœ ์ฐธ์กฐํ•˜๋Š” ํ‚ค์›Œ๋“œ๊ฐ€ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

<link rel="icon" type="image/png" href="favicon.ico" sizes="16x16" />

๊ฒฝ์šฐ์— ๋”ฐ๋ผ์„œ๋Š”, ์œ„ ์ฝ”๋“œ์ฒ˜๋Ÿผ ์‚ฌ์ด์ฆˆ๋ฅผ ๋ช…์‹œํ•˜๋Š” ๊ฒฝ์šฐ๋„ ์žˆ๋‹ค.

Gatsby

์ผ๋ฐ˜์ ์ธ ์›น์‚ฌ์ดํŠธ/๋ธ”๋กœ๊ทธ์˜ ๊ฒฝ์šฐ, favicon.ico ํŒŒ์ผ์„ /public์— ๋„ฃ์–ด ์ฃผ๋ฉด ๋œ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜, Gatsby๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ์— ํ…Œ๋งˆ(Theme) ๋˜๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ(Plugins)์— ์˜ํ•˜์—ฌ ์ด๋Ÿฌํ•œ ํ™˜๊ฒฝ์ด ๋ณ€ํ™”๋˜์–ด ์žˆ์„ ๊ฒฝ์šฐ๋„ ์žˆ๋‹ค. ๋”ฐ๋ผ์„œ, Gatsby์˜ ๊ฒฝ์šฐ์—๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์•ก์…˜์„ ์ถ”๊ฐ€๋กœ ์ง„ํ–‰ํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค.

/static ํด๋”์— favicon.ico ํŒŒ์ผ ๋ณต์‚ฌํ•˜๊ธฐ

๊ธฐ๋ณธ์ ์œผ๋กœ, Gatsby๋Š” ./public ํด๋”๋ฅผ buildํ•  ๋•Œ๋งˆ๋‹ค ๋‹ค์‹œ ์ƒ์„ฑํ•œ๋‹ค. ๋”ฐ๋ผ์„œ, /public ํด๋”์— ์ง์ ‘ ๋ณต์‚ฌํ•ด ๋‘์–ด๋„ ์–ด์ฐจํ”ผ ์‚ญ์ œ ๋œ๋‹ค. ์ด๋Ÿฌํ•œ ์šฉ๋„๋กœ ์‚ฌ์šฉํ•˜๋Š” /static ํด๋”์— ๋ณต์‚ฌํ•ด ๋‘๋ฉด ๋œ๋‹ค.

/src/images ํด๋”์— ico ๋ณ€๊ฒฝ

/src/images์— ๊ฐ€๋ณด๋ฉด, icon.png ํŒŒ์ผ์ด ์žˆ์„ ๊ฒƒ์ด๋‹ค. ์ด ํŒŒ์ผ์„ favicon ์ƒ์„ฑํ•  ๋•Œ ์‚ฌ์šฉํ•œ pngํŒŒ์ผ๋กœ ๊ต์ฒดํ•œ๋‹ค. gatsby๊ฐ€ buildํ•  ๋•Œ ์ด ํŒŒ์ผ๋กœ ๋‹ค์–‘ํ•œ ์‚ฌ์ด์ฆˆ์˜ ์•„์ด์ฝ˜์„ ์ž๋™ ์ƒ์„ฑํ•ด ์ค€๋‹ค.

Gatsby์˜ ๋Œ€๋ถ€๋ถ„์˜ ํ…Œ๋งˆ์—์„œ๋Š” ์ด๋ฏธ <Helmet/> ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ†ตํ•ด์„œ ์ด๋Ÿฌํ•œ ๋ถ€๋ถ„์„ ๊ด€๋ฆฌํ•˜๊ณ  ์žˆ์„ ๊ฒƒ์ด๋‹ค. <Helme> ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ •์˜๋œ ๋ถ€๋ถ„์˜ ํŒŒ์ผ์— ๊ฐ€์„œ ๋‹ค์Œ์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

<Helmet>
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="icon" href="favicon.ico" />
        <link rel="icon" type="image/png" href="favicon.ico" sizes="16x16" />
        .... ๊ธฐํƒ€ ๋‹ค๋ฅธ ๋ฉ”ํƒ€ํ…Œ๊ทธ ....
      </Helmet>

๋ธŒ๋ผ์šฐ์ €์—์„œ ํ…Œ์ŠคํŠธ ํ•  ๋•Œ, ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ณผ๊ฑฐ์— ์ด๋ฏธ ์บ์‹œํ•œ iconํŒŒ์ผ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, icon์„ ๋ณ€๊ฒฝํ–ˆ๋Š”๋ฐ๋„ ํ™”๋ฉด์ด ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, ์บ์‹œ๋ฅผ ๋น„์šฐ๊ณ  ๋‹ค์‹œ ํ•ด ๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

Chrome Browser

image-20210531122131654

Firefox

image-20210531122045327

ยฉ 2025 S.J.Lee, Built with Gatsby