Построение сайта, продвижение, работа в сети

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

Сделать faviconКак сделать favicon для своего сайта, чтобы он отличался от других ресурсов в интернете и был узнаваем с первого взгляда. Вопрос совсем не праздный.

Что такое favicon

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

Там, где размещается адресная строка браузера с адресом сайта, эта картинка, иначе favicon, также отображается. Это позволяет посетителям обратить внимание на ваш ресурс и лучше его запомнить по сравнению с другими.

Кроме того, поисковые системы точно также понимают эти маленькие картинки. Сайты, которые такие значки не имеют, отображаются белым безликим листочком бумаги.

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

Как работает favicon

Замечено, что люди в результатах поиска чаще кликают на сайты, которые имеют такие иконки, чем на пустые, на которых не сделан favicon. Наличие иконки показывает, во-первых, что сайт профессиональный, потому что он использует все, что может показать поисковик, а во-вторых, людям видимо приятней видеть картинки и таким образом как-то различать сайты.

Например, когда человек работает со многими вкладками, то тут включается длительная память. То есть человек может не запомнить название, но вот этот favicon в адресе сайта, даже не желая этого, он запомнит и это действительно работает.

Делаем favicon с помощью программы Pint

Значок для сайта может быть двух размеров, это 16 ×16 или 32 × 32. Изображение может быть в форматах png, либо gif. Сделать favicon лучше таким образом, чтобы он был разборчив и что-то изображал. Разберем, как сделать favicon и поставить его на сайт.

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

Картинка для favicon

в программе нажимаем Изменить размер, в открывшемся окне снимаем галку Сохранить пропорции и выставим размеры в 16 px по горизонтали и по вертикали.

Размеры favicon

Нажимаем Сохранить как, выбираем формат при сохранении – пусть PNG и выбираем нужную папку.

Как сделать favicon с помощью онлайн сервиса

Можно воспользоваться специальным сервисом favicon.cc, который предоставляет возможность создать картинку для favicon без каких-либо условий, по сравнению с другими сервисами. Так, например, favicon.ru требует поставить на сайте ссылку на сервис, что не совсем хорошо.

Сервис favicon.cc

В открывшемся окне есть несколько функций, в частности можно залить уже готовое изображение, если нажать на ссылку Import Image, то есть загрузить картинку. Взять можно любую картинку, вставить ее, нажать загрузку и сервис автоматически преобразует большое изображение в упрощенную картинку.

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

Предварительный просмотр

На этом сервисе можно также нарисовать картинку самостоятельно. Для этого надо выбрать ссылку Greate Now Favicon и перед нами будет чистое поле. Здесь можно поэкспериментировать с картинкой и создать что-нибудь подходящее и оригинальное для своего сайта.

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

Рисуем favicon

Когда картинка будет создана, то под предварительным просмотром есть ссылка Download Favicon, нажимаем на нее и предлагается сохранить эту картинку в нужную папку на компьютер с расширением ico.

Устанавливаем favicon на сайт

Сейчас нужно поставить эту картинку на сайт. Открываем файловый менеджер, выбираем папку с темами и вставляем туда нашу картинку, лучше в действующую тему.

Но favicon в адресной строке сайта может пока не появиться. Чтобы картинка подгружалась, нужно внести изменения в заголовок сайта – в файл header.php, то есть нужно дать команду, чтобы сайт подгружал эту картинку.

Входим в консоль – Внешний видРедактор, выбираем header.php и перед закрывающим тегом </head> вставляем код следующего содержания:

<link rel=”shortcut icon” type=”image/png” href=”адрес вашего сайта/wp-content/themes/название картинки.png”/>

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

Поисковики со временем, в свою очередь, проиндексируют ваш сайт и в дальнейшем, в поиске будут отображать ваш сайт уже с иконкой.

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

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

Поиск Яндекса
Группа Компьютерная грамотность
Подпишитесь на новости

Введите ваш email адрес: