【초보자라도 아는】web 사이트의 쇼트 컷 아이콘(스마트 폰용 아이콘)의 설정 방법(iPhone측의 쇼트 컷의 만드는 방법도!)
아무래도 7note입니다. WEB 사이트가 완성되면 잊지 않고 설정합시다 바로 가기 아이콘.
절차 ① 바로 가기 아이콘을 위한 이미지를 만듭니다.
・「180px×180px」이상의 정사각형의 이미지를 준비합시다.
· 무료 아이콘 생성 도구를 사용하여 아이콘 이미지 생성
추천 도구 → htps // 아오 sys m. 네 t / 후 ゔ ぃ 곤게 네라와 r /
※favicon도 만들 수 있습니다.
・상기 툴을 사용하면 아이콘 이미지가 정리된 favicons.zip 파일을 다운로드할 수 있으므로, 해동.
・해동한 favicons 폴더로부터, 「apple-touch-icon-180x180.png」를 복사해 사용하는 WEB 사이트의 임의의 폴더에 저장
절차 ② 바로가기 아이콘을 위한 이미지를 만듭니다.
・사용하는 사이트의 <head> 내에 다음의 소스를 기술
<head>
<!-- ～～～他のタグたち～～～ -->
<link rel="apple-touch-icon" sizes="180x180" href="任意のパス/apple-touch-icon-180x180.png">
</head>
이것으로 사이트 측의 설정은 완료!
절차③ iPhone에서 바로가기 아이콘을 홈 화면에 표시하는 방법(Safari)
① Safari에서 대상 사이트에 액세스
②아래 버튼의 □에 ↑같은 아이콘을 탭
③「홈 화면에 추가」를 탭
이제 홈 화면에 아이콘이 표시됩니다.
(자작의 WEB 쇼핑 리스트에의 URL을 아이콘으로 한 예)
요약
안드로이드 단말기를 소지하고 있지 않기 때문에 안드로이드의 설정 방법이 없는 것은 양해 바랍니다. . .
저는 신용카드 품목 페이지와 직접 만든 웹사이트에 액세스하는 데 바로 가기 아이콘을 사용합니다.
정기적으로 액세스하는 사이트가 있는 사람 등은 등록해 두면 편리해요!
하지만 실제로 바로 가기 아이콘으로 하고 있는 사람을 만난 적 없을지도 모른다. . .
누군가 Twitter의 팔로워 많은 분, 앙케이트 취해 보세요. 잘 부탁드립니다.
오마마츠!
~ Qiita에서 매일 게시 중!! ~
【초보자용】HTML・CSS의 조금 테크 모임
Reference
이 문제에 관하여(【초보자라도 아는】web 사이트의 쇼트 컷 아이콘(스마트 폰용 아이콘)의 설정 방법(iPhone측의 쇼트 컷의 만드는 방법도!)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/7note/items/32d756e6182f21cd3ed3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<head>
<!-- ～～～他のタグたち～～～ -->
<link rel="apple-touch-icon" sizes="180x180" href="任意のパス/apple-touch-icon-180x180.png">
</head>
Reference
이 문제에 관하여(【초보자라도 아는】web 사이트의 쇼트 컷 아이콘(스마트 폰용 아이콘)의 설정 방법(iPhone측의 쇼트 컷의 만드는 방법도!)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/7note/items/32d756e6182f21cd3ed3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
