Customizing the shortcut icon (favicon) using a master page_SharePoint 2013 WCM Advanced Cookbook-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

Customizing the shortcut icon (favicon) using a master page

The shortcut icon, or favicon, is a 16 px by 16 px image that most browsers will display as part of the title bar when viewing a web page as well as when bookmarking the web part. In this recipe, we will change the shortcut icon with our customized master page.

How to do it...

Follow these steps to customize the shortcut icon using the master page:

Open SharePoint Designer.
Select Open Site. Enter the complete URL to the SharePoint site and select Open.
From the Navigation pane, select Master Pages.
In the list of files in the Master Pages library, make a copy of seattle.master (for our example, we have renamed it Seattle_ShortcutIcon.master).
Check out the new Seattle_ShortcutIcon.master master page.
Open the Seattle_ShortcutIcon.master master page.
Locate the <SharePoint:SPShortcutIcon> element.
Provide a custom image URL using the following code:
```
<SharePoint:SPShortcutIcon runat="server" IconUrl="/_catalogs/masterpage/resources/favicon.png" />v
```
Note

Images used for the shortcut icon should be a 16 px by 16 px transparent .png or .ico file.
Save the master page.
Check in and publish the master page using the Check In and Publish options.
Set the master page as the Site Master Page.
Navigate to the site in your preferred web browser to observe the results. The result will be similar to the following screenshot:

How it works...

The SPShortCutIcon server control outputs a <link> tag for the shortcut icon (or favicon) to the <head> element of the SharePoint page when rendered. When most web browsers render the page, they will use this image in the title bar or bookmark for the page. In this recipe, we provided a custom image that replaces the default SharePoint logo when adding the tag.

There's more...

Apple devices, such as iPhones and iPads, look for specific images when determining what to display as the icon for a site when pinning it to the home screen. We can add <link> tags to instruct these devices to use images we have provided. For instance, let's look at the following link tags:

<!-- Standard iPhone --> 
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57.png" />
<!-- Retina iPhone --> 
<link rel="apple-touch-icon" sizes="114x114" href="t apple-touch-icon-114.png" />
<!-- Standard iPad --> 
<link rel="apple-touch-icon" sizes="72x72" href=" apple-touch-icon-72.png" />
<!-- Retina iPad --> 
<link rel="apple-touch-icon" sizes="144x144" href=" apple-touch-icon-144.png" />