Как добавить фавикон


Favicon — это небольшая картинка размером 16×16 (или 32×32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты. На мой взгляд, они многое теряют. Например, в Yandex отображаются иконки сайтов, и люди переходят по таким сайтам гораздо чаще, чем по тем, на которых нет favicon. Также, на мой взгляд, это немного повышает авторитетность сайта. В общем, в этой статье мы установим favicon на сайт.

Для начала как найти favicon. Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc. На нём Вы прямо в онлайне создадите себе favicon. Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ — это воспользоваться поиском и запросом: «коллекция favicon«. Думаю, что уже первый сайт покажет Вам тысячи различных favicon, и Вам останется его только выбрать.

Теперь второй шаг — установка favicon на сайт. Для этого добавьте внутри тега <head> следующую строку:

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


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

После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

Иногда favicon появляется не сразу. Как правило, виновато кэширование браузера. Поэтому если картинка отсутствует, то попробуйте очистить кэш браузера (в настройках это должно быть). Также может помочь перезапуск браузера. Но ещё раз говорю: если Вы всё сделали правильно, то favicon на Вашем сайте появится.

Вот и всё, что хотелось рассказать об установке favicon на сайт.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

myrusakov.ru

Favicon называют специальную иконку, которую видно вверху страницы интернет-обозревателя при открытии того или иного сайта. Это очень удобно, когда по такой иконке пользователь сразу узнает сайт. Ее видно и в списке закладок, и при выдаче поисковой системой сайтов по запросу. Использование Favicon давно стало стандартом, а сайт без этой иконки сразу показывает, что его разработчики — не особо опытные специалисты. В общем и целом наличие этого элемента повышает доверие и узнаваемость проекта. Здесь мы разберем самый простой способ создания Favicon.


  1. Для начала необходимо сделать изображение, которое, собственно, и будет иконкой вашего сайта. Для этого нужно запустить приложение для работы с графикой (Paint.net, Photoshop, Gimp или любое другое). В нем вам нужно создать картинку размером 16×16. Правильнее всего использовать формат ico. Многие современные браузеры распознают фавикон и в других графических форматах, но во избежание конфликта версий лучше все же использовать родной для такого рода изображений формат.
  2. Некоторые простейшие графические редакторы не поддерживают работу с ico файлами. В таком случае вы можете создать изображение в любом другом формате, а затем использовать соответствующий веб-сервис для преобразования файла. Таких сервисов достаточно много и все они имеют простой интерфейс и не требуют особых навыков для конвертации. Также, при желании, некоторые из этих сервисов можно использовать для всех этапов разработки нужной вам иконки.
  3. Тут важно сказать пару слов о выборе изображения для Фавикон. Рекомендуем провести исследование среди сайтов, похожих на ваш по тематике или направлению деятельности. Это важно для того, чтоб, во-первых, не повторяться, а, во-вторых – нащупать идею для своей иконки. Изображение должно, в целом, отображать тематику, но при этом не дублировать по цвету и схеме подобные проекты. Также не стоит выбирать слишком мелкое изображение, которое не может быть понятно с первого взгляда.


    Варианты изображений для Фавикон
    Варианты изображений для Фавикон
  4. После того, как ваша иконка готова, остается залить ее на сервер с сайтом. Имя файла должно быть favicon.ico. Это поможет избежать путаницы при обработке браузерами. Лучше сразу поместить файл в корневую папку. Другой вариант – явно указать в коде сайта ссылку на место размещения файла. Теперь остается разместить следующую строчку (<link rel=»shortcut icon» type=»image/x-icon» href=»favicon.ico»>) в код сайта (в заголовок html документа).
  5. Для большинства популярных систем управления сайтами существуют специальные плагины по управлению иконками Favicon. Если вы используете одну из таких CMS, то попробуйте этот способ. Он сравнительно легче и позволяет быстро менять иконку без необходимости открывать исходные файлы сайта.

besthard.ru

Значки на вкладках браузера

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

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

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

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

Чтобы создать favicon.ico, вам необходимо просто сохранить PNG-файл размером 16х16 и преобразовать его в значок ресурса с png2ico. По собственному усмотрению, вы можете добавлять различные изображения в один и тот же значок, чтобы обеспечить альтернативные решения. Большинство браузеров используют только формат 16×16 для такого изображения, но в другом контексте (например, при перетаскивании URL из адресной строки на рабочий стол) большая иконка может быть отображена на рисунке. Если значок ресурса содержит только изображения 16х16, он будет масштабироваться до нужного размера, поэтому технически совершенно не нужно добавлять альтернативные решения. Однако это может повысить качество изображения. Перед тем, как установить фавикон на сайт, обязательно просмотрите, как выглядит картинка в разных размерах.


как установить фавикон на wordpress

Имейте в виду, что для пользователя с медленным интернет-соединением фавикон может увеличить время загрузки страницы на несколько секунд. Это возможно, если файл изображения слишком большой, поэтому не переусердствуйте. Добавление альтернативы формата 32х32 должно быть достаточно, чтобы картинка начала хорошо смотреться даже в ситуациях с крупными значками. Использование большего количества вариантов – это бонусы, выполняемые только по желанию разработчика сайта. Старайтесь поддерживать количество цветов до 16 и создавайте 16-цветную иконку с помощью png2ico (или даже черно-белый значок). Это позволит сохранить меньший файл, который загружается быстрее.

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


как установить фавикон в директе

Вы можете использовать логотип вашего бренда, символ тематики ресурса или любимое изображение, чтобы сделать ваш индивидуальный значок сайта. Рекомендуемый размер для фавикона — не менее 512 пикселей в ширину и в высоту. Изображение должно быть квадратным, но можно использовать большие прямоугольные картинки. Многие движки позволят вам обрезать картинку, когда вы будете добавлять ее (поэтому не стоит волноваться о том, как установить фавикон на SMF в виде большой картинки).

Создание иконки с помощью «Фотошопа»

Специалисты рекомендуют использовать программу для редактирования изображений, например, Adobe Photoshop или GIMP. Это позволит создать значок сайта ровно 512×512 пикселей. Таким образом, вы можете сохранить точные пропорции картинки, использовать прозрачные изображения или залить фон на ваш выбор. Эта картинка может быть в форматах PNG, JPEG или GIF. После этого нужно определить, как установить фавикон на сайт.

как установить фавикон на smf

Зачем нужно добавлять на сайт?


Как уже было отмечено, иконка favicon — это маленький значок, который появляется рядом с названием сайта в браузере. Он помогает пользователям идентифицировать ссылку, а более частые посетители вашего сайта будут моментально определять это маленькое изображение. Это повышает узнаваемость бренда и помогает завоевать доверие среди аудитории. Таким образом, фавикон определяет «личность» вашего сайта. Кроме того, он также улучшает юзабилити и пользовательский опыт сайта.

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

Чтобы добавить ваш новый фавикон на веб-страницу, следует установить его на сервер в ту же папку, где расположена веб-страница (например, www.example.com/foo/favicon.ico для www.example.com/foo/index.html). Это те данные, которые в первую очередь любой браузер будет искать для загрузки. Если он не найдет иконку, то проверит каталог верхнего уровня сервера (www.example.com/favicon.ico для www.example.com на сервере). По этой причине, если вы установите его там, сможете иметь значок по умолчанию для всех страниц вашего домена. В зависимости от браузера и конфигурации, фавикон не всегда отображается, даже если он находится в одном из вышеуказанных мест и веб-страница видит его.

как установить фавикон на сайт html

Для того, чтобы прописать в коде страницы наличие фавикона, можно добавить следующие 2 строки в разделе <Head>:

< link rel=»icon» href =»favicon.ico» type= «image/x-icon» >
< link rel=»shortcut icon» href =»favicon.ico» typ e=»image/x-icon» >

Как добавить фавикон на блог WordPress


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

Как добавить фавикон в WordPress

Начиная с версии WordPress 4.3 можно добавить favicon на сайт из области администратора. Просто перейдите в «Вид»/«Настройки» и выберите вкладку «Сайт».

Раздел идентификатора сайта в настройщике позволяет изменить название ресурса и описание. Перед выходом из меню обязательно появляется вопрос, действительно ли вы хотите отобразить новые данные в заголовке. Оно также позволяет вам загрузить ваш значок для сайта. Просто нажмите на кнопку «Выберите файл» и загрузите изображение, которое хотите использовать в качестве фавикона.

как установить фавикон на сайт joomla

Добавление фавикона на блог

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


После этого при просмотре сайта вы увидите ваш favicon в действии. Вы также можете зайти на сайт с мобильного устройства, а затем в меню браузера выбрать «Загрузить полную версию». Вы заметите, что иконка будет отображаться как на полноценном рабочем столе компьютера.

Как установить фавикон на WordPress старой версии (4.2 или ниже)

Загрузите свой фавикон в корневой каталог сайта по протоколу FTP. После этого можете просто вставить этот код в файл header.php нужной темы.

< link rel=»icon» href =»http://www.example. com/favicon.png» type= «image/x-icon» >

< link rel=»shortcut icon» href =»http://www.example. com/favicon.png» type= «image/x-icon» >

Замените wpbeginner.com на URL вашего сайта, и все будет сделано. Если блог не имеет файла header.php или вы не можете найти его, то используйте специальный плагин. Установите и активируйте его в настройках сайта. После активации плагина зайдите в «Настройки», найдите пункт «Вставка колонтитулов», перейдите к вкладке «Вставка кода», приведенного выше в разделе заголовка, и сохраните настройки.

Если не хотите разбираться с тонкостями работы с FTP, но при этом все же интересуетесь, как установить фавикон, также можете использовать специальный плагин, который регулирует загрузку иконки на всех этапах. Такие дополнения к движку доступны не только для WordPress, но и для других популярных систем, в том числе для Joomla.

fb.ru


Почему вам стоит добавить favicon на ваш сайт?

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

Посмотрите на изображение и сразу поймёте, как выглядят favicon сайтов в Google Chrome, например:
Как установить favicon на WordPress

Или вот пример из другого браузера — Vivaldi:

Пример Favicon сайтов

Каждый из этих сайтов имеет свою уникальную иконку и можно безо всяких проблем (зная, где чья) открыть нужный сайт, не перебирая каждую вкладку и не подводя мышкой к заголовку. Всё как на ладони — нужно лишь запомнить иконки часто используемых вами сайтов. Если вы активный пользователь интернет, то у вас скорее всего в каждом браузере открыто по 30-40 вкладок. Без иконок было бы очень тяжко… 🙂

Как создать favicon

В самом простом варианте — это иконка квадратного размера, в идеале 32х32 или 16х16 пикселей, которую без проблем можно сделать в Photoshop, либо любом другом графическом редакторе. Для простоты — создайте изображение размером 128х128 пикселей, а затем уменьшите масштаб до 32х32 или 16х16, качество не должно особо пострадать. Затем сохраните изображение в формат PNG.

Создаём фавикон с помощью онлайн-генератора LOGASTER

Создание фавикона онлайн не требует никаких дополнительных усилий или специальных навыков в дизайне. Среди русскоязычных хочу обратить ваше внимание на сервис Логастер.

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

Когда логотип готов, выберите функцию «Создать фавиконку с этим логотипом»:
Создание фавикон в сервисе ЛОГАСТЕР

Подберите иконку, которая вам понравится. В редакторе также видно, как она будет смотреться в уменьшенном варианте. Сохранённый фавикон можно скачать в PNG и ICO форматах разных размеров.
Сохранение фавикон в сервисе ЛОГАСТЕР

Рисуем иконку вручную

Если вы не владеете графическим редактором и не хотите обращаться к дизайнерам на биржах труда, тогда есть второй вариант — нарисовать иконку с помощью онлайн-сервиса. Есть несколько вариантов: favicon.cc, Faviconer, DynamicDrive. Там же можно выбрать из готовых вариантов, загруженных другими пользователями.

Вот так выглядит процесс создания иконки вручную в сервисе Favicon.cc:

Создаём favicon в сервисе favicon.cc

После этого надо будет сохранить иконку на ваш компьютер.

Установка favicon на WordPress

Есть несколько вариантов подключения иконки. Первый — самый простой и доступный практически всем с новой версией WordPress – воспользоваться инструментами нашего движка. Если настройки вашей темы имеют опцию для установки favicon — используйте её.

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

Многие некачественные бесплатные темы жёстко прописывают путь до иконки в код файла header.php. И если ни один из предложенных вариантов не срабатывает, то вам нужно открыть файл header.php в директории с вашей темой и удалить все упоминания в тексте со словом «favicon». Помогает — пробовал! 🙂

Способ 1: Используем возможности WordPress

По хорошему же, если у вас версия WordPress 4.3 и новее, то вам достаточно будет загрузить графический файл размером 512х512 пикселей и через интерфейс «Внешний вид» — «Настроить» перейти в раздел «Свойства сайта». После этого загрузить ваш файл через загрузчик WordPress и он автоматически масштабируется под все необходимые размеры.

Загружаем изображение для установки favicon

Способ 2: Использование настроек вашей темы

Во многих темах (премиумных или бесплатных) есть настройки, которые находятся в меню «Внешний вид» — «Настройки темы». В первую очередь я бы рекомендовал просмотреть все имеющиеся варианты настроек и отыскать то, что относится к favicon.

Вот так, например, выглядит эта опция в моей теме:
Как установить favicon на WordPress

Раскрываем этот блок и видим следующее:
Как установить favicon на WordPress

Теперь останется лишь загрузить изображение и сохранить настройки. Не перепечатывайте слепо адрес моей иконки с изображения выше — у вас будет свой адрес изображения и, скорее всего, он будет выглядеть так: http://адрес-вашего-сайта.ru/wp-content/uploads/2016/название-файла.png.

Это самый быстрый способ подключить favicon к вашему сайту!

Способ 3: Подключение в файл header.php

Загрузите созданную вами иконку на ваш хостинг, путём подключения на FTP, SSH, либо через файловый менеджер вашей хостинг-панели. Файл нужно разместить в корневой директории, чтобы он был доступен по адресу http://адрес-вашего-сайта.ru/favicon.ico, либо favicon.png, в зависимости от типа иконки.

Теперь зайдите на хостинге в директорию с вашей темой (/wp-content/themes/ваша_тема/) и откройте на редактирование файл header.php. После открывающего тега <head> вставьте следующий код:

<link rel="icon" href="http://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon" />  <link rel="shortcut icon" href="http://адрес-вашего-сайта.ru/favicon.ico" type="image/x-icon" />

, либо же измените разрешение на .png, если у вас иконка этого типа.

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

Способ 4: Плагин «Insert Headers and Footers»

Заходим в раздел «Плагины» — «Добавить новый», в поиске вбиваем Insert Headers and Footers, устанавливаем найденный плагин и активируем его.
Как установить favicon на WordPress

Если не можете найти, воспользуйтесь ссылкой на официальный репозиторий WordPress: Insert Headers and Footers. Сохраните его на компьютер и установите через ссылку «Загрузить», раздела «Плагины» — «Добавить новый».

После этого зайдите в пункт меню «Параметры» — «Insert Headers and Footers» и в области Header вставьте тот HTML код, который был приведён в пункте выше, для подключения favicon вручную.
Как установить favicon на WordPress

Не забудьте нажать кнопку «Save settings» для сохранения настроек.

Способ 5: Плагин «All In One Favicon»

Если и с предыдущим вариантом у вас ничего не получилось, тогда остаётся самый последний вариант — подключить плагин с названием All In One Favicon, устанавливается он абсолютно аналогично всем остальным плагинам, поэтому по шагам писать не буду. Нюанс в том, что данный плагин не обновлялся больше трёх лет.

После установки и активации плагина, заходите в раздел меню «Параметры» — «All in one Favicon» и видим следующий экран с настройками:

Интерфейс плагина All-in-One Favicon

Frontend Settings – это для отображения иконки при просмотре сайта со стороны посетителя; Backend Settings – это административная часть, её можно не заполнять. Осталось выбрать соответствующие иконки и нажать «Сохранить изменения».

Заключение

Если у вас не сработала установка иконки ни с одним из предложенных мною способов — напишите в комментарии, обсудим, как решить вашу мелкую проблему. Но, как лично мне кажется, этих вариантов более чем достаточно чтобы решить столь простую проблему. 😉

gruz0.ru

Как установить favicon на WordPress

При установке иконок для сайта возможны три варианта развития событий:

  1. из админки блога Вордпресс, используя настройки шаблона;
  2. обычная установка без плагина;
  3. с помощью плагина.

Вставляем фавикон на блог из админки

Это самый простой способ. Во многих премиум-шаблонах WordPress есть возможность устанавливать логотипы и иконки. Для этого идем в настройки темы, выбираем нужный файл на компьютере и жмем “Загрузить“. Сохраняем изменения и любуемся результатом. В моей теме можно загружать картинки в формате png или gif размером 16х16.

Установка favicon на сайт WordPress

Установка favicon на сайт без плагина

Допустим, что у нас уже есть готовый фавикон. Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате .ICO с размером 16×16 пикселей favicon.ico. Переименуйте, если у вас не так.

Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt). Как заливать файлы на хостинг с помощью FTP-клиента FileZilla, читаем здесь.

