I have read on several websites that using the link element is not beneficial/necessary if the favicon is already stored in the root directory of the domain under the name "favicon.ico".
However, if the file suffix, name or directory path differs, the link elements will be crucial.
Did I understand it right?
Exactly. The favicon in root and no link is the approach used by Google itself. But there are cases where you cannot place the icon in the root directory or you don't want to pollute this special directory. In that case, a link markup is necessary.
Related
I faced a problem using a link inside my main html and giving another html file name to the link which is in the same root as the main html.
unfortunately after click on the link the address bar is changed but the page is not loaded and it redirects to the main html page.
this is the way I wrote the link:
click
this is my folder structure:
I also tried with giving the full path but I got this error:
Not allowed to load local resource: file:///C:/my_project/templates/PU.html
As you said in the comments, I assume you're working locally on your computer, so I'm going to answer accordingly.
The first and foremost thing to know is that your main, i.e the file you want users to see first should be named as index.html and it should be in the root directory of your project, i.e according to your question, it should be in my_project.
Now if it is as I said, then your my_project folder/directory will be considered as the root directory. With the help of this consideration, now you can set links with respect to the root directory. e.g:
click
The / at the beginning here tells the HTML to look from the root directory, i.e from my_project in your case.
I don't see any errors in the code you have. Though, I will tell you a few things here.
**./** at the beginning of the link tells HTML to look at the file in the same folder as of the present file. So, if the PU.html file is not in the same folder as of the file you're working on, it will give an error, because as I said, it's looking for the file in the same folder.
There is nothing wrong with your syntax.
click is correct,
but if you have your files in the same directory you don't need ./.
My website on my server does not want to show the on server saved image.
The path is relative and to my information correct, but I always get a 404 error.
Found no solution after browsing endlessly.
All nessecary information is found in the second picture posted.
Apparently, you use a Framework. The file you have in the view folder isn't the one you send to the browser, it's just a source file that will be used by your Framework entry point: public/index.php. Your root folder is therefore public.
Two things must then be understood:
Even though the line your type is in application/view/index/index.php, the browser will only see it as index.php, located at the base of your site (http://localhost/index.php or somethig like that). The relative path must therefore be written as relative to public.
As your root folder, public, is seen as http://localhost by the browser, you can't use .., there is nothing above the root of your website, for the browser. You must do one of the followings:
Place your image in public/_images instead of application/_images (normally, all the files that can be sent without passing by the PHP preprocessor can go in public)
Place it wherever you want and create a controller that maps a custom URL to your image. Something like /images/(:any) maps to a controller looking into your specific image folder (please, don't, it's not because you can that you should).
My advice: create a public/img folder and place it your images, then you load it with <img src="/img/title_image_me.jpeg" alt="My picture">. (The initial / is very important there!, it's understood as the root folder of your website, Linux-style).
I have my own directory for static files and that's why I want to move my favicon, robots.txt, sitemap and other files of the same sort to it. Therefore, these files will be accessible not as my_website.com/robots.txt, my_website.com/favicon.ico, but my_website.com/my_files_path/robots.txt, my_website.com/my_files_path/favicon.ico
I wonder, won't this hurt my website in terms of SEO? Are there other drawbacks? Is it better to put these files in the root directory?
Web robots will look for the robots.txt in your root directory. So it's a good idea to place it there. On this page Google says:
In order to make a robots.txt file, you need access to the root of your domain.
Most browsers will look for a favicon.ico in your root aswell. You can specify a different path to your icon with the <link> element. However, remember that all files on your site is not HTML. If a user views an image, PDF or similar then the <link> element will not work. In such cases, the browser will likely fall back on the file in the root folder.
I'm kind of new to HTML. I'm trying to display an image on my website but for some reason, it just shows a blue box with a question mark in it. I've looked everywhere on the internet, but none of the solutions seemed to work for me. I've tried:
<img src="iwojimaflag.jpg"/>
<img src="images/iwojimaflag.jpg"/>
<img src="Applications/MAMP/htdocs/Symfony/src/Acme/WebBundle/Resources/public/images/iwojimaflag.jpg"/>
Just to expand niko's answer:
You can reference any image via its URL. No matter where it is, as long as it's accesible you can use it as the src. Example:
Relative location:
<img src="images/image.png">
The image is sought relative to the document's location. If your document is at http://example.com/site/document.html, then your images folder should be on the same directory where your document.html file is.
Absolute location:
<img src="/site/images/image.png">
<img src="http://example.com/site/images/image.png">
or
<img src="http://another-example.com/images/image.png">
In this case, your image will be sought from the document site's root, so, if your document.html is at http://example.com/site/document.html, the root would be at http://example.com/ (or it's respective directory on the server's filesystem, commonly www/). The first two examples are the same, since both point to the same host, Think of the first / as an alias for your server's root. In the second case, the image is located in another host, so you'd have to specify the complete URL of the image.
Regarding /, . and ..:
The / symbol will always return the root of a filesystem or site.
The single point ./ points to the same directory where you are.
And the double point ../ will point to the upper directory, or the one that contains the actual working directory.
So you can build relative routes using them.
Examples given the route http://example.com/dir/one/two/three/ and your calling document being inside three/:
"./pictures/image.png"
or just
"pictures/image.png"
Will try to find a directory named pictures inside http://example.com/dir/one/two/three/.
"../pictures/image.png"
Will try to find a directory named pictures inside http://example.com/dir/one/two/.
"/pictures/image.png"
Will try to find a directory named pictures directly at / or example.com (which are the same), on the same level as directory.
Lets look at ways to reference the image.
Back a directory
../
Folder in a directory:
foldername/
File in a directory
imagename.jpg
Now, lets combine them with the addresses you specified.
/Resources/views/Default/index.html
/Resources/public/images/iwojimaflag.jpg
The first common directory referenced from the html file is three back:
../../../
It is in within two folders in that:
../../../public/images/
And you've reached the image:
../../../public/images/iwojimaflag.jpg
Note: This is assuming you are accessing a page at domain.com/Resources/views/Default/index.html as you specified in your comment.
img {
width: 200px;
}
<img src="https://image.ibb.co/gmmneK/children_593313_340.jpg"/>
<img src="https://image.ibb.co/e0RLzK/entrepreneur_1340649_340.jpg"/>
<img src="https://image.ibb.co/cks4Rz/typing_849806_340.jpg"/>
please see the above code.
If you put <img src="iwojimaflag.jpg"/> in html code then place iwojimaflag.jpg and html file in same folder.
If you put <img src="images/iwojimaflag.jpg"/> then you must create "images" folder and put image iwojimaflag.jpg in that folder.
I confess to not having read the whole thread. However when I faced a similar issue I found that checking carefully the case of the file name and correcting that in the HTML reference fixed a similar issue.
So local preview on Windows worked but when I published to my server (hosted Linux) I had to make sure "mugshot.jpg" was changed to "mugshot.JPG". Part of the problem is the defaults in Windows hiding full file names behind file type indications.
Here are the most common reasons
Incorrect file paths
File names are misspelled
Wrong file extension
Files are missing
The read permission has not been set for the image(s)
Note:
On *nix systems, consider using the following command to add read permission for an image:
chmod o+r imagedirectoryAddress/imageName.extension
or this command to add read permission for all images:
chmod o+r imagedirectoryAddress/*.extension
If you need more information, refer to this post.
I found that skipping the quotation marks "" around the file and location name displayed the image...
I am doing this on MacBook....
I have a hierarchy like:
index.html
/share/index.html
/img/myImage.png
share/index.html is on a sub-domain (http://www.share.foo.com instead of http://www.foo.com).
I would like to access myImage.png from both domains.
So far, I've only been able to find one way to manage this. From index.html I reference the image as:
img/myImage.png
and from /share/index.html I reference the image as:
http://www.foo.com/img/myImage.png
This doesn't feel correct because I shouldn't have to be that explicit with my URL. It should probably be somewhat relative to my own path structure.
I'm wondering what the correct fix here is? Should share/index.html be on the same level as index.html? How would naming conventions work for something like that if they're both supposed to be index.html on the same level? Other suggestions?
To access the image from "index.html" you can use the relative path like you are currently using:
img/myImage.png
However, when you are in the /share/ folder you need to go back a folder:
../img/myImage.png
This is of course assuming your /share/ directory is locate within the root html folder (public_html or whatever yours may be called)
You can use
../img/myImage.png
for getting image in subdomain.
You can use multiple ../ to go back any level in the hierarchy
For eg: ../../ will take two levels back from the current level.
There are two ways to accomplish this
Filesystem way
If the server is on an Unix (Linux) based system, create a symbolic link in /share that points to /img.
From a shell:
~$ cd /docroot/share
~$ ln -s ../img img
This will make all contents of /img appear under /share/img as well.
If you do not have direct shell access to your web-host, you can try creating the symbolic link in your local copy of your /share directory and sync it to the server. To create a symbolic link you do not have to have a copy of the location where it points to on your local computer.
If you are on windows, NTFS supports symbolic links as well, but I can not tell you how that would sync to the web server.
Using relative paths lower than your doc_root (../img/myImage.png) to point to your image from your HTML document, is invalid in this case. It would resolve to: http://www.share.foo.org/../img/myImage.png
<base> tag way
The <base> tag sets the base address where to look for linked content. Downside is: It will form the base for al relative linked content. (Style sheets, images and links). So page linked as <a href=about.hmtl> will point to <base>/about.html.
<head>
<base href="http://www.foo.com/" target="_blank">
</head>
<body>
<img src="img/myImage.png">
</body>