Вот самый простейший способ сделать иконку:
Этот симпатичный, на мой взгляд, домик на вкладе слева вверху я нарисовал лично в редакторе Paint (даже не в Paint 3D), как файл формата PNG размером 16x16, и сохранил в корневом каталоге. В тексте HTML в разделе <head> добавил строку:
<link type="image/png" sizes="16x16" rel="icon" href="favicon.png">
На самом деле всё немного сложнее, но всё-равно не стоит сильно заморачиваться.
Немного истории:
Первоначально браузеры, начиная с Microsoft Internet Explorer 5, начали автоматически (даже без всяких строк в <head>) поддерживать иконки в виде файла с конкретным названием и форматом, размещённого в корневом каталоге сайта:
favicon.ico (здесь справочная информация на русском языке).
Этот файл формата .ICO может содержать несколько изображений разных размеров, но как минимум одно изображение, обычно 16x16 – оно самое универсальное и маленькое - не требовало времени на загрузку.
Напротив, фирма Apple в своём браузере Safari (компьютеры Mac, смартфоны IPhone) поддерживала иконки автоматически но другим способом, через файл формата .PNG, также размещённого в корневом каталоге (размер иконки сначала был 60×60 пикселей):
apple-touch-icon.png
В дальнейшем, поддержка иконок расширялась как по типу форматов файлов, из размеру в пикселях, разнообразию мест, где изображаются иконки. Примеры таких мест - вкладка, адресная строка, закладка, иконка на рабочем столе и т.д. Причем разные браузеры изображают иконки разного разного размера в разных местах (кто в лес, кто по дрова).
Одно хорошо – сейчас все распространённые браузеры поддерживают все распространённые форматы изображения (кроме анимированных, их поддерживают не все):
Следовательно, мы можем взять любую картинку или фото, которые нам нравятся, с помощью простейших графических редакторов наделать картинок разного размера, и указать в тексте HTML в разделе <head>, какие картинки использовать в каком случае (т.е. для разных размеров иконки, если какой-либо браузер будет их искать). И, по-прежднему, надо указать иконки для Safari отдельно.
Все разнообразные форматы и размеры иконок теперь можно описать в тексте HTML страницы в разделе <head>.
Например, сама статья в руководстве W3Schools "HTML Favicon"
имеет следующий код, относящийся к иконкам, и говорящий сам за себя:
<link rel="icon" href="https://www.w3schools.com/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#04aa6d">
Примечания.
1. Для того, чтобы получить файл формата .ico (в частности, favicon.ico), можно воспользоваться конвертерами, их много в сети. Я рекомендую сайт https://www.favicon.cc/
2. Формат svg – этот формат нужен в данном случае для браузера Safari, чтобы задний фон иконки был зелёным (rel="mask-icon") - я полагаю, совпадать с цветом рабочего стола. Этот формат – векторный (может растягиваться и сжиматься без потери качества), поэтому файла одного размера (24x24) достаточно для определения прозрачности всех иконок.
Браузер Safari, как обычно, выделяется среди других браузеров своими особенными ключами описания иконок и требованиями к ним, сложными и на все случаи жизни. Но для начала можно обойтись хотя бы двумя строчками из примера выше.
И наконец, последний писк моды - cпецификация Web App Manifest – описывать всё, относящееся к внешнему виду сайта, в т.ч. иконки, в отдельном файле формата JSON, и указывать ссылку на него в разделе <head>.
Например, для страницы выше используются оба способа, и строка определения манифеста имеет вид:
<link rel="manifest" href="/site.webmanifest">
А сам файл манифеста очень простой (добавляются две большие иконки для особых случаев):
{
"name": "W3Schools",
"short_name": "W3Schools",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Как видите, иконки – это не просто, а очень просто. Если всё же появились вопросы – пожалуйста, обращайтесь.
-----
Донаты.
Вы можете поблагодарить и поощрить автора денежным подарком через Юmoney на кошелёк 4100117793355888.