В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами <head> </head> надо прописать такой код:

или

В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href. Если картинка не в формате .ico, то укажите это в атрибуте type, заменив x-icon на нужный формат.

Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon“, остальные браузеры понимают “icon“, которое уже входит в это значение.

Как прописать код favicon для WordPress:

  • Идем в админку “Внешний вид” – “Редактор“.
  • Открываем файл header.php.
  • Вставляем код до закрывающего тега </head>.
  • Жмем “Обновить файл“.

Как прописать код favicon для блога WordPress

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

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

Если картинка расположена в другом месте, то делаем следующее:

  • Открываем в браузере код страницы сайта (Ctrl+U).
  • Ищем строку, где прописан адрес фавикона.
  • Заменяем файл по указанному адресу.

Почему не отображается favicon

Если favicon не отображается в браузере после установки или замены, надо:

  • перезапустить браузер;
  • обновить кеш;
  • проверить правильность пути к пиктограмме сайта.

В поисковой выдаче Яндекса favicon появится только после того, как сайт посетит специальный робот. После этого фавиконка преобразуется в формат PNG и добавляется на сервер Яндекса по адресу http://favicon.yandex.net/favicon/blogibiznes.ru. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.

Easy Favicons – Wordpress плагин для установки фавикона

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

Устанавливаем и активируем плагин (как установить плагин Вордпресс). Открываем в админке страницу с настройками.

