The favicon is a small icon that is recognized by your PC’s web browser and other websites. This small icon is displayed in the title bar, bookmarks, and even when saving your site to your social profiles. This icon is the most widely used website bookmarking icon. Similar to the Favicon, the Apple Touch Icon is a file used for a web page icon on the Apple iPhone, iPod Touch and iPad. When someone bookmarks your web page or adds your web page to their Apple home screen, this icon is used. Android devices use their own icons too.
If you would like to start using a favicon, Apple touch and/or Android icons, then you’ll need to upload icon files using the File manager. You don’t have to create all icons for all devices, just for the ones you want to support. Generally speaking it’s a good idea to at least upload a favicon file.
Click on Code editor in the administrators toolbar, and then select Includes – All pages (51) in the dropdown box. Click on Load example and then select the file favions-apple-touch-icons.txt. If you already have something in template 51, then click the View code button so that you can copy and paste the template without overwriting anything already in there. Otherwise you can simply click on the Use code button to automatically put the example code in the editor template.
The template has information about all the different icons (and the file specifications) that you can upload. Remove the comments and also remove the lines that are for icons that you are not going to use. For example, the following lines in the templates are for an Apple-Touch-Icon:
<!– iPhone(first generation or 2G), iPhone 3G, iPhone 3GS –>
<link rel=”apple-touch-icon” sizes=”57×57″ href=”/siteowner/assets/icons/touch-icon-iphone.png”>
Remove the comment line (the one that starts with <!– and ends with –>) before saving the file. The comments lines are only there to tell you what the following line is for, and what the file specifications are. In the above example, a PNG file 57 pixels high and wide – must be uploaded to the /assets/icons folder and the file name should be touch-icon-iphone.png.
Repeat the above steps for all of the other lines in the example template.
Note that you can in fact upload your icons to other folders if you want and you can use different file names too. Just remember to change the link href if you do.
