[初めてのwebサイト作成]

🌹レッスン3🌹

PCブラウザのタイトルタブにアイコンを表示させよう


 🌻パソコンのブラウザはGoogle Chromeを使用しています。

1. タイトルタブにアイコンを表示させよう

赤丸の部分です

アイコン

まず表示させたい画像を用意します。

2. 画像の準備

準備するパソコン用の画像サイズは
 ♦「16×16px」インタネットエクスプローラー用
 ♦「32×32px」Chrome Firefox Safariブラウザ
 ♦「48×48px」Windows用
 ♦「64×64px」高解像度のWindowsDesktop用
 ♦「180×180px」アップルスマホ用
 ♦「256×256px」アンドロイドスマホ「favicon.ico」さえ用意していれば、png形式は不要
 ♦「260×260px」「favicon.ico」というものが必要で、拡張子が.icoのファイル作成用の画像が必要とwebで調べました。

今回用意する画像は写真ではないので、jpegではなく、pngかgifがいいと思います。

私は、絵をかくのが下手なので、無料イラストをダウンロードしました。

パソコンにプリインストールされている、ペイントでサイズ変更しご自分の管理しやすいファイル名で保存していきます。

フォルダ

3. <head></head>の間にタブアイコンの設定をしていきます。

"ico/xxxxxx" の部分をご自分が用意された画像ファイル名に変えてくださいね。


<head>

<link rel="icon" href="ico/itigo16px.png" sizes="16×16" type="image/png" />
<link rel="icon" href="ico/itigo32px.png" sizes="32×32" type="image/png" />
<link rel="icon" href="ico/itigo48px.png" sizes="48×48" type="image/png" />
<link rel="icon" href="ico/itigo62px.png" sizes="62×62" type="image/png" />

</head>

上書き保存します!

それと、拡張子が「.ico」のファビコンというものが必要でした。

https://ao-system.net/alphaicon/

私は上記のサイトで間違えて、248×248pxサイズで無料で作ってもらいました。

でも問題ないから、私はこのままでいいや(^^ゞ

皆さんは、256×256pxサイズで用意してみてね!

☆インターネットエクスプローラーのコードを追加


<head>
<link rel="icon" href="ico/itigo16px.png" sizes="16×16" type="image/png" />
<link rel="icon" href="ico/itigo32px.png" sizes="32×32" type="image/png" />
<link rel="icon" href="ico/itigo48px.png" sizes="48×48" type="image/png" />
<link rel="icon" href="ico/itigo62px.png" sizes="62×62" type="image/png" />

<link rel="shortcut icon" href="ico/itigofavicon248px.ico" />
<link rel="icon" type="image/x-icon" href="ico/itigofavicon248px.ico"/>
<link rel="icon" href="ico/itigofavicon248px.ico"/>

</head>

上書き保存します!

追加した3行の説明

1行目は、IE8の設定インターネットエクスプローラー8を使用している人は少ないと思われるので、これは不要かも?です!お好きにどうぞ

2行目は、IE9.10の設定

3行目は、IE11の設定

☆スマホ用アイコンのコードを追加


<head>
<link rel="icon" href="ico/itigo16px.png" sizes="16×16" type="image/png" />
<link rel="icon" href="ico/itigo32px.png" sizes="32×32" type="image/png" />
<link rel="icon" href="ico/itigo48px.png" sizes="48×48" type="image/png" />
<link rel="icon" href="ico/itigo62px.png" sizes="62×62" type="image/png" />
<link rel="shortcut icon" href="ico/itigofavicon248px.ico" />

<link rel="apple-touch-icon-precomposed" href="ico/itigo180px.png"  />

</head>

上書き保存します!

追加したコードの説明

これはappleスマホのSafariブラウザで表示させるためのコードです。

アイコン

See you again Take care (^.^/)))~~~bye!!



Ads by Google

TOP