Настройка плагина Easy Favicons

Как видно выше, есть возможность установить фавикон тремя способами:

  1. использовать свой Gravatar;
  2. указать путь к картинке;
  3. выбрать иконку для сайта из установленного набора.

После не хитрых настроек нажмите “Сохранить изменения” и Favicon будет установлен.

Вот и все дела. Теперь, надеюсь, понятно, как установить фавикон на сайт. Какой бы способ вы не выбрали, помните, что любой популярный сайт должен иметь свою узнаваемую иконку. Кроме того, ее можно периодически обновлять. Например, во время каких-то интересных событий или праздников. Представьте, если под Новый год человеку в поиске попадется ваш блог с картинкой Деда Мороза. Это может лишний раз привлечь внимание пользователя и заставить его выбрать именно ваш ресурс.

Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?

Понравилась статья? Нажимай на кнопки:

blogibiznes.ru

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • Квадратное изображение, которое вы хотите добавить, как favicon для вашего сайта
  • Доступ к файлам вашего сайта

Вариант 1 — Позволить браузеру автоматически добавить favicon (нет необходимости в изменении кода сайта)

Большинство браузеров автоматически находят файл favicon.ico в каталоге вашего сайта и устанавливают его в качестве favicon. Это самый легкий путь для добавления favicon.

  1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
  2. Этот вариант добавления favicon требует конвертации вашего изображения в формат .ico. В Интернете можно найти множество онлайн инструментов для этого, мы воспользуемся одним из самых популярных – convertico.com.
  3. После открытия сайта convertico.com, вы увидите кнопку для выбора и загрузки вашего изображения:

hostinger convertico

  1. Нажмите кнопку и выберите нужный вам файл. Сразу после выбора, ваше изображение будет автоматически конвертировано и станет доступно для загрузки в правой части сайта:

unnamed file 7

  1. Скачайте ваше изображение нажав на белую стрелку и сохраните ваш файл .ico на компьютере.
  2. Теперь переименуйте файл в favicon.ico, чтобы браузер мог распознать данный файл.
  3. Последним этапом станет загрузка изображения в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов, или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.

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

favicon 1

ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

Вариант 2 — Использовать обычную картинку и указать ее в коде сайта

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

  1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
  2. Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.
  3. Теперь вам необходимо определить изображение, которое будет использоваться в качестве favicon в коде вашего сайта. Добавьте эту строку между тегами <head></head> в код вашего сайта:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

ВАЖНО! Измените png на формат вашего изображения в type=”image/png”  и favicon.png на имя вашего изображения.

HTML код будет выглядеть примерно так:

add favicon5

Теперь ваше изображение должно отображаться в качестве favicon для вашего сайта.

как добавить favicon

ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

Заключение

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

www.hostinger.ru

Зачем нужен Favicon

Постараюсь объяснить все в виде чек-листа. Кстати, приготовил простенькую инфографику на этот счет.

«>

  • Продвижение и узнаваемость бренда.

