How do you get an image beside your URL?

  • 1
  • Question
  • Updated 11 years ago
How do you get an image beside your URL?
Photo of ryan scott palmer

ryan scott palmer

  • 1 Post
  • 0 Reply Likes
  • unsure

Posted 11 years ago

  • 1
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Hi ryan

If I understand you correctly, you want a favicon for your site: the little image that displays next to the URL in the address bar?

Adding this requires you to edit your metatags, which is something that is not possible right now. However, we are going to make it possible in th near future. A number of users have requested this feature, so it is one of our high priorities.

Please be patient while we are working on this.
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
Official Response
Hi Ryan

You can actually manage to get a favicon to display next to your domain name in the browser by pasting in some html. This text *should* really be placed in your head tags, but for now it is a hack which will achieve what you are looking for. Even if it is not exactly standards compliant or best practises!

What you need to do is:

1.) Upload an image to the resource manager (for the sake of this example, lets say that the image is called: 'myimage.jpg")
2.) Drag an html widget onto the page.
3.) paste the following code into the widget:

<link rel="shortcut icon" href="resources/myimage.jpg" type="image/x-icon"><link rel="icon" href="resources/myimage.jpg" type="image/x-icon">


(note: you will need to change myimage.jpg to the relevant name of the image you uploaded in step 1.

This should do the trick. I havent tested extensively, but it works in FireFox
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Thanks, Christo. I have learned something!
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
People should note there are TWO insertion points for the image file name in the code.
Is this for all browsers? I can't get it in Safari and in Firefox it appeared for two seconds and returned to the default globe.
Tantalizing so far...
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
Are you sure it doesn't have to be saved as an .ico file?
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
Hi Bengo

A .ico file may be preferable, but a .jpg should work.

Here is some more information from the wikipedia page(see here):


In the past, to ensure that the favicon did indeed appear, various measures were taken by web designers and developers. There is no known guarantee that favicons will appear on all computers, even on the same browsers with the same versions.

Another limitation of the code below is that it may associate a favicon with a specific HTML or XHTML document or directory. The favicon.ico file should be placed in the root directory to avoid this. A favicon.ico located in the document root directory (the default location established by Internet Explorer) will be automatically found by most browsers without the need to include the code below, though a icon/image file referenced by a link tag, if different, should take precedence.

* It has been suggested that both of the following HTML lines should be included:

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">

Only the former is necessary, however, as 'shortcut icon' will be treated as a list of possibilities by standards-compliant browsers (with "shortcut" being ignored, and "icon" used); while Internet Explorer will treat it as a single name ("shortcut icon"). The result is that all browsers understand the code. It is only necessary to include a second piece of code if one desires to offer an alternative image to modern browsers (e.g. an animated GIF or PNG).

* The link elements must be inside the head element (between <head> and </head>) in the HTML.
* The href can, but need not, point to the location /favicon.ico. It could point to any URL. Relative URLs may also be used.
* The .ico file format will be read correctly by all browsers that can display favicons.
* The image can usually be in any image format supported by the web browser.
* Configure the web server to send the correct MIME identifier:
o ICO files image/vnd.microsoft.icon (Alternatively, image/x-icon can be used instead, for compatibility reasons. It is preferred, however, to use the IANA-registered MIME type, as most major browsers now support it.)
o GIF files image/gif
o PNG files image/png
* Use the appropriate resolution and color depth.
o ICO: include one or more resolutions and color depths. The most common resolutions used are 16×16 and 32×32, with 24x24, 64×64 and 128×128 sometimes used by Windows and/or Mac OS X). Typically, only the 16x16 pixel version will be used in the browser's address bar, but other resolutions may optionally be included for other applications of the favicon. Color depths used are usually 4, 8, 16 & 24 bpp (i.e. 16, 64, 256 and 16 million colors). 32-bit, with full transparency, is also supported by many modern browsers and operating systems, though some older browsers may not understand it.
o GIF: use 16×16 in 256 colors.
o PNG: use 16×16 in either 256 colors or 24-bit.
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
In the Wiki links, a domain is included. How should this be written in a customer.synthasite.com-type multi-part domain?
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
Have tried the logical variations without success.

Suggest company tries variations on several systems and reports results.
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
Hi Bengo. It shouldn't matter if you use the domain (absolute) or not (relative). I would recommend using a relative url to point to your shortcut icon as the absolute url will change between publishing and testing.

I have made an example using a relative url. See here
Does that work in your browser?

Another thought, I may be worth noting the size of the image you are pointing to as your favicon? If it is a big image, this could be causing problems.
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
I believe the standard is 15 x 15px.

I can see the favicon in your test.

I don't understand which code of the two offered you are recommending: the first one, or the pair from Wiki. Which did you use for the test?
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
I'm using the code that I supplied above (I copied and pasted from my test implementation and then changed the name of the file):


<link href="resources/myimage.jpg" rel="shortcut icon" type="image/x-icon" /><link href="resources/myimage.jpg" rel="icon" type="image/x-icon" />


The filetype that I used in my test was a png (38smiley.png). My exact code as used in the example is:


<link rel="shortcut icon" href="resources/38smiley.png" type="image/x-icon">
<link rel="icon" href="resources/38smiley.png" type="image/x-icon">
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
That's very clear and helpful. I'll have a go and let you know.
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
No luck with the jpg versions in any permutation. I'll try converting to png.

Oddly, the HTML editor window won't close with this code. I have to use CANCEL, but when I inspect it, the code is there. Google Analytics closes in a different HTML widget. Is the pasting or placement possibly throwing it off? I started on line 1 and matched you line for line. I checked the code and don't see any errors.
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
No luck with png versions. Editor still quirky about closing.

I appreciate your patience.
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
Hmmm. very odd indeed!

I wonder if perhaps another element on your page is throwing it off?

Perhaps try create a blank test page and try inserting it in there?

In other news: you'll be happy to know that we are planning an eminent release of a much slicker solution to this issue which will let you edit certain meta tags (favicon, keywords and google webmaster) from the property sheet. Hopefully that will re-disambiguate you ;)
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
If time permits I'll try a different site.

I can wait. It's only a favicon after all.
Photo of Christo

Christo

  • 95 Posts
  • 13 Reply Likes
Oh. I didn't mean a new site, just a new page.

I'll let you know here as soon as we release the changes to enable you to add a favicon..
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
Thanks, looking forward to it. Be well.
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Reply Likes
Are there any updates on favicon as of now?
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Yes, you can add these now from the properties sidebar. I just answered you on another thread. Thanks for pointing out all the threads that need updates!
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Yes! You can now add a favicon by clicking on the Properties sidebar and browsing for an image to upload!
Photo of Ruth

Ruth

  • 2819 Posts
  • 135 Reply Likes
Yes, they have been released and you are able to add them to your pages.
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Reply Likes
I just tried it, though its very simple, just vertical lines in 2 colours, but i m very happy with the out come.
synthasite rocks
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Yay!!! I am glad it worked out for you.
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
Hooray! Look at Scratchin Post Comics with a favicon:

http://scratchinpostcomics.com/
Photo of Green Girl

Green Girl

  • 531 Posts
  • 12 Reply Likes
u have got a really nice favicon Bengo :)
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
I am having trouble getting the icons onto more than one page. They vanish from the images folder and have to be reloaded; subsequently assigning them to the properties section causes them to vanish.

Is there a way to get them onto all the pages in one swoop?
Photo of Bengo

Bengo

  • 308 Posts
  • 3 Reply Likes
Scratchin Post does not have this problem. Lil Nyet does. I will examine the specifics further.