파비콘 만드는 방법
1. 우선 포토샵이나 이미지툴로 192*192 픽셀의 이미지를 만든다. 이미지 확장자는 png나 jpg이면 상관없다.
2. 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
3. 만든 이미지를 첨부하고 [Create Favicon] 버튼을 클릭한다.
옵션은 기본적으로 체크되어있는대로 두면 된다. (Generate icons for Web, Android, Microsoft, and iOS를 선택)
4. [Download the generated favicon] 을 클릭하여 파비콘 파일들을 다운받는다.
압축 파일을 열어보면 다양한 사이즈의 파비콘 이미지가 제작 되어져있다.
이 파일들을 홈페이지 서버에 업로드 한다.
5. 아래쪽에 있는 코드를 홈페이지상의 <head></head>사이에 삽입한다. 이미지 경로는 알맞게 수정 필요하다.
제시되어 있는 코드에는 <link rel="shortcut icon" href="">이 빠져있어 추가로 넣어주면 된다.
html문서에서 <head>와 </head>사이에 넣어주면 된다.
<link rel="shortcut icon" href="/img/favi/favicon.ico"> <!--추가-->
<link rel="apple-touch-icon" sizes="57x57" href="/img/favi/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/img/favi/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/favi/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/favi/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/favi/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/favi/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/favi/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/favi/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/favi/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/img/favi/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favi/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/img/favi/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favi/favicon-16x16.png">
<link rel="manifest" href="/img/favi/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/img/favi/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
기존에 16*16의 작은 파비콘만 적용했을때와
다양한 사이즈를 지원하는 파비콘 코드를 적용한 후를 보면 확실히 선명도가 다르다.
파비콘을 포토샵이나 일러스트없이 직접 그릴 경우 이 사이트에서는 편집창도 제공하고 있다.
https://www.favicon-generator.org/image-editor/
Free Online Image Editor
Join to access discussion forums and premium features of the site.
www.favicon-generator.org
움직이는 파비콘 생성 사이트
favicon.ico Generator
Preview Favicon in original size:
www.favicon.cc
'📌 Front End > └ HTML5' 카테고리의 다른 글
| [HTML] 구조설계 시맨틱 태그(Semantic Tag) 활용 - <header> <nav> <main> <article> <section> <aside> <footer> (2) | 2024.10.22 |
|---|---|
| [HTML] 자동 줄바꿈, 줄바꿈, 간격, 띄어쓰기 및 특수문자 엔티티 코드 - <pre> <br> <div> <span> < (1) | 2024.10.22 |
| [HTML] 폼(Form) 태그 종류 (0) | 2024.05.24 |
| [HTML] 시맨틱 태그(Semeantic Tag)란? (0) | 2024.05.13 |
| [HTML] 폼(form)의 이해 (0) | 2023.03.10 |