Не секрет, что задачей любого сайта является продвижение своего бренда (имени) в некой мере. Если мы берем во внимание личный блог, то данный момент является чуть ли не самым главным, так как мы формируем себя, как личность и доносим свое мнение в определенные массы.

За продвижение бренда отвечает отображение фавикона в выдаче Яндекс. Чем больше видят ваш фавикон, тем больше на него будут кликать, так как это свидетельствует, что ваша информация ценная и, вероятнее всего, она пользуется спросом.

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

Данные 2 фактора из первого пункта взаимосвязаны. Без одного не будет второго.

  • Увеличение количества кликов из выдачи, а соответственно и прирост трафика.

Каким боком связан Favicon с количеством переходов на ваш сайт? Дело в том, что очень важным моментом при предварительной оценке вашего сайта посетителем, является анализ внешнего вида вашего сниппета в выдаче поисковой системы. Только использованием фивикона вы уже увеличиваете один из важнейших поведенческих факторов — CTR (кликабельность) в выдаче.

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

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

  • Увеличение конверсии сайта.

Каждый сайт должен иметь свою конверсию вне зависимости от его типа. Блог, интернет-магазин, одностраничный сайт, страница подписки, контентный сайт — не важно. У каждого ресурса есть своя задача, эффективность которой измеряется конверсией.

