Site icons

Favicon

A favicon is the small square icon that shows in your browser address bar, browser tab, in your bookmarks, etc. Here is an example in the Safari browser:

To create your own favicon, create a square image file in your favorite image editing/creating program, such as in Photoshop. You can make the square image any size you want, but it will be shrunk down so be aware that small detail will be hard to see at the final size.

Once you export your graphic in PNG, GIF, or ICO file format you can upload it in the “ProPhoto > Settings > Site Settings > Social Media > Site icons > Favicon image” area, seen below.

(Internet Explorer 10 only supports the .ico format)

drag your image into the Site Icons area

Save your changes at the bottom of the screen.

Reload your site to see the favicon in your browser. Bookmarks will also use the favicon, seen in this example in the Google Chrome browser:

favicon_example_2

If you do not have a software tool to create the ICO file format, you can follow these steps:

Create a ICO files for Internet Explorer compatibility

If you want your favicon to be seen by as many people as possible, you’ll need to convert it to a file format that’s called a Windows Icon Image (ICO file extension).

Lucky for you, there is a multiple websites with a free and simple tool that will convert any image file to a Windows Icon Image (.ico) file. Here’s a link to one with instructions below.

http://iconverticons.com/

Prepare a graphic for conversion

To create your own favicon, start by creating a square image file in your favorite image editing/creating program, like Photoshop. You can make the square image any size you want, just realize that it is going to be shrunk down, so you will want to create it with that in mind.

Create icon package

Once you’ve got your file, go to the converter tool site, and click to use the free Online converter as shown:

iconvert_initial Choose the free online converter. You don’t need to download the app.

In the next screen, upload your image file from your computer by clicking to “click to browse…” and then click to Upload that file. Or just drag it in:

Browser for an image on your computer or drag into the upload box.

Once the conversion is complete (which takes only a few seconds), you’ll be presented with some various download options in a few standard formats. Click the ICO download button to download a ICO version of your uploaded file at the same dimensions as your original. If you’d rather use a smaller file, then click on the size you want to use to download a png version in that size. Then redo the conversion process with that size.

favicon_download_ico Click the ICO button to download your file.

Your computer will download the new file with a name like that is the same as your original except it will have “.ico” as the extension.

favicon_post_download
This is the image which you will upload into ProPhoto in “ProPhoto > Settings > Site Settings > Social Media.” If the above site does not work, try icoconvert.com as an alternative.

Apple touch icon image

Upload your Apple touch icon to this same “ProPhoto > Settings > Site Settings > Social Media” screen, seen here:

When your site is saved to the Home screen of many mobile devices like the iPhone, iPad, iPod Touch, or other iOS devices, this icon will be used to represent a link to your site on the device.

For current recommended sizes, see Apple’s documentation.

adding to home screen in an iPhone6

Saving a website link to your home screen will use the site icon, as seen in this example:

example of apple touch icon on iPhone6 home screen