Здравствуйте! Сегодня разбираемся как установить фавикон на сайт. Также выясним насколько важно для сайта его установка и какие сервисы и программы нам в этом помогут. Я покажу несколько способов, как установить favicon.ico на любой сайт.
Что такое Фавикон
Favicon (favicon.ico, фавикон, фавиконка) — это маленькая иконка сайта, которая отображается в поисковой выдачи, рядом с названием. Размер фавикона для сайта должен быть 16×16, 32×32 или 120×120 пикселей.
Рекомендуемый тип файла — это *.ico. Но может быть других форматов gif, jpeg, png, bmp. Я на всех своих сайтах использую файл с расширением *.ico.
А еще фавиконка отображается во вкладках и закладках браузера. Маленькая иконка, по которой можно легко узнать интернет-ресурс.
Помимо визуальной составляющей, это важный пункт для продвижения сайта.
Например, отсутствие фавиконки, приводит к ошибке в Яндекс Вебмастере, что в результате может привести к понижению в поисковой выдачи. Это уже серьезная причина чтобы добавить фавикон.
Создание favicon.ico
Самые распространенные способы — это с помощью онлайн сервисов или знаменитого растрового редактора — Adobe Photoshop.
Онлайн-сервисы
Создать фавиконку можно с помощью онлайн-сервисов, подойдет любой которые найдете, но я использую www.favicon.by. Интерфейс простой, есть готовая коллекция фавиконов, можно заказать даже анимированную фавиконку, а также есть полная инструкция по установке.
Интерфейс сервиса состоит из следующих разделов:
- Нарисовать самостоятельно — в этом разделе есть все что необходимо для самостоятельно рисования фавиконки (карандаш, ластик, пипетка, заливка, переместить).
- Импорт из файла — выбираете любой рисунок и сервис сам создает фавикон.
- Импорт с сайта — создаст favicon.ico на основе импорта фавиконки с сайта.
- Область для рисования.
- Готовый результат — сразу можете оценить, как будет выглядеть favicon.
- Скачать готовую фавиконку.
Вот такой простой, не сложный сервис поможет создать красивую и уникальную фавиконку.
Adobe Photoshop
Я выбираю именно фотошоп, потому что редактирую в нем все картинки для блога. Если у Вас нет опыта работы с Adobe Photoshop, не переживайте, я все подробно покажу.
Открывает программу, создаем документ с размером 32×32 пикселей.
Далее с помощью инструментов можно:
- сделать заливку;
- написать текст;
- создать фигуру.
Или загрузить картинку, например, свой логотип и его уменьшить до необходимых размеров.
- Для этого открываем меню Файл -> Открыть, далее выбираем свою картинку и нажимаем кнопку Открыть.
- После, инструментом выделение, отмечаем нужную часть логотипа, далее меню Редактирование -> Копировать.
- Закрываем логотип, открываем документ с нашей будущей фавиконкой, нажимаем меню Редактирование -> Вставить.
- Далее на клавиатуре нажимаем сочетание клавиш Ctrl+T (eng), подгоняем картинку под наши размеры. Готово.
Фавиконку сохраняем, выбрав меню Файл -> Сохранить как…, указываем имя favicon и выбираем расширение .png или .jpeg или .jpg.
После сохранения можно устанавливать, но рекомендуется файл с расширением .ico. Поэтому наш favicon.png конвертируем в favicon.ico.
Открываем ресурс https://convertio.co/ru/ и загружаем наш файл.
Далее нажимаем кнопку Конвертировать, ждем и можем скачивать готовую фавиконку.
Вот теперь можно поставить фавикон на сайт.
Установка фавикона
Я покажу два способа установки, первый подойдет для всей сайтов, например, для сайта на HTML или WordPress, Второй способ только для проектов на движке WordPress.
Первый способ
Для начала нужно поместить созданный favicon.ico в корень сайта. Подключаемся к хостингу по FTP-соединению с помощью клиента FileZilla, перемещаем файл в корневую папку.
После этого открываем главную страницу сайта с помощью любого редактора кода, в Вордпресс это можно сделать, открыв меню Внешний вид -> Редактор тем, файл header.php и размещаем следующий код в разделе <head>:
[php] <link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
[/php]
Сохраните файл, обновите страницу, появится фавикон. Если не отображается фавикон, то необходимо почистить куки в браузере.
Второй способ
Как я говорила ранее этот способ подойдет только для установки на CMS WordPress.
Открываем меню Внешний вид, далее выбираем шаблон, нажимаем настроить, далее Свойства сайта. Загружаем иконку на и сразу можем увидеть результат.
Изменить или удалить фавикон
Фавиконка присутствует при поисковой выдачи вашего сайта, а значит для его изменения нужно время, для начала удалите старый файл favicon.ico и загрузите новый.
А потом дождитесь пока поисковый робот посетит ваш ресурс и добавить новую иконку в свою базу, на это может уйти до 2 недель.
По факту, иконка поменялась за пару дней.
А для удаления — просто удаляем файл и опять ждем робота в гости.
Вот и все, теперь знаете, как установить фавикон на свой сайт, как нарисовать и какие требования к фавикону.
До встречи!