В конверсии важна каждая мелочь. Даже расположение слов и их длина. Фавикон — не исключение. Чем он качественней и более лучше описывает вид деятельности сайта или компании, тем больший процент он придает общей конверсии.

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

Эти 3 причины я бы выделил в качестве основных. Может вы еще что-то добавите в комментариях. Будет интересно узнать больше.

Ну, а теперь пришло время приступить к самому процессу создания и установки данной иконки. Начнем с создания.

Как создать Favicon

Сейчас мы поговорим о создании фавикона с точки зрения 2х моментов:

  1. Создание самого дизайна и оформления;
  2. Создание самой иконки.

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

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

Поэтому, если вы не обладаете хорошей фантазией и хорошими навыками фотошопа, как минимум, то вариантов в данном случае 2:

  1. Много париться и сделать самому;
  2. Обратиться к профессионалам.

Первый вариант я не очень буду рекомендовать, так как займет он очень много времени и не факт, что все получится на хорошем уровне. Заметьте, я даже не говорю «наивысшем».

Человек, имеющий опыт в создании дизайнов запросто вам его сделает, но не бесплатно ясень пень. Зато качество будет радовать всех и вся. Поэтому, я и рекомендую 2й вариант.

Если же все таки вы человек-самоучка, то вот вам несколько советов, о которых стоит помнить при создании иконки:

  • Не копируйте никого — будет хуже только вам, а конкуренту будет плюс, так как вы его в некой мере пропиарите;
  • Иконка должна быть простая, чтобы во вкладке было четко понятно, что там нарисовано. Поэтому, чем меньше в ней элементов, тем лучше. Многие делают ее из своей фотографии, которую абсолютно не видно в таком размере. Не повторяйте данной ошибки;
  • Favicon должен давать понятие области вашей деятельности или же брендировать ваше имя. Если область деятельности, то постарайтесь что-то придумать интересное. Например, если сайт о заработке, то логично сделать иконку в видео каких-то монет или купюр. Но таких умников уже пруд пруди, поэтому нужно обыгрывать все по-своему. Почему я выше и писал, что необходима фантазия и умение ее воссоздать в дизайне. Если же это личный блог, то очень распространенный вариант — обыграть первую букву своего имени или фамилии. Я так и сделал. Это самый простой путь.

Теперь можно перейти и к процессу создания самой иконки с технической точки зрения.

Создаем иконку

Так как Favicon — иконка, то и расширение у нее должно быть соответствующее  — ico. Чтобы сделать такое расширение, мы будем пользоваться сервисом. Можно конечно сделать это и какими-то программами, но я сталкивался с проблемой, что такие иконки некорректно отображаются на выходе. С сервисом же все ок.

Также нам потребуется изображение маленького размера (32х32 или 16х16 пикселей) с нашей иконкой. Именно в таком размере и отображается фавикон. Во вкладке браузера он имеет размер 16х16 пикселей.

