Как сделать иконку для сайта

Если театр начинается с вешалки, то любой уважающий себя сайт — с иконки. Шутки-шутками, но иногда по наличию и качеству иконки сайта судят о самом ресурсе. Да и отображение иконки в результатах поискового запроса поможет выделить сайт среди остальных.

В любом случае, нелишним будет знать, как создать, установить и изменить иконку. Об этом и поговорим.

Создание фавикона с помощью онлайн-сервисов

Иконку, или фавикон (от английского favorites icon) легче всего создать, используя популярные бесплатные сервисы.

Как сделать иконку для сайта

Но перед тем, как сделать иконку для сайта, следует подготовить выбранное заранее изображение. Это должна быть квадратная картинка. Нужно учесть, что сервис фавикон.ру стандартизирует все изображения, уменьшая их до размера 16х16 пикселей. Поэтому если картинка изначально будет не квадратной, программа может довольно сильно исказить ее. Размер загружаемого файла для сервиса не должен превышать 300 килобайт.

Сделать фавикон для сайта можно, используя любой графический редактор. Если уже есть готовая картинка (например, эмблема компании), ее стоит лишь подготовить и уменьшить. Если же нужно создать рисунок «с нуля» — сервис «фавикон» предлагает воспользоваться элементарной, но довольно удобной программой рисования иконок.

Как сделать иконку для сайта

Итак, иконка загружена или нарисована. Для того, чтобы получить готовое изображение, достаточно нажать кнопку «Скачать favicon» в правом нижнем углу страницы. В результате загрузится файл favicon.ico.

Фавикон и Фотошоп

Можно создать искомый файл, используя только Фотошоп. Подобрав или предварительно отрисовав нужное изображение, следует нажать «Сохранить как» и из списка форматов для сохранения  выбрать .ico.

Может получиться, что версия программы обработки изображений не будет поддерживать этого формата. В таком случае следует поискать и скачать плагин формата ico. Его нужно распаковать в папку Plug-InsFileFormats. После этих нехитрых действий возможность сохранения в данном расширении будет доступна.

Небольшой совет. Практически все браузеры стандартизируют иконки сайтов до размера 16 на 16 пикселей. Учитывая это, не нужно создавать высокохудожественные полотна — их просто-напросто не будет видно.

Формат ico используется наиболее часто, так как он поддерживается всеми популярным браузерами. Можно сохранять изображения и в других графических форматах, но важно помнить, что некоторые браузеры не будут отображать такую иконку.

Как сделать иконку для сайта

Установка иконки

Заветный фавикон получили. Следует подумать, как поставить иконку на сайт. Для этого нужно загрузить файл изображения в корневую директорию сайта (обычно она носит название public_html).

Но это еще не все. Для отображения иконки нужно прописать следующий html-код:

<link rel=»SHORTCUT ICON» href=»/favicon.ico»type=»image/x-icon»>

В графе «type» важно правильно указать тип изображения. То есть, если используется картинка формата GIF, код будет выглядеть так:

<link rel=»SHORTCUT ICON» href=»/favicon.gif»type=»image/gif»>

Этот код устанавливается в любом месте между тегами <head> и </head> файла главной страницы.

Как сделать иконку для сайта

Как установить иконку на сайт, мы разобрались. Проверить правильность установки можно, просто введя в строке браузера адрес своей страницы. Если слева от адреса отображается фавикон — все сделано верно.

Как сделать иконку для сайта

Следует заметить, что в результатах выдачи поисковиков иконка отобразится не сразу, а лишь после обновления кэша. Этот процесс может занять от недели до месяца, а то и больше.

Замена иконки

Если фавикон на сайте уже есть, но он не устраивает владельца ресурса, нужно разобраться, как изменить иконку сайта. По сути, ничего сложного в этом нет — схема замены идентична добавлению иконки на сайт. То есть, сначала рисуется картинка, сохраняется в заранее определенном формате. Полученное изображение загружается в корневую папку сайта, изменяется или заново прописывается html-код (в случае небоходимости). Если все сделано верно, браузер будет отображать новую иконку сразу после обновления страницы.

Таким образом, чтобы найти ответ на  вопрос, как поменять иконку сайта, следует прочитать этот материал заново. 🙂

Как сделать иконку для сайта

Понравился пост? В телеге – больше! @wildo_blog
Подписаться
Мои проекты

wildo.marketing

Рекламное агентство для брендов и мобильных приложений с оплатой за целевое действие.

wteam.marketing

Медиабаинговая компания для iGaming продуктов в 30+ странах с фокусом на социальный трафик.
Больше эксклюзивного контента в Telegram-канале @wildo_blog Перейти в Telegram