Добавить иконку сайта в адресную строку браузера - «Дизайн сайтов» » Новости мира Интернет
В Google постепенно добавляют возможность смены адреса электронной почты - «Новости мира Интернет»
В Google постепенно добавляют возможность смены адреса электронной почты - «Новости мира Интернет»
OpenAI запускает рекламу в ChatGPT для бесплатных пользователей и тарифа Go - «Новости мира Интернет»
OpenAI запускает рекламу в ChatGPT для бесплатных пользователей и тарифа Go - «Новости мира Интернет»
Anker представила компактную зарядку Nano Charger с умным экраном и мощностью 45 Вт - «Новости мира Интернет»
Anker представила компактную зарядку Nano Charger с умным экраном и мощностью 45 Вт - «Новости мира Интернет»
Nex Computer анонсировала NexPhone – карманный ПК на Android, Linux и Windows - «Новости мира Интернет»
Nex Computer анонсировала NexPhone – карманный ПК на Android, Linux и Windows - «Новости мира Интернет»
Sony представила фирменные наушники-клипсы LinkBuds Clip Open - «Новости мира Интернет»
Sony представила фирменные наушники-клипсы LinkBuds Clip Open - «Новости мира Интернет»
АЭС — это долго: в Казахстане построят «долину ЦОД» с питанием от угольных электростанций - «Новости сети»
АЭС — это долго: в Казахстане построят «долину ЦОД» с питанием от угольных электростанций - «Новости сети»
«Да здравствует Принц!»: в ответ на отмену ремейка GOG спасёт классическую Prince of Persia: The Sands of Time от цифрового небытия - «Новости сети»
«Да здравствует Принц!»: в ответ на отмену ремейка GOG спасёт классическую Prince of Persia: The Sands of Time от цифрового небытия - «Новости сети»
«Google Фото» научились превращать фотографии пользователей в мемы с помощью ИИ - «Новости сети»
«Google Фото» научились превращать фотографии пользователей в мемы с помощью ИИ - «Новости сети»
Проблемное январское обновление Windows 11 отказывается удаляться — два способа вернуть систему в норму - «Новости сети»
Проблемное январское обновление Windows 11 отказывается удаляться — два способа вернуть систему в норму - «Новости сети»
В Китае придумали, как обмануть Вселенную и занедорого зажечь «искусственное солнце» на Земле - «Новости сети»
В Китае придумали, как обмануть Вселенную и занедорого зажечь «искусственное солнце» на Земле - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Дизайны сайтов » Добавить иконку сайта в адресную строку браузера - «Дизайн сайтов»

При загрузке сайта, в адресной строке браузера можно иногда увидеть небольшую картинку, которая связана с тематикой сайта. Тот же рисунок отображается рядом со ссылкой при добавлении ее в закладки браузера.


Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program.;Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program.;Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

.;


Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

.;


Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

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

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head>
 <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>

При загрузке сайта, в адресной строке браузера можно иногда увидеть небольшую картинку, которая связана с тематикой сайта. Тот же рисунок отображается рядом со ссылкой при добавлении ее в закладки браузера. Отображение иконки в строке браузера Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico. Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин. Для работы плагина файл необходимо распаковать и сохранить в папке Plug-InsFile Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:Program.;FilesAdobePhotoshop CS. Тогда полный путь для файла плагина будет c:Program.;FilesAdobePhotoshop CSPlug-InsFile Formats. .; Размещение плагина для сохранения файлов в формате ICO После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon». .; Тип файла для сохранения иконки Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки. Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег , как показано ниже. Атрибут href задает расположение и имя файла. Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.
Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Смотрите также

А что там на главной? )))



Комментарии )))