Будем считать, что изображение вы создали. Можно двигаться далее. Переходим на сервис (кликните сюда) и оказываемся на странице, где можем выбрать наш файл изображения любого из 2х размеров выше.

«>

Когда выбрали иконку, мы можем нажать на кнопку «Create icon», после чего сервис автоматически преобразует наше изображение в иконку нужного формата (ico) и придаст ей размер 16х16 пикселей.

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

«>

После скачивания иконки она будет в месте сохранения файла с нужным расширением и форматом. Можете в этом удостовериться.

«>

Можно идти дальше и сделать так, чтобы иконка отображалась на сайте.

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

Процесс установки состоит из 2х этапов:

  1. Загрузка иконки на сайт;
  2. Подключение вывода иконки на всех страницах.

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

Начнем с первого варианта. Загрузить иконку на сайт можно в любое место, где вам будет угодно. Но самые часто используемые варианты — в корень сайта и в папку с темой.

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

Покажу так, как сделал я. Для загрузки файлов на сайт и использую ftp клиент FileZilla (тут подробная инструкция). Фавикон в моем случае лежит в папке с моей темой оформления, то есть в папке шаблона, где лежат все его файлы и папки (см. ниже).

«>

Как видим, имеются все файлы и папки шаблона и среди них находится иконка.

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

Берем следующий код. В нем лишь подставьте имя своего домена и название темы.

Идем в файл header.php и копируем в вышесказанное место эту строчку с вашими данными. В моем случае получилась следующая ситуация.

«>

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

Иконка во вкладке браузера отображается сразу после проделанных действий. А вот в выдаче она появляется не сразу, так как Яндекс должен проиндексировать сайт заново, увидеть изменения в коде, после чего он подгрузит иконку. На это может потребоваться некоторое время. Все зависит от того, насколько часто робот Яндекса посещает сайт.

Как вы увидели, процесс установки Favicon настолько простой, что его сделает даже младенец. Тем более, что по традиции прилагаю видео-урок.

После этого все в ваших головах должно стать на свои места.

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

На этом все. До связи

С уважением, Константин Хмелев.

Как добавить фавикон

kostyakhmelev.ru

Зачем нужен favicon?

Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).

Однако в действительности роль этой картинки состоит не только в украшении браузера. Дело в том, что эти картинки выводятся в поисковой выдаче Яндекса (если иконка не задана — показывается пустое место). Представьте ситуацию, что Яндекс предложит пользователю на его запрос два примерно одинаковых сайта, но к одному из них будет дополнительно проставлена иконка — на какой сайт более вероятно перейдет пользователь? Конечно, в первую очередь он перейдет на сайт, предложенный первым по списку, но как раз именно наличие картинки, которая всегда более приятна пользователю, чем текст, может привлечь посетителя именно на ваш сайт.

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

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

Про то, как сделать иконку ico, у нас есть отдельная статья (ссылка), потому перейдем сразу к рассмотрению вопроса о том, каким должен быть фавикон.

Каким должен быть файл с иконкой и где он должен находиться?

Исторически сложилось, что для сайтов используется формат .ico. Особенность этого формата состоит в том, что внутри одного .ico-файла может храниться несколько картинок размером от 16х16 до 64х64 (размер должен быть кратным восьми). Правда, для веб-сайтов в действительности используется только формат 16х16 — ни Яндекс, ни браузер не будут показывать другой размер иконки.

Соответствующий Файл в формате .ico можно создать с помощью графического редактора или множества доступных в сети онлайн-сервисов. Важно, чтобы данный файл имел название favicon.ico.

Теоретически, сохранить файл можно в любой папке с файлами сайта, но крайне рекомендуется сохранять его именно в корневой директории вашего ресурса — чтобы он всегда был доступен по адресу vash-site.ru/favicon.ico, так как по умолчанию именно там его ищут поисковики и браузеры.

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

Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами <head></head< вашего сайта.

Для добавления favicon html код является следующим:

  <link rel="icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />  <link rel="shortcut icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />  

После того, как добавите этот код на страницы своей странички, обновите кэш своего браузера (его нужно полностью стереть), и, если все сделано правильно и файл с картинкой загружен на сайт, то картинка начнет отображаться в браузере.

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

www.runcms.org


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.