How to add an image with an HTML page title?

How to add an image or logo to a page with the name of this page that displays with a title in chrome, firefox or other browsers?

+6
source share
6 answers

Taken from What is Favicon.ico and How to Create a Favicon Icon for Your Site

How to create a "favicon.ico" file

1. Create a 16X16 pixel image. Yes, it is really small, and you cannot draw much in it. You should also limit yourself to the standard colors of Windows 16, although I suspect that 256 colors will work fine.

If you like, you can also create a 32X32 pixel icon that will be scaled to size for the Favorites menu and the location bar. You can even put both 16X16 and 32X32 pixels icons into the same icon file. Windows will use the former for its menus and the latter when the user opens a folder in which large icons are displayed. You probably don't need to do this if you are not bothered.

2. Save the image as an ICO file (named "favicon.ico", of course).

3.Upload it to your website. You do not need to upload them to every directory of your site, if you do not want to waste space - just enter this in the root directory and web browsers that support the icons will apparently find it in the end. You can also upload it to your image directory, but you will need to change your web pages if you do. For more information about this, see later in this article.

Help! My web host does not allow ICO files!

If your hosting company does not allow files with the .ICO extension for download, you can try to bypass it by downloading it (in binary mode) with some other extension (for example, GIF). Once you are on your site, rename it, using your FTP program, to the correct extension.

<head> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> </head> 
+9
source

What you are looking for is an icon.

The preferred way to add this, guided by the W3 consortium, is to use profile in the <head> tags:

 <head profile="http://www.yoursite.com/profile"> <link rel="icon" type="image/png" href="http://example.com/myicon.png"> [â€Ļ] </head> 

See here for instructions on adding to your site.

+3
source

Here is the code to customize your icon for your site. Your icon will be displayed along with the specified title of the web page. Just use the following codes.

 <!DOCTYPE html> <html> <head> <title> mytitle </title> <link rel="icon" href="http://i58.tinypic.com/302rtyg.png" type="image/png"> </head> </html> 
+3
source
 <head> <link rel="shortcut icon" href="title_icon.png"> </head> 
+1
source
 <link rel="icon" href="image_name.ico" /> <title>Place your html title here</title> 

Here, the link defines the relationship between the current resource, which is the .href icon giving the image address for the browser. Perhaps some type can be of any type, for example: jpg format

+1
source

Here is a really simple site that I use to create my badges: favicon.cc

Here are its benefits:

You can choose custom colors. Downloadable. Can be published and published. You can resize the image to fit the size (although it may be distorted. If you are like me and you have several icons, you just need to create a directory called "favicons" and then put images inside.

Remember to give everyone a unique name, such as default.ico or blog.ico

Do not forget to download your icons.
Here's how you access the icons:

 <link href="/YOUR_PATH/favicon.ico" rel="icon" type="image/x-icon" /> 
+1
source

Source: https://habr.com/ru/post/916160/


All Articles