- How to Add Image in the Title Bar
- Let the browser finds the favicon!
- Let’s use HTML link tag:
- Depending on the favicon format, the type attribute must be changed:
- A favicon must have the following characteristics:
- Example of adding an image in the title bar:
- Different Platforms:
- Add it to your code in the following way:
- HTML Favicon
- How To Add a Favicon in HTML
- Example
- This is a Heading
- Favicon File Format Support
- Chapter Summary
- HTML Link Tag
- Иконка-ссылка в HTML
- Иконочный шрифт
- Подключение иконки Font Awesome через CSS
- Добавить комментарий Отменить ответ
- Privacy Overview
How to Add Image in the Title Bar
Most websites add an icon or image logo in the title bar. This icon logo is also called a favicon and can be useful for user engagement.
A favicon, also known as a URL icon, a tab icon, a shortcut icon, a website icon, or a bookmark icon, is a file containing one or more small icons associated with a particular website or web page.
You can let the browser detect your favicon or upload it to your hosting root area.
Let the browser finds the favicon!
One way, which is the easiest, is by uploading an icon as a .png or .ico file from your hosting’s File Manager. If you prepare your image in png or ico, you can upload it to your hosting area, and most modern browsers will automatically detect favicon.png and favicon.ico files from your host (naming matters here, it should be exactly favicon). So, you’ll need no coding.
The other way is by using the HTML link inside the head tag.
Let’s use HTML link tag:
/* it should be placed inside the head tag */ icon" type="image/png" href="path-to-your-favicon"/> If you use a different image format, implement the appropriate changes (read the next paragraph), and change the value of the href attribute to the path where your image is located in your project. The ICO format is not as reliable anymore, and it’s better to use png (to preserve transparency).
Depending on the favicon format, the type attribute must be changed:
- For PNG, use image/png.
- For GIF, use image/gif.
- For JPEG, use image/jpg.
- For ICO, use image/x-icon.
- For SVG, use image/svg+xml.
/* for gif files, for example, it should look like this: */ /* path-to-favicon should be changed to the location of your favicon file */ icon" type="image/gif" href="path-to-favicon">A favicon must have the following characteristics:
- Favicon.ico is the default name.
- Size should be 16×16, 32×32, 48×48, 64×64 or 128×128 pixels.
- Color should be 8 bites, 24 bites or 32 bites.
There are a lot of online tools that will help you create a favicon, convert the image formats, etc., and you can find them by a simple search on Google, by the way.
The image must be square dimensioned in any image format (ico, jpg, BMP, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.
Example of adding an image in the title bar:
html> html> head> title>Title of the document title> link rel="icon" type="images/x-icon" href="https://www.w3docs.com/favicon.ico" /> head> body> h1>Hello from W3docs! h1> body> html>If you take a look at the result of the above code, it should be something like this.
Different Platforms:
For different platforms, the favicon size should also be changed:
| Platform | Name | Rel value | Favicon size |
|---|---|---|---|
| Google TV | favicon-96×96.png | icon | 96×96 |
| Ipad Retina, iOS 7 or later | apple-touch-icon-152×152-precomposed.png | apple-touch-icon-precomposed | 152×152 |
| Ipad Retina, iOS 6 or later | apple-touch-icon-144×144-precomposed.png | apple-touch-icon-precomposed | 144×144 |
| Ipad Min, first generation iOS 7 or later | apple-touch-icon-76×76-precomposed.png | apple-touch-icon-precomposed | 76×76 |
| Ipad Mini, first generation iOS 6 or previous | apple-touch-icon-72×72-precomposed.png | apple-touch-icon-precomposed | 72×72 |
| Iphone Retina, iOS 7 or later | apple-touch-icon-120×120-precomposed.png | apple-touch-icon-precomposed | 120×120 |
| Iphone Retina, iOS 6 or previous | apple-touch-icon-114×114-precomposed.png | apple-touch-icon-precomposed | 114×114 |
Add it to your code in the following way:
icon" href="/favicon.ico" type="image/x-icon"> icon" href="/favicon.png" sizes="32x32" type="image/png"> icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152"> icon-precomposed" href="/apple-touch-icon-120x120-precomposed.png" type="image/png" sizes="120x120"> icon" href="/favicon-96x96.png" sizes="96x96" type="image/png">Please note that you must change the href attribute value based on the location of your favicon file, either in your host or in your project folder if you’re working locally. And the naming matters; otherwise, the browser can not detect it.
In the end, it is worth noting that you can use this open-source link which is a cheat sheet for favicon and has valuable information that may help you along the way.
HTML Favicon
A favicon is a small image displayed next to the page title in the browser tab.
How To Add a Favicon in HTML
You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.
Tip: A favicon is a small image, so it should be a simple image with high contrast.
A favicon image is displayed to the left of the page title in the browser tab, like this:
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is «favicon.ico».
Next, add a element to your «index.html» file, after the element, like this:
Example
This is a Heading
This is a paragraph.
Now, save the «index.html» file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.
Favicon File Format Support
The following table shows the file format support for a favicon image:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
Chapter Summary
HTML Link Tag
For a complete list of all available HTML tags, visit our HTML Tag Reference.
Иконка-ссылка в HTML
Чтобы сделать ссылку в виде иконки или сделать иконку ссылкой, нужно поместить эту иконку внутрь тега . Если в качестве иконки используется не картинка, а иконочный шрифт, то и это не проблема — ссылку сделать можно.
Сперва пример HTML-кода, если иконка все же является обычной картинкой:
Как Вы видите, внутрь тега помещена картинка . Это самый простой и быстрый способ добавления обычной картинки на сайт, а семантически правильная вставка изображения описана здесь — «Как же все-таки правильно вставить картинку в HTML».
Что делать, если картинка в формате svg? Это вообще отдельная тема, и она тщательно описана здесь — «Как вставлять SVG-иконки в HTML — 5 способов и выбор наилучшего».
Лучше добавлять иконку именно через HTML. Но есть возможность привязать иконку к ссылке не через HTML, а через CSS. Делается это через CSS-свойство background в файле типа файл.css. Пример:
При этом нужно прописать для ссылки display: block; и указать размеры width и height.
Иконочный шрифт
Добавим ссылку иконку через иконочный шрифт на примере шрифта FontAwesome. Шрифт нужно сперва скачать в папку сайта. Потом подключить шрифт в теге строкой вида:
Здесь нужно указать путь до места, куда вы скачали шрифт.
Далее использовать иконку в ссылке надо так:
Все иконки можно увидеть на этой странице — fontawesome.ru/all-icons.
Подключение иконки Font Awesome через CSS
Иконке, подключенной через CSS, можно будет менять цвет при наведении курсора.
Чтобы подключить иконку Font Awesome через CSS нужно в CSS-файле использовать код вида:
Здесь иконка добавлена через псевдокласс :before. В свойстве контент указывается код иконки. Код иконки можно взять на странице fontawesome.ru/all-icons. Нужно кликнуть правой кнопкой мышки на нужную иконку и посмотреть её псевдокласс :before. Смотрите картинку:
Добавить комментарий Отменить ответ
Этот сайт, как и все сайты, использует cookie. Продолжая использовать этот сайт, Вы даете свое согласие на обработку cookie.OK
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
| Cookie | Duration | Description |
|---|---|---|
| cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics». |
| cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional». |
| cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary». |
| cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other. |
| cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance». |
| viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.