Как создать и установить иконку сайта favicon.ico image

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

Вспомните самые известные корпорации и их логотипы: Кока-кола, Apple, Сбербанк, Альфа-банк и так далее. Практически каждый узнает их бренд и сможет назвать компанию, к которой он относится. Это одна из разновидностей маркетинга, человек на визуальном уровне запоминает гораздо лучше, чем на слух.

Favion image это такой маленький логотип сайта, который будет обозначать и ассоциироваться конкретно с вашим сайтом.

Favcion, или «иконка сайта» так же нужна для визуальной идентификации сайта в поисковых системах. Это своего рода, миниатюрный логотип размером 16х16 пикселей в формате ico или png.

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

Служба поддержки Яндекс не раскрывает алгоритм ранжирования ресурсов, так как на это влияет более 1000 критериев и факторов. Наличие или отсутствие иконки сайта — один из них.

Фавикон виден при появлении сайта в поисковых системах и в URL строке некоторых браузеров.

favicon в поисковой системе яндекс - как выглядит
Конкретно в Google Chrome браузере, иконка сайта favicon.ico высвечивается вот так:

как выглядет фавикон сайта

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

Если вы хотите создать и установить иконку сайта, вам для начала, нужен исходник, из которого и будет выполнен фавикон. В большинстве случаев у компаний уже есть свой логотип, и его попросту «сжимают» через определенные он-лаин сервисы до нужных размеров и в соответствующий формат (ico или png).

Способ №1 Создать самому

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

сжатие логотипа до иконки сайта фавиконЖмём «Выберите файл» и загружаем с компьютера изображение для превращения его в favicon.

обработка фавикона
Выбираем область изображения и снизу оцениваем как он будет смотреться. Жмём «Загрузить«.

графический редактор для обработки изображения favicon
Картинку можно доработать в редакторе.

конечный результат создание иконки сайтаВот пример как иконка будет смотреться в браузерной строке ресурса. Кликаем на «Скачать фавиконку».

скаченная фавиконка
Иконка сайта создана и скачена.

Способ №2 Нарисовать через специализированный он-лаин сервис

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

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

Как установить favicon.ico на сайт

Первым делом, готовый файл в расширении ico заливаем в корневой каталог сайта. Сайтам на WordPress это делается через Медиафайлыдобавить новый.

Как добавить favicon.ico в корневой каталог сайта на WordPress
Выбираем файл с компьютера и заливаем.

Загрузка фавикон в корневой каталог сайта
Теперь нам нужно узнать адрес этого файла. Жмём на маленькую иконку внизу сайта.

как узнать адрес фавикона в корневом каталоге
Копируем URL картинки и получаем ссылку на неё в корневом каталоге. Вставим копированное в текстовый документ (блокнот).

ссылка на фавикон в корневом каталогеУ меня уже есть файл с именем «favicon.png», поэтому этот файл назвался фавикон-1.
Формат после загрузки так изменился автоматически с ico на png — это нормально. Не волнуйтесь, так и должно быть.

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

<link rel=»icon» href=»ваша ссылка здесь» type=»image/x-icon» />
<link rel=»shortcut icon»href=»ваша ссылка здесь» type=»image/x-icon» />

Вставляем нашу ссылку на иконку сайта в строку (без пробелов в начале и конце) и закидываем это в блок <head>.

Вставить в исходный код ссылку на фавикон
Сохраняем и наслаждаемся результатом. Ваш личный фавикон создан и установлен на ваш сайт.

готовый фавикон установлен на сайт

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика