Иконкой сайта называется небольшая картинка, расположенная в адресной строке браузера. Чаще всего это тематическая пиктограмма, мотив которой связан с направлением ресурса. Работая с поисковиком Яндекс, пользователь видит данную иконку еще на этапе выведения результатов по запросу – она располагается рядом с названием сайта. Как создать и добавить индивидуальную иконку?
Алгоритм добавления иконки на сайт – создание картинки
Иконка для сайта (или favicon) представляет собой картинку размером 16*16 пикселей с расширением ICO. Подготовленную картинку сохраняете в корневом каталоге сайта под названием favicon.ico. В этом случае сервисы будут отображать созданную пиктограмму автоматически.
Добавление значка на сайт включает в себя несколько этапов – создание собственно иконки и добавление ее на сайт. Для создания необходимой пиктограммы можно воспользоваться одним из онлайн сервисов.
Подготовка иконки с помощью сторонних ресурсов
Популярным ресурсом данного направления является favicon.
- Центральный квадрат появившийся на экране является своеобразным холстом вашего мотива.
- Вы можете как создать собственную картинку, так и отредактировать готовое изображение. Во втором случае необходимо кликнуть клавишу “Import Image” и загрузить желаемую картинку.
- В нижней части экрана есть поле предварительного просмотра (“Preview”), в котором пользователь видит результат своих действий.
- Когда картинка будет готова, сохраняете ее на вашем персональном устройстве (“Download Favicon”).
При желании можно загрузить и установить специальные приложения для создания иконок, например:
Подготовка иконки с помощью Photoshop
Владение приемами работы в фотошопе позволяют также использовать данный графический редактор для создания иконки на сайт.
- Сжатие картинки до необходимого размера производите в разделе работы с изображением “Image” – ”Image size” (16*16 pxl).
- Важный момент – готовую картинку вы должны сохранить в формате “ico”.
- Имя пиктограммы – “favicon”.
Стандартный набор форматов редактора не включает расширение “.ico”. Чтобы его добавить, необходимо скачать плагин формата “ico” и распаковать его в папку “FileFormats” (C\ProgramFiles\Adobe\AdobePhotoshop\CS2Plug-Ins\FileFormats). После этого в перечне расширений пункта “Сохранить как” появится вариант “.ico”.
Алгоритм добавления иконки на сайт – размещение картинки
Загрузка подготовленной картинки на сайт производится путем загрузки ее в корневой каталог портала:
- Используя FTP-клиент или файловый менеджер, подключаетесь к сайту.
- Загружаете иконку в папку “public_html”.
Если после размещения favicon в корне сайта изображение так и не появилось или вы хотите установить картинку, имеющую отличное от “ico” расширение, в области заголовка (<head></head>) необходимо прописать полный путь к подготовленной картинке:
- <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>;
- или <link rel=”shortcut icon” href=”/favicon.ico” type= “image/x-icon”>;
- или <link rel=”shortcut icon” type=”image/png” href=”/favicon.png”/>.