Version 7
To create a 'favicon', draw or drag on to a web page the image that you want to use. The image can be any size as it will be scaled to the right size automatically when displayed in a browser. With the image selected, switch to the selector tool and click on the 'Apply names' icon on the far right side of the 'Selector tool infobar'
In the Names dialog, type 'favicon' into the Apply names box and click Add then Close.
You can use only one 'favicon' per website. The object can reside on any of the pages within your document and does not need to be repeated to all pages.
Not all web browsers will display the favicon when your page is loaded from your local disc. At the time of writing, Firefox does show it even for local pages, so use it to check your favicon. Once your site is published the favicon is supported in all popular web browsers.
Version 6 and earlier versions
Version 5 or Version 6 of Xara programs do not provide a built in method of applying a favicon to your web page. You therefore need to insert the the favicon via a placeholder as instructed below.
1. Create a support folder.
1. Insert a flv, mp4, or PDF (as a link) within your document.
2. Save your .xar/ .web file to your chosen location
3. Browse via windows explorer to your saved location where you will see the .web/.xar file and the support folder. The support folder will contain _xar_files within its name
4. Browser the support folder and delete its contents.
5. Copy your ico file into the support folder.
6. Go back to your document in Xara and delete the object inserted in step 1 and save the file.
2. Create a placeholder and apply the name <head>
1. Draw a rectangle, its position is not important so you can place it on the pasteboard
2. Select the rectangle with the selector tool and click on the ‘Apply names’ icon from the selector tool infobar.
3. Apply the name <head> to the rectangle.
3. Replace the placeholder with HTML to reference your ico file.
1. Right click on the placeholder and select ‘Web properties’ followed by the ‘Placeholder’ tab.
2. Select the Replace with HTML code radio button and insert your code to reference the ico file. The code i have inserted is below
o<link rel="shortcut icon" href="index_htm_files/favicon.ico"><link rel="icon" type="image/gif" href="index_htm_files/animated_favicon1.gif">
oExplantion of code
▪index_htm_files - as the first page of my site is called index, my exported graphics folder will be named index_htm_files and this is where the contents of the support folder will be copied too.
▪favicon.ico - My ICO file is named favicon.ico
▪animated_favicon1.gif - in this example, we also have an animated gif which can be shown as the favicon by some browers. This is not required.
4. Export and publish your document to complete the process.
For assistance on creating a favicon, see the xaraxone tutorial An example page with the favicon applied can be viewed from here
Xtreme PRO German Support
RSS
Bookmark this page