[HTML] 파비콘(favicon) 만들기 | 웹 사이트 적용하기

💻Coding/📓 HTML

[HTML] 파비콘(favicon) 만들기 | 웹 사이트 적용하기 | html 작성하기(meta tag)

음은응 2022. 8. 1. 08:52

728x90

파비콘(favicon) 만들기
웹 사이트 적용하기
html 작성하기 : meta tag

✅ 파비콘(favicon)이란?
→ 웹 사이트를 대표하는 아이콘으로 웹브라우저의 주소창에 아이콘으로 표시되는 이미지를 말합니다.

✅ 파비콘(favicon) 만드는 방법
→ 포토샵(photoshop)이나 일러스트(ai) 등 이미지 툴을 사용해 16*16 사이즈의 로고 이미지 만들어줍니다.

→ ⭐️ 하지만, 이미지가 깨지는 것을 방지하기 위해 다양한 사이즈의 파비콘 이미지 제작을 위해
192*192* 사이즈로 로고 이미지를 만들어 저장해줍니다.
→ 이미지 확장자 : png , jpg
→ 아래 링크로 들어가서 아래의 순서대로 다양한 사이즈의 파비콘 이미지 만들어줍니다.
→ 제작된 이미지를 다운받아주고, html 연결 코드를 복사해줍니다.

↓↓↓ 파비콘 다양한 사이즈로 만들어주는 사이트 ↓↓↓

http://www.favicon-generator.org

Favicon & App Icon Generator

Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.

www.favicon-generator.org

1. 만들어 둔 192*192 사이즈의 로고 이미지를 파일 첨부하고 Create Favicon 버튼을 선택해줍니다.

2. Download the generated favicon 을 클릭해 사이즈별 파비콘 이미지를 다운받아줍니다.

✓ Download the generated favicon : click

✓ zip 파일을 풀어서 본 파비콘 이미지 모음

3. 아래 쪽에 있는 코드를 복사해서 html <head> ~ <head> 사이에 붙여넣어주면 됩니다.
ㄴ ** 이미지 경로 수정해주어야 합니다.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

4. 복사한 코드에는 <link rel="shortcut icon" href=""> 이 부분이 없음으로 가장 윗 상단에 추가해줍니다.

<head>
<!-- 추가할 코드 -->
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
</head>

5. 적용 후, 사이트 주소창 변화

16*16의 작은 파비콘만 적용하는 것과
다양한 사이즈의 파비콘을 적용해보면
확실히 선명한 느낌이 다르고
거의 모든 기기에서 지원받을 수 있습니다 :)

728x90

저작자표시 비영리 변경금지

'💻Coding > 📓 HTML' 카테고리의 다른 글

[HTML] noopener noreferrer 노오프너 노리퍼너 사용 이유 : rel="noopener noreferrer" (0)	2022.08.23
[HTML] html 특수기호 특수문자 리스트 정리 (0)	2022.08.07
서버의 종류 (0)	2021.11.03
HTML semantic tag_ 시맨틱태그 : 웹 문서 구조 만들기 (2)	2021.09.14
HTML 테이블(Table)- 표의 구조 지정하기 - <thead>, <tbody><tfoot> (0)	2021.08.19

현재글[HTML] 파비콘(favicon) 만들기 | 웹 사이트 적용하기 | html 작성하기(meta tag)

250x250

쭈랜드입니다:)

sqldeveloper, drawandrew, 어도비, 드로우앤드류, css, Spring, javascript, 오라클오류, oracle, 드로우마이브랜드, photoshop, 오라클, 포토샵단축키, SQL, 포토샵, adobe, HTML, 자바스크립트, PSD, eclipse,

Today :
Yesterday :