Как добавить иконку сайта в адресную строку браузера?
Раздел: Сайт http://htmlbook.ru/
При загрузке сайта, в адресной строке браузера можно иногда увидеть небольшую картинку, которая связана с тематикой сайта. Тот же рисунок отображается рядом со ссылкой при добавлении ее в закладки браузера.
Отображение иконки в строке браузера
Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 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>
<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>
<head>
<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>
Вложение Размер
icoformat.8bi 16 КБ
Предлагаем Вашему вниманию новый проект: COMP-INFO.net – самые современные компьютерные технологии! Здесь Вы найдете много полезной информации: основные понятия информатики, разновидности информационных технологий, операции технологического процесса обработки информации, роль программных и аппаратных средств, назначение и тенденции развития технических средств, виды операционных систем, их назначение, принципы оптимизации работы и многое другое. Кроме этого мы научим Вас разбираться в классификации информационных технологий, компьютеров и вычислительных систем, организовывать вычислительный процесс с использованием необходимого программного обеспечения, настраивать операционную обстановку пользователей и т. д.
