Чтобы установить подобную «фичу», необходимо нарисовать изображение размером
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.
После добавления плагина, при сохранении рисунка в списке доступных форматов
появляется новый пункт «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>