HTMLのファビコン（.ico）とスマホのアイコンの設定【アイコンのフリー素材,ico変換サイトも紹介】

2023-01-242023-02-15

HTMLのファビコン（.ico）とスマホの保存アイコンの設定【アイコンフリー素材,ico変換サイトの紹介】

ファビコンやスマホアイコンのHTMLと便利なサイトの紹介にゃ。

ファビコンとは

ブラウザのタブ部分などで、ページタイトルの左端に表示されるアイコンです。

スマホのアイコンとは

スマホやipadでお気に入り登録やブックマーク登録をしたときに表示されるアイコンです。

にゃんこ2

ひよこ…🤤🍽

ファビコンとスマホアイコンの設定方法まとめ

STEP

アイコンをget。

※オリジナル画像でもフリー素材でもOK

STEP

「.ico」と「.png」の拡張子にする。

※「.ico」の画像名はfavicon.icoにしないと効かない

STEP

画像フォルダーに格納して、HTMLのheadに記述

にゃんこ1

簡単にゃ

1. アイコンの用意

180pxくらいの正方形。

自分で作成してもフリー素材選んでもOK。

2. ico変換サイト

このサイトでicoやpng変換できるにゃ

3. HTMLのhead内に記述

ファビコンの記述をする

headに記述するコード

<link rel="icon" href="images/favicon.ico"> <!-- サイト表示ファビコン -->

※今回は、imagesの画像フォルダーに格納しています。

にゃんこ1

※「.ico」の名前はfavicon.icoじゃないと効かないにゃ

スマホアイコンの記述をする

headに記述するコード

<link rel="apple-touch-icon" href="images/chick.png" sizes="180x180"><!-- スマホ保存アイコン -->

※今回は、imagesの画像フォルダーに格納しています。

head全体表示（例）

<head>
<meta charset="utf-8">
<title>lesson1 site</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="images/favicon.ico"> <!-- サイト表示ファビコン -->
<link rel="apple-touch-icon" href="images/chick.png" sizes="180x180"><!-- スマホ保存アイコン -->
</head>