Фавикон

Что такое «фавикон» и зачем он нужен

Немного истории. Само слово «favicon» исходит из сочетания двух английских слов: «favorite» и «icon». В дословном переводе – «избранная картинка». Сейчас более известен, как «значок интернет-сайта». Изначально подразумевал свое отображение только на различных страницах-вкладках или в закладках интернет-браузера, имел стандартный размер 16х16 пикселей и расширение «.ico». Впервые «фавикон» заявил о себе в марте 1999 года, когда набирающая стремительно обороты компания «Microsoft» выпустила на мировой рынок новый и современный по тем меркам браузер «Internet Explorer 5.0». Именно с этих пор данное мини-изображение стало применяться априори и приобрело значение того элемента, без которого можно считать SEO-оптимизацию не завершенной.

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

Для большей наглядности и понятия представим скриншот.

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

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

Типовая установка фавикон на сайт предполагает два основных действия:

1. Загрузку необходимого файла или файлов на сервер (в папку с сайтом на хостинге).

Добавление специального тега в файлы шаблона или в структуру HTML.

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

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

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

Если вам нужна поддержка только браузеров, то достаточно загрузить изображение favicon и прописать следующий тег (внутри тега head):

<link rel=»icon» href=»https://vash-sait.com/favicon.ico» type=»image/x-icon»>

Пояснения по параметрам:

• если нужна поддержка старых версий Internet Explorer, вместо параметра «icon» нужно указать «shortcut icon»;
• если ваш домен использует кириллицу, его нужно предварительно конвертировать в Punycode;
• параметр «type» отвечает за передачу формата файла. Поэтому, если ваша иконка будет отличаться от формата ICO, нужно его поменять на соответствующий: image/png – для формата PNG, image/svg+xml – для формата SVG, image/jpeg, image/bmp или image/gif.

Почему фавикон нужен каждому сайту

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

Наш инструмент «Анализ сайта», который проводит полный техосмотр вашего ресурса, в том числе проверяет и наличие фавикона. Вы можете проанализировать свой сайт, просто зарегистрировав аккаунт в SE Ranking.

Если фавикон есть, а аудит его не видит — значит, проблема с индексацией или адресом иконки. Проверьте все еще раз. 

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

Хороший фавикон — неотъемлемая часть бренда и технический стандарт каждого сайта, и точно стоит потраченного на него времени.   

Просмотры:
35 217

Юлия Торчинская

Юлия — контент-маркетолог c 10-летним опытом работы в журналистике, копирайтинге, рекламе и PR.

Своим опытом и знаниями она делится, создавая полезные статьи про SEO и диджитал-маркетинг для блога SE Ranking и популярных медиа.

Когда Юлия не пишет статьи, она осваивает новые асаны, путешествует и помогает волонтерской организации YWCA.

Как поставить Favicon самостоятельно

Стандартно поисковая система Яндекс и другие сервисы будут искать вашу фавиконку в корне сайта по адресу site.ru/favicon.ico. Поэтому наша задача закачать туда наш значок или указать иной путь его размещения.

Через тему сайта WordPress

Начиная с версии WordPress 4.3, можно добавить фавикон из админки WordPress.

Придерживайтесь вот такой последовательности:

1. Откройте админку
2. Внешний вид > Настроить > Свойства сайта
3. Значок сайта > Изменить изображение
4. Загрузите фавикон
5. Нажмите кнопку Опубликовать.

Как добавить фавикон на сайт WordPress вручную

Советуем сначала протестировать все на локальном сайте разработки.

1. Заходим в файлы темы FTP-клиент или файловый менеджер.
2. Находим папку /wp-content/themes/your-theme.
3. Загружаем иконку в подпапку, например, Assets.
4. Запоминаем путь к файлу.

В файте function.php и прописываем путь до фавикона.

Строка после href=«‘.get_template_directory_uri() должна указывать путь к вашему значку. Убедитесь, что вы указали правильное имя файла. Если вы используете формат файла .ico, то это будет один:

Лучше предварительно сохранить этот файл на компьютере, на случай, если вы неправильно измените исходный код. Открываем HTML-код и ищем строки, которые располагаются между тегами head. В этом месте нужно вставить строку:

Рассмотрим значения:

rel

Если мы указываем значение «icon», то изображение будет хорошо отображаться во всех современных браузерах. Если указать вместо этого «shortcut icon», то значок будет виден только в Internet Explorer.

href

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

type

Здесь нужно прописать формат файла.

Как задать фавиконы для разных устройств?

Пропишите ссылки на иконки между тегами head. Например:

Apple

Иконки в устройствах Apple закругляются по углам. Поэтому лучше использовать apple-touch-icon-precomposed вместо apple-touch-icon.

Андроид

Можно загрузить иконку в нескольких размерах: 16×16, 32×32 и 48×48. Вот пример для декстопа:

Создание favicon.ico

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

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

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

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

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

Adobe Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

Загружаем иконки на сайт

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

Корневая папка сайта может называться public_html, www, html или site. Если такой не найдете, уточните у своего провайдера. Загрузите все полученные на предыдущем шаге файлы в корневую папку.

Редактируем код

Теперь нужно открыть код главной страницы сайта. Там же, в файловой системе сайта, найдите файл под названием head или header. Откройте его и вставьте полученный ранее код в элемент <head>. Выглядеть это будет примерно так:

<head>

…

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

…

</head>

Остается подождать, пока поисковики проиндексируют появивишиеся фавиконки для сайта.

Favicon.io

Вероятно, самый простой метод из когда-либо созданных, Favicon.io позволяет вам создавать или преобразовывать любое изображение в favicon. Вы можете совершенно бесплатно использовать этот инструмент, и поместить созданный вами значок в любое место. Для экспорта вы получите форматы PNG и ICO.

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

Второй из изображения или логотипа. Все, что вам нужно сделать, это загрузить желаемое изображение / логотип, и этот инструмент превратит его в соответствующий размер и формат.

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

Сервисы для генерации и проверки favicon

Digitalagencyrankings.com

Первый сервис http://digitalagencyrankings.com/iconogen/, очень простой в использовании. Для того чтобы вручную не делать favicon разных размеров, вы загружаете в этот сервис свою иконку в jpg, png или gif. Сервис создает её в разных размерах.
Сразу видно, как они будут выглядеть.
Есть возможность скачать все иконки в одном архиве.
Сервис сразу генерирует код для вставки на сайт:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />

Realfavicongenerator.net

Второй сервис https://realfavicongenerator.net, имеет более расширенные настройки и проверку иконок на валидность.

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

Проверка иконок

После установки иконок на сайт, вы можете их проверить валидатором https://realfavicongenerator.net/favicon_checker

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

Размер иконки

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

Рекомендация Яндекса по размеру и формату favicon

В свою очередь Google рекомендует иконки кратные 48 пикселям – 48х48, 96х96, 144х144. Однако это касается десктопных браузеров. У телефонов плотность пикселей гораздо выше, да и количество иконок там помещается меньше, даже при аналогичном разрешении с монитором. Поэтому слишком маленькая иконка может выглядеть размытой, при масштабировании. Для современных смартфонов на Android рекомендуют 192х192, для iPhone – 180×180.

Favicon для Android

• 36×36 – для экранов с коэффициентом плотности 0.75
• 48×48 – для экранов с коэффициентом плотности 1
• 72×72 – для экранов с коэффициентом плотности 1.5
• 96×96 – для экранов с коэффициентом плотности 2
• 144×144 – для экранов с коэффициентом плотности 3
• 192×192 – для экранов с коэффициентом плотности 4

Favicon для Apple

• 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
• 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
• 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
• 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
• 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
• 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
• 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
• 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
• 180×180 – для iPhone 6 Plus c iOS версии 8.0

В итоге получается, что мельчить большого смысла нет, и стоит использовать размер не менее 120 пикселей. Начиная с версии HTML 5 можно указывать несколько размеров иконок в коде, поэтому имеет смысл сделать несколько фавиконов. В зависимости от платформы и разрешения пользователя, ему будет показываться наиболее подходящий из размеров. Как это правильно прописывать, поговорим чуть ниже в этой статье.

Для того чтобы создать сам favicon, есть два основных способа. Первый – ручная отрисовка иконки на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – скачать и использовать уже готовые иконки. Рассмотрим оба варианта по порядку.

Обзор онлайн-генераторов, где найти коллекцию фавиконов

Favicon generator — сервисы, где можно сотворить «мини-логотип» для сайта или преобразовать подходящую картинку в нужный формат.

Удобный сервис, в котором можно сделать эксклюзивную иконку — нарисовать ее с нуля попиксельно. Для этого переходим на сервис и в меню слева нажимаем кнопку «Create New Favicon».

В центральной части окна находится область, в которой каждый квадратик — это пиксель будущего фавикона. Следует закрасить эти квадратики в разные цвета. Чтобы это проделать, нужно обратиться к блоку «Color Picker», который расположен в правой части сервиса. Здесь необходимо выбрать из предоставленной палитры необходимый цвет и щелкнуть по определенной области, где находится пиксельная сетка. Чтобы удалить неправильную закраску, достаточно поставить галочку возле чекбокса «transparent» и щелкнуть по квадрату, после чего он станет прозрачным.

Чтобы переместить рисунок по холсту сервиса, ставится галочка возле чекбокса «move». Для того чтобы посмотреть что получилось предусмотрен блок «Preview», который находится под пиксельной сеткой. Для скачивания готового фавикона на компьютер нужно нажать кнопку «Download Favicon».

Если вы не Пабло Пикассо и нарисовать с нуля для вас равносильно прыжку из парашюта, загрузите на сервер для будущего фавикона картинку любого формата и размера, она будет, как болванка. Чтобы загрузить изображение на генератор, нажимается кнопка «Import Image» в левом меню.

На открывшейся странице нужно кликнуть кнопку «Выбрать файл», найти на компьютере подходящую картинку. При загрузке прямоугольной картинки можно отформатировать ее в квадрат (16х16). Для этих целей предусмотрена вкладка «Shrink to square icon». Учтите, в таком случае изображение будет искажено по одной из осей.

Чтобы соотношение сторон остались прежними, поставьте точку в чекбоксе «Keep dimensions».

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

Этот онлайн генератор еще и предоставляет коллекцию фавиконов, которые создавались другими пользователями этого сервиса ранее. Они выложены в общем доступе. Чтобы посмотреть галерею нужно в левом меню нажать кнопку «Latest Favicons» — экспонаты, отсортированные по дате или кнопку «Top Rated Favicons» — по рейтингу.

Чтобы скачать понравившийся экземпляр кликните левой кнопкой мыши по его названию и на открывшейся странице выберите «Download Favicon».

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

Для создания фавикона необходимо ввести название компании или сайта и нажать кнопку «Далее».

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

Имейте в виду, чтобы сохранить фавикон вам придется создать на сервисе аккаунт.

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

Последовательность действий следующая: выбираем файл и нажимаем кнопку «Create Favicon».

Сервис, предоставляющий возможность создавать фавикон с надписью. Цветовая гамма настраивается в области «Colors», а текст надписи вводится в полях «Top text» и «Bottom tex».

Для скачивания готового значка следует кликнуть по миниатюрной надписи «save as favicon file».

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

Для создания фавикона выбираем файл и нажимаем «Upload Now».

Также в сети можно найти и другие генераторы, которые позволяют создать фавиконы с нуля или же доработать уже имеющееся изображение. В частности FavIcon from Pics, DeGraeve, Generator, Онлайн редактор иконок favicon.ico, Online Favicon, Free Favicon Generator и Фавикон-генератор. Стоит отметить, что все они бесплатные.

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

• Галерея иконок для сайта favicon.ico;
• Iconj;
• Favicon.cc;
• The Favicon Gallery.

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

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

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

Сайтов, которые предоставляют такую возможность бесплатно, достаточно много. В некоторых сервисах можно даже скачать иконки в векторном формате для последующего редактирования в Adobe Illustrator или аналогичных редакторах. Я не буду перечислять все, приведу только несколько ресурсов, где можно их скачать в PNG или SVG-форматах, которыми пользуюсь сам.

• IconFinder.com
• FlatIcon.com
• FreePik.com

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

Преимущества использования фавикона

Вот основные преимущества использования значка на вашем сайте:

Достоверность

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

Отзыв бренда

Фавиконы после названия веб-сайта – это следующее, что посетители часто связывают с бизнесом. Причина в том, что оба они появляются в браузере, когда кто-то посещает ваш сайт. С учетом сказанного, фавикон играет более важную роль, чем название веб-сайта с точки зрения брендинга. Графика более запоминающаяся и узнаваемая, чем текст.

Повторные посещения

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

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

Формат фавикона

В самом начале, иконка имела расширение ICO, но сегодня этим дело не ограничивается. Ее можно встретить в таких форматах как GIF, JPEG, PNG и SVG. Большинство форматов поддерживаются всеми современными интернет-браузерами. Вот небольшая сравнительная таблица, для наглядности:

Браузер	ICO	PNG	GIF	JPG	SVG
Chrome	Да	Да	Да	Да	Да
Firefox	Да	Да	Да	Да	Да
Opera	Да	Да	Да	Да	Да
Edge	Да	Да	Да	Нет	Да
IE	Да	Да	Да	Нет	Нет
Safari	Да	Да	Да	Да	Да

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

Раньше фавикон можно было делать в BMP-формате, но на сегодняшний день он уже устарел и практически нигде не используется. Наверное, самые распространенные варианты – это ICO, PNG и GIF, так как поддерживают прозрачность. Хотя формат ICO тоже потихонечку устаревает. Как, впрочем, и GIF (по крайней мере для иконок). Рекомендую использовать PNG-формат, как наиболее универсальный и поддерживаемый. Некоторые умельцы делают себе анимированную GIF иконку, но анимация поддерживается только в Firefox, поэтому это практически бессмысленно.

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

Правильный Favicon – какой он

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

Иконка должна легко восприниматься

Не стоит рисовать на ней полную картину: достаточно 1-2 схематичных изображения.
Она должна быть заметной, привлекающей внимание. Картинка не должна теряться на белом фоне поисковой выдачи и должна бросаться в глаза.
Фавиконка должна быть запоминающейся, поэтому используйте простые образы, но не похожие на другие

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

Что такое фавикон и зачем он нужен

Примерами фавиконов для веб-ресурсов могут служить логотипы автомобильных брендов, размещаемые на капоте авто: у Шевроле – галстук-бабочка, у Шкоды – индеец со стрелой, у Ауди – четыре кольца, у Фольца – сплетение букв V и W и т.д.

Favicon отображается в поисковой выдаче Яндекса, на странице закладок и привязывается к веб-ресурсу при выборе, если пользователь добавляет веб-страницу в «Избранное».

Пользователи сети активнее реагируют на картинку, чем на текст

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

Как сделать Favicon

Фавикон – обычный графический файл. Сделать его можно несколькими способами.

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

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

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

<link rel=»icon» type=»image/тип файла» href=»путь от корня к фавикон» />

Для IE указываем shortcut icon (с конкретным примером для иконки PNG):

<link rel=»shortcut icon» type=»image/png» href=»/assets/img/icon.png» />

При этом можно указать 2 разных изображения: одно для IE, другое — для остальных веб-браузеров.

Не забывайте про отображение фавикона для мобильных устройств. В<head>следует указать <link rel=»apple-touch-icon» и т.д.> , при этом изображение должно иметь размер 60х60 или 120х120.

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

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

Как подключить favicon

Фавиконка подключается при помощи метатега  c указанием соответствующих атрибутов.

После создания favicon сохраните его в корневом каталоге вашего сайта. Затем включите следующий код в секции документа HTML.

где:

• Аттрибут означает, что это иконка для сайта; может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам — на слово «icon»)
• содержит абсолютный или относительный URL к файлу, где он размещен.
• Форматом файла может быть  или , размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета.

В некоторых темах подключение происходит программно, с помощью php-кода:

Фавикон: что следует запомнить

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

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

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

Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!