MENU
オンライン講座開催中

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

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>

詳しくは講座に来てね

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

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次