즐겨찾기를 만드는 방법: Logaster에서 팁, 트릭 및 서비스
(1 투표, 평균: 5.00 ~에서 5)
Loading...파비콘(Favicon)은 작은 사이트 아이콘 또는 배지로 즐겨찾기에서 웹 사이트를 시각적으로 식별하는 데 사용됩니다. 또한 브라우저를 사용할 때마다 주소나 웹사이트 이름 근처에 항상 파비콘이 표시됩니다. 대부분의 경우 파비콘은 크기가 16 x 16 픽셀인 정사각형으로 favicon.ico 형식으로 저장됩니다. 이 글에서는 전체 공정을 시작하는 데 필요한 ‘기초’에 대해 이야기하고자 합니다. 저희는 당신에게 다른 그래픽 편집기 프로그램를 적용하여 웹사이트를 위한 파비콘을 만드는 방법과 웹사이트에 파비콘을 추가하는 주요 방법을 공유 할 것입니다.
- 어도비 포토샵에서 파비콘 만들기
- GIMP – GNU 이미지 조작 프로그램을 사용하여 파비콘을 만드는 방법
- .PNG 및 .GIF에 비해 .ICO 의 주요 장점
- .PNG에서 .ICO로 변환을 에 연결 특수 온라인 변환기 사용
- 워드프레스(WordPress)에 파비콘 설치하는 방법?
일을 시작하려면 무엇이 필요할까요?
- 우선 해상도가 최소 512×512픽셀(정밀화해야 한다)인 로그형이 필요하다. 여기를 클릭하여 로고를 디자인할 수 있습니다.
- 로그형은 반드시 에 있어야 한다.PNG 형식.
- 어도비 포토샵 또는 GIMP 그래픽 편집기 프로그램
어도비 포토샵에서 파비콘 만들기
투명한 배경을 가진 파비콘을 만드는 방법은 다음과 같스니다.
1. “파일” – “열기”를 선택하시고 컴퓨터에 저장된 이미지를 선택하여 투명 배경으로 PNG 형식으로 로그 타입을 여세요.
2. “지우개” 도구를 사용하고 주색을 흰색으로 변경하여 아이콘만 남기려면 로그형에서 회사명을 삭제합니다.
3. 로그형의 크기를 16 x 16 픽셀로 변경하기 위해, 다음 조합인 “이미지” – “이미지 크기”를 클릭하면 됩니다.
4. 16 x 16 픽셀의 크기를 선택합니다. 당신이 가장 좋아하는 것은 믿을 수 없을 정도로 작아 보일 것입니다. 하지만 모든 것이 우리의 계획에 따라 진행되기 때문에 걱정할 필요는 없습니다.
5. “파일” – “다른 이름으로 저장” 조합을 클릭하여 이미지를 저장하고 저장할 PNG 형식을 선택하세요.
파비콘의 로그 형식이 만족스러우면 이 매뉴얼의 4단계로 이동하세요.
회사 색상 중 하나를 사용하여 파비콘을 만드는 방법은 다음과 같습니다.
1. 첫 번째 옵션처럼 PNG 파일을 열어야 합니다. 핵심 차이점은 뒤에 기업 색채가 있겠지만 투명한 색상은 아니라는 것입니다.
2. 아이콘만 남기고 텍스트를 제거한다: 배경색을 선택하려면 “피커” 도구를 사용하세요. 클릭하면 팔레트의 색상이 배경과 동일할 것이다. 이제 “브러시” 도구를 사용하여 로그 유형에서 회사 이름을 제거하세요.
3. “이미지” – “크기 변경”의 조합을 클릭하여 이미지 크기를 변경하고 16 x 16픽셀의 크기를 선택한다. 이미지가 비례하고 매력적으로 보이면 에 저장하십시오. PNG 형식을 지정하고 이 매뉴얼의 4단계로 이동하세요.
GIMP – GNU 이미지 조작 프로그램을 사용하여 파비콘을 만드는 방법
GIMP는 사용자가 다양한 유형의 벡터 이미지로 작업할 수 있는 그래픽 에디터 프로그램입니디. 이 소프트웨어의 주요 장점은 에 파비콘을 만들 수 있다는 것이다. 어도비 포토샵의 경우처럼 다양한 이미지 변환기를 사용하지 않는 ICO 형식이 있습닏.
1. 편집기에서 “파일” – “열기”를 클릭하여 파일을 열고 PC에 저장된 이미지 중 하나를 선택하세요.
2. 이제 아이콘만 남기려면 캡션을 제거해야 한다: 색상표를 클릭하고 회사 배경색 코드를 선택하세요. 코드를 모르는 경우 “피커” 도구를 사용하여 커서를 배경 위에 놓고 마우스 왼쪽 버튼을 클릭하세요. 색상은 자동으로 선택됩니다. 이제 브러시 도구를 사용하여 즐겨찾기에서 모든 문자를 제거하세요.
3. “이미지” – “이미지 크기 변경”의 다음 조합을 사용하여 로그형의 크기를 파비콘의 표준 치수(대략 16 x 16 픽셀)
5. “파일” – “내보내기”의 조합을 사용하여 로그 타입을 내보내세요.
6. 내보내기 형식(예: 마이크로소프트 윈도우 아이콘 포함)을 선택하세요. ICO 확장. 그 다음 “내보내기” 버튼을 클릭하세요.
이제 모든 것이 준비되었습니다! 이제, 당신은 당신의 웹사이트에서 파비콘을 사용할 수 있습니다!
.PNG 및 .GIF에 비해 .ICO 의 주요 장점
- 호환성: IE 5.0을 포함한 모든 브라우저가 .ICO 형식을 지원합니다.
- 서버로부터 오류 404를 받을수 없습니다: 모든 최신 브라우저(크롬 4, 파이어폭스 3.5, IE8, Opera 10 및 Safari 4로 테스트됨)는 항상 favicon.ico 파일을 요청하므로, 당신의 웹사이트에 오류 404를 가지는 확율이 매우 희박합니다.
- 에 있는 파일.ICO 형식에는 여러 개의 아이콘이 포함될 수 있으며, 16 x 16 및 48 x 48 아이콘에 대해 두 개 이상의 파일을 만들 필요가 없습니다.
.PNG에서 .ICO로 변환을 에 연결 특수 온라인 변환기 사용
.PNG에서 .ICO 형식으로 변형할때 다양한 온라인 변환기를 사용할 수 있습니다. 저희는 online-convert.com을 사용하기로 결정했지만, 모든 옵션이 유사하게 작동하기 때문에 당신에게 적합한 다른 옵션을 자유롭게 사용할 수 있습니다. 자, 시작해봅시다.
1. 웹사이트를 열고 왼쪽 사이드바를 사용하여 “이미지 컨버터” – “ICO로 변환”을 선택하세요.
2. “파일 선택…”을 클릭하거나 해당 필드로 파일을 끌어 컴퓨터의 파일을 선택하세요. 그런 다음 “변환 시작”을 클릭하여 계속하세요.
3. 에서 파비콘을 다운로드하려면 “다운로드” 버튼을 클릭하십시오.컴퓨터에 대한 ICO 형식. 파일을 클라우드 저장소로 보내거나 ZIP 형식으로 직접 다운로드할 수도 있습니다.
워드프레스(WordPress)에 파비콘 설치하는 방법?
파비콘(favicon.ico)을 웹 사이트의 메인(root) 폴더에 로드할 수 있습니다. 루트 폴더는 “index.php”를 포함한 WP의 모든 핵심 파일과 “wp-admin”, “wp-content”, “wp-includes”와 같은 다른 폴더가 있는 웹사이트의 메인 디렉토리입니다. “favicon.ico” 파일은 “index.php”와 동일한 폴더에 저장해야 합니다.
1. “워드프레스 대시보드”에 로그인
2. “부록” 코너 선택.
3. “설정 변환기”를 여세요.
4. 편집하려면 “헤더” 또는 “Header.php”라는 파일을 선택하십시오.
5. <link rel=»shortcut icon»로 시작해서 /favicon.ico «/>로 끝나는 코드의 줄을 찾으세요. HTML 태그 <헤드> 바로 밑에 있는 다음 코드를 변경하거나 추가해야 합니다. 저희는 예로서 “favicon.ico” 파일을 사용했습니다. 다른 이름은 얼마든지 선택할 수 있다.
여기 코드가 있습니다: <link rel=»shortcut icon» href=»<?php echo get_stylesheet_directory_uri();?>/favicon.ico»/>
6. 변경사항을 저장합니다.
결론:
웹사이트를 개발하는 과정에서, 가장 사소한 것, 예를 들어 파비콘 같은 세세한 부분까지도 고려해야 합니다. 웹사이트에 파비콘을 추가하는 것은 정말 쉽습니다. 하지만 이 작은 요소는 설계에 대한 당신의 포괄적인 접근방식과 사용자들의 주의를 보여줍니다. 파비콘 생성과 관련하여 궁금한 점이나 경험을 나누고 싶으세요? 아래 댓글로 하시면 됩니다.
