Как создать и установить фавикон на сайт

Здравствуйте! Сегодня разбираемся как установить фавикон на сайт. Также выясним насколько важно для сайта его установка и какие сервисы и программы нам в этом помогут. Я покажу несколько способов, как установить favicon.ico на любой сайт.

Что такое Фавикон

Favicon (favicon.ico, фавикон, фавиконка) – это маленькая иконка сайта, которая отображается в поисковой выдачи, рядом с названием. Размер фавикона для сайта должен быть 16×16, 32×32 или 120×120 пикселей.

что такое favicon.ico

Рекомендуемый тип файла – это *.ico. Но может быть других форматов gif, jpeg, png, bmp. Я на всех своих сайтах использую файл с расширением *.ico.

А еще фавиконка отображается во вкладках и закладках браузера. Маленькая иконка, по которой можно легко узнать интернет-ресурс.

фавикон на вкладках

Помимо визуальной составляющей, это важный пункт для продвижения сайта.

Например, отсутствие фавиконки, приводит к ошибке в Яндекс Вебмастере, что в результате может привести к понижению в поисковой выдачи. Это уже серьезная причина чтобы добавить фавикон.

Создание favicon.ico

Самые распространенные способы – это с помощью онлайн сервисов или знаменитого растрового редактора – Adobe Photoshop.

Онлайн-сервисы

Создать фавиконку можно с помощью онлайн-сервисов, подойдет любой которые найдете, но я использую www.favicon.by. Интерфейс простой, есть готовая коллекция фавиконов, можно заказать даже анимированную фавиконку, а также есть полная инструкция по установке.

онлайн сервис для создания фавикона

Интерфейс сервиса состоит из следующих разделов:

  1. Нарисовать самостоятельно – в этом разделе есть все что необходимо для самостоятельно рисования фавиконки (карандаш, ластик, пипетка, заливка, переместить).
  2. Импорт из файла – выбираете любой рисунок и сервис сам создает фавикон.
  3. Импорт с сайта – создаст favicon.ico на основе импорта фавиконки с сайта.
  4. Область для рисования.
  5. Готовый результат – сразу можете оценить, как будет выглядеть favicon.
  6. Скачать готовую фавиконку.

Вот такой простой, не сложный сервис поможет создать красивую и уникальную фавиконку.

Adobe Photoshop

Я выбираю именно фотошоп, потому что редактирую в нем все картинки для блога. Если у Вас нет опыта работы с Adobe Photoshop, не переживайте, я все подробно покажу.

Открывает программу, создаем документ с размером 32×32 пикселей.

создаем фавиконку с помощью Adobe Photoshop

Далее с помощью инструментов можно:

  1. сделать заливку;
  2. написать текст;
  3. создать фигуру.

инструменты Adobe Photoshop

Или загрузить картинку, например, свой логотип и его уменьшить до необходимых размеров.

  • Для этого открываем меню Файл -> Открыть, далее выбираем свою картинку и нажимаем кнопку Открыть.
  • После, инструментом выделение, отмечаем нужную часть логотипа, далее меню Редактирование -> Копировать.
  • Закрываем логотип, открываем документ с нашей будущей фавиконкой, нажимаем меню Редактирование -> Вставить.
  • Далее на клавиатуре нажимаем сочетание клавиш Ctrl+T (eng), подгоняем картинку под наши размеры. Готово.

Фавиконку сохраняем, выбрав меню Файл -> Сохранить как…, указываем имя favicon и выбираем расширение .png или .jpeg или .jpg.

сохранить фавикон Adobe Photoshop

После сохранения можно устанавливать, но рекомендуется файл с расширением .ico. Поэтому наш favicon.png конвертируем в favicon.ico.

Открываем ресурс https://convertio.co/ru/ и загружаем наш файл.

сервис для конвертации файлов

Далее нажимаем кнопку Конвертировать, ждем и можем скачивать готовую фавиконку.

favicon.ico конвертация

скачать готовый фавикон

Вот теперь можно поставить фавикон на сайт.

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

Я покажу два способа установки, первый подойдет для всей сайтов, например, для сайта на HTML или WordPress, Второй способ только для проектов на движке WordPress.

Первый способ

Для начала нужно поместить созданный favicon.ico в корень сайта. Подключаемся к хостингу по FTP-соединению с помощью клиента FileZilla, перемещаем файл в корневую папку.

FTP-соединению с помощью клиента FileZilla

После этого открываем главную страницу сайта с помощью любого редактора кода, в Вордпресс это можно сделать, открыв меню Внешний вид -> Редактор тем, файл header.php и размещаем следующий код в разделе <head>:

<link rel="icon" href="/favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

файл header.php

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

Второй способ

Как я говорила ранее этот способ подойдет только для установки на CMS WordPress.

Открываем меню Внешний вид, далее выбираем шаблон, нажимаем настроить, далее Свойства сайта. Загружаем иконку на и сразу можем увидеть результат.

фавикон установка на CMS WordPress

Изменить или удалить фавикон

Фавиконка присутствует при поисковой выдачи вашего сайта, а значит для его изменения нужно время, для начала удалите старый файл favicon.ico и загрузите новый.

А потом дождитесь пока поисковый робот посетит ваш ресурс и добавить новую иконку в свою базу, на это может уйти до 2 недель.

изменение фавикона

По факту,  иконка поменялась за пару дней.

фавикон изменение через пару дней

А для удаления – просто удаляем файл и опять ждем робота в гости.

Вот и все, теперь знаете, как установить фавикон на свой сайт, как нарисовать и какие требования к фавикону.

До встречи!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

С уважением, Ирина Бузикова!

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Блог Ирины Бузиковой
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
"Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Подробнее в Создание блога
Необходимые плагины для сайта на WordPress

Здравствуйте друзья! Сегодня разберем какие необходимые плагины для Wordpress нужно устанавливать в...

Закрыть