需要先把圖片格式轉換為.ico類型
在這個網址在線轉換很方便：https://www.easyicon.net/covert/
在<head></head>加一行來顯示圖標（注意，如果加入了沒有效果，檢查一下路徑是否正確，文件名是否正確）
在網頁標題左側顯示：<link rel="icon" href="圖標地址" type="image/x-icon">
在收藏夾顯示圖標：<link rel="shortcut icon" href="圖標地址" type="image/x-icon">
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title> MarioHome </title> <link rel="icon" href="./mario.ico" type="image/x-icon"> //在網頁標題左側顯示圖標 <link rel="shortcut icon" href="./mario.ico" type="image/x-icon"> //在收藏夾顯示圖標 <script type="text/javascript" src="D:\\jQuery\\jquery.js"></script> <style> .search { position: relative; width: 78%; margin: 0px auto; padding-left: 3.4em; font-size: 14px;} .search:after{ clear:both;content:'.'; display:block;clear:both;height:0; visibility:hidden; overflow:hidden;} .search_t { float: left; width: 78%; height: 60px;margin-left: 0px; margin-top: 20%; padding-left: 20px; padding-right: 20px; font-size: 18px;/* border: 1px solid #cdcdcd; */border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;} .search_b { float: right; width: 200px; height: 60px;margin-left: 0px;margin-top: 20%;padding-left: 0px; padding-right: 0px; font-size: 18px;/* border: 1px solid #cdcdcd; */border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;} .background_{ background:url("./background.jpg") no-repeat; background-size: 100%;} </style> </head> <body class="background_"> <form class="search" action="http://www.baidu.com/baidu" target="_blank"> <input class="search_t" type=text name=word size=40 placeholder="Input Content"> <input class="search_b" type="submit" value="搜索"/> </form> </body>