Как поменять иконку сайта? Инструкция как сделать и установить иконку для сайта самостоятельно

Получить предложение
* Заполните обязательно
4.0 (2)

Иконка веб-ресурса или favicon - это графический значок, картинка, отображаемая в браузере во вкладках, закладках и других элементах интерфейса программы.

Как поменять иконку сайта? Инструкция как сделать и установить иконку для сайта самостоятельно

Иконка веб сайта в браузере и в поисковике

Для её отображения нужен как файл картинки с определенными параметрами, так и специальный код, такого типа:

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

Термин favicon - это объединение в одно слово двух английских - FAVorites + ICON, что переводится как иконка для избранного. Изначально данная картинка демонстрировалась преимущественно в меню избранных сайтов. Сейчас же она показывается в строчке адреса некоторых браузеров (перед URL), во вкладках страниц, в избранном, закладках и пр.

Помимо вывода в программах-обозревателях, favicon показывают в результатах выдачи некоторые поисковики. Гугл их игнорирует, а вот Яндекс выводит перед названием ссылки и сниппетом, что позволяет выделить и идентифицировать ресурс не только с помощью текста, но и графически.

Если владелец или веб-мастер отказался от использования специальной иконки на ресурсе, то в интерфейсе обозревателя будет демонстрироваться эмблема браузера.

Понимание, что такое favicon и где он используется, уже есть? Тогда узнайте, как сделать иконку своими силами и добавить её!

Создание иконки для сайта

Сделать фавикон можно различными способами. Наиболее простой - воспользоваться специальными онлайн-сервисами, в которые подгружается картинка, желательно, квадратной формы, как и готовая иконка. Этот файл автоматически преобразуется в фавикон с нужным форматом и размером. Найти сайты по быстрому созданию favicon несложно. Подобный сервис имеется на Topodin.

Как ещё сделать свой favicon самостоятельно? Популярностью пользуется специальное программное обеспечение. Оно дает возможность отредактировать исходное изображение так, как вы этого хотите. Специализированные под создание иконок графические редакторы отличаются интерфейсом, доступными интерфейсами и предлагаемым функционалом. Так, одни программы позволяют редактировать сразу несколько вариаций фавикона, другие - предлагают использование трехмерных эффектов и градиентной заливки, третьи - максимально просты и делают акцент на скорости и легкости использования.

Вот несколько подобных программ, которые помогут создать иконку для веб-площадки:

  • Icon Генератор;

  • X-Icon-Editor;

  • Favicon Creator;

  • IcoFX.

Следующий способ создания фавикона - это рисование подходящего изображения в фотошопе или другом графическом редакторе. Подобные универсальные программы помогут создать любое изображение. Это могут быть буквы и символы с особым шрифтом, логотип компании, какой-то образ, эмблема, копия лого. При рисовании favicon помните, что он должен сочетаться с общим дизайном сайта, его контентом, соответствовать тематике. Благодаря этому он лучше запомнится аудиторией.

При сохранении созданной в Photoshop иконки, необходимо выбрать правильный формат файла - .ico. Если его вы не обнаружили, нажав в меню редактора "Сохранить как", то нужно обновить набор форматов, скачав специальный плагин и разместив его в папке программы (CS2 Plug-Ins File Formats). После этого при сохранении появится строка с подходящим форматом - ICO.

Иконки для сайта: размер 16х16 или 32х32?

Важный момент при создании фавикона - это выбор размера файла. Как правило, разрешение иконки должно быть 16 на 16 точек, но допускается и увеличенный формат - 32 на 32. Помните, что в браузере графический значок все рано будет уменьшен до 16х16 точек, поэтому все попытки разместить в favicon шедевр изобразительного искусства тщетны. Заметны и хорошо видимы будут лишь логотипы или отдельные буквы (символы).

Формат иконки для сайта

Сегодня универсальный формат для фавикона - это расширение .ico. Его поддерживают все ведущие браузеры без исключения - Хром, Фаерфокс, Опера, Сафари, Интернет Эксплорер. Также к числу универсальных относятся такие форматы, как gif, jpeg, png. Их не поддерживает только обозреватель по умолчанию для Виндовс - IE. От выбора анимированных изображений лучше отказаться, так как его поддерживает лишь Опера и Фаерфокс. Кстати, эти два обозревателя являются наиболее "всеядными", поддерживая большинство форматов файлов, выбираемых для картинок иконок.

Когда фавикон готов, сохранен в правильном разрешении и формате, единственная задача - установка на веб-ресурсе.

Как добавить иконку на сайт? Установка иконки на сайт

Изначально следует загрузить сам графический файл на веб-сервер. Сделать это необходимо в корневую директорию. Воспользуйтесь специальными FTP-клиентами или панелью управления ресурсом и её менеджером файлов.

Когда файл с иконкой добавлен, остается лишь обеспечить её отображение в интерфейсе браузеров и результатах выдачи Яндекса. Для завершения процесса установки нужно добавить строчку кода.

Html код иконки для сайта

Фрагмент кода может иметь такой вид:

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

Обращаем внимание, что формат изображения прописывается в атрибуте type. К примеру, если вы загружаете картинку с разрешением gif, то код будет иметь такой вид:

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

Вставьте этот фрагмент кода между тегами <head> и </head> - в произвольном месте. Добавляется он на тех страницах, где вам необходимо выведение иконки в обозреватели и/или поисковике.

При установке фавикон в wordpress потребуется корректировка header.php, где данный код уже имеется по умолчанию.

Этой информации достаточно, чтобы установить favicon самостоятельно на веб-сайте.

Как поменять иконку сайта? замена иконки сайта

Иногда нужно произвести замену имеющейся иконки, обновить устаревшее изображение. Процесс замены фавикона аналогичен тому, что и при добавлении новой. Первым делом нужна новая картинка, которая сохраняется в необходимом формате. После этого она загружается в корень на сервере. Далее вы отыскиваете прописанный код для иконки, проверяете его правильность, при необходимости корректируете путь к добавленному графическому элементу и формат. Затем браузеры начнут отображение новой картинки сразу после нажатия F5 - обновления странички.

Создание, установка и замена favicon теперь не станет сложностью. Узнать о полезных возможностях по оформлению и оптимизации сайта вы можете из других наших постов.  

13.12.2015


Пока нет комментариев

Написать комментарий
captcha