ファビコン(アイコン)を作る 

 ファビコン(favicon)アイコン、ショートカットアイコンは作るのと無いのとそのサイトのイメージが全然かわります

● パソコンのショートカットはこちら

● iPhoneのホーム画面に追加の方法

 

icon-01.jpg
 アイコンを作る

● 作りたいアイコンが出来たら128-128px(ピクセル)で保存します。ファイル名は favicon.png

デスクトップに保存したらこれ!
 デスクトップに保存したらこれ!

 フリーソフトの@icon変換をダウンロードする  http://www.towofu.net/soft/aicon.php 

@ICONをクリック
● @ICONをクリック
先に作っていたfacicon.pngをドラッグする。そして保存は
先に作っていたfacicon.pngをドラッグする。そして保存は
icon-06.jpg
 単独iconとして保存
出来上がり
 出来上がり 

 最初のfavicon.pngのファイル名を変更する。apple-touch-icon.png  

 最初からインストールされている apple-touch-icon-precomposed は削除する (何故か僕のiPhoneSEでも友人のiPadでも上手く表示しなかった。だからこうしています。バグかどうかはわからない。

 favicon.ico もアップする。(上書きする)

 iPhoneやandloidで確認する。パソコンでもサイト名の前に表示されている

 

 


ショートカットアイコンを確認する

Cromeで開いて赤いところ

  Cromeで開いて赤いところ
デスクトップのアイコン
 デスクトップのアイコン(パソコン)
 

 UrlがLineで送られてくる場合もこちらからLineで送る場合もある。アンドロイド機の場合はCromeで開いてから、ホーム画面に追加で表示される。i-Phoneの場合はSafariで開く からホーム画面に追加で表示される

iPhoneホーム画面に追加
 iPhoneホーム画面に追加
-