Создать Favicon

Генератор Favicon — это бесплатный онлайн сервис, который поваляет создавать иконки и значки (файл favicon.ico) для вашего сайта. Данный инструмент позволяет создавать Favicon всех популярных размеров, таких как: 16х16, 32х32, 48х48, 64х64, 128х128. Выберите размер и изображение (JPG, GIF, PNG), которое вы хотите конвертировать в формат ICO с вашего компьютера и нажмите Создать.

Создать фавикон

Для создания favicon необходимо:

1. Выберите размер вашего фавикона
2. Выберите файл и нажмите Создать Favicon
3. Сохраните полученный Favicon на свой компьютер

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

1. После создания Favicon через наш инструмент, скачайте его на ваш компьютер.
2. Загрузите фавикон в корневую директорию вашего сайта, чтобы он был доступен по адресу https://yoursite.com/favicon.ico
3. Скопируйте код ниже и вставьте в ваш HTML внутри тегов HEAD
   • rel — тип ресурса: icon или icon shortcut
   • href — адрес файла
   • type — тип передаваемых данных. Зависит от формата файла.
     • image/x-icon — для формата ICO;
     • image/gif — для формата GIF;
     • image/jpeg — для формата JPEG;
     • image/png — для формата PNG;
     • image/bmp — для формата BMP.

Примечание. Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение. Например, указаны 2 разные иконки, чтобы соответствовать разным поисковым системам.

Требования Яндекса к фавиконке

Примечание: Для отображения в результатах поиска Яндекс загружает фавиконку с HTTPS-версии сайта, если она доступна. Если нет — фавиконка не отображается.

• Размер: 16×16, 32×32, 120×120 пикселей.
• Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

Требования Google к фавиконке

• Размер: значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например: 16×16, 48×48, 96×96, 144×144 пикселей
• Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
• Убедитесь, что значок сайта хорошо выглядит при разрешении 16×16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
• Значок сайта должен служить графическим представлением вашего бренда. Это поможет пользователям быстро узнать ваш сайт при ознакомлении с результатами поиска.

Отображение фавиконки

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

Как настроить корректное отображение favicon сайта на различных устройствах

Favicon (favorite icon) — маленький значок (обычно логотип или часть логотипа), который отображается во вкладке браузера рядом с заголовком (title) страницы. На сегодняшний день у этой иконки существует еще множество предназначений. В этой статье мы рассмотрим основные из них. А также пройдемся по основным форматам и типам favicon.

Для чего нужен Favicon?

1. Иконка на вкладке браузера

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

2. Иконка в закладках браузера

Если сохранить страницу сайта в закладках браузера, то рядом с названием сохраняемой закладки будет также отображаться и иконка favicon. Также этот значок будет отображаться в настройках браузера в разделах «Закладки» и «История».

3. Иконка в поисковой выдаче

Поисковые системы Яндекс и Google выводят favicon слева от ссылки на страницу сайта. Это важный фактор, т.к. на сайты, имеющие favicon, кликают чаще, чем на сайты без favicon.

4. Иконка на рабочем столе компьютера

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

5. Иконка в рейтингах и на стартовых страницах

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

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

Какой должен быть формат файла Favicon?

Изначально, придуманный компанией Майкрасофт формат .ico был стандартом и использовался как в ранних версиях Internet Explorer. Его также поддерживали и считали стандартом и другие браузеры.

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

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

Какой должен быть размер Favicon?

Исторически сложились три стандартных формата favicon: 16×16, 32×32, 48×48. Однако в последние годы веб-платформы развились очень разносторонне, и на сегодняшний день включают в себя смартфоны, планшеты, телевизоры. На всех этих устройствах используются различные браузеры для доступа в интернет. Исходя из этого начали появляться и другие форматы favicon, такие как 96×96, 128×128, 196×196 и некоторые другие.

Очень сильно повлияло на стандарты размеров favicon появление первых iPhone и знаменитых retina-экранов от Apple с удвоенной плотностью пикселей, диктующих свои размеры изображений для favicon.

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

Для устройств Apple

• 57×57 — iPhone (iOS 6 и ниже, экран Classic)
• 60×60 — iPhone (iOS 7, экран Classic)
• 72×72 — iPad (iOS 6 и ниже, экран Classic)
• 76×76 — iPad (iOS 7, экран Classic)
• 114×114 — iPhone (iOS 6 и ниже, экран Retina)
• 120×120 — iPhone (iOS 7, экран Retina)
• 144×144 — iPad (iOS 6 и ниже, экран Retina)
• 152×152 — iPad (iOS 7, экран Retina)
• 180×180 — iPhone (iOS 8 и выше, экран 6 Plus)

Для устройств на Windows

• 70×70 — закладки в Edge и плитка в Пуск (размер: Мелкий)
• 150×150 — плитка в Пуск (размер: Средний)
• 310×150 — плитка в Пуск (размер: Широкий)
• 310×310 — плитка в Пуск (размер: Крупный)

Остальные случаи

• 16×16 — для закладок браузеров
• 32×32 — для закладок на панели задач
• 96×96 — для ярлыков на рабочем столе

Например, на нашем сайте qmedia.by это выглядит следующим образом:

Сделать стандартный значок favicon.ico для сайта онлайн

Обработка JPEG фотографий онлайн.

Главное нужно указать файл картинки на вашем компьютере или телефоне, нажать кнопку ОК. Остальные настройки выставлены по умолчанию.

Примеры со значком этого сайта с изменённым тоном цвета в настройках «цветовой коррекции»:

Если в Фотошопе была сделана картинка с прозрачным фоном и нужно, чтобы после её преобразования иконка для сайта тоже была с прозрачностью, то для этого следует сохранить её в формате PNG24 с поддержкой прозрачности (на англ. прозрачность — transparency) используя, например, функцию в Фотошопе «Сохранить для веб…» (Save for web), после этого нужно указать эту картинку в формате .png на этом сайте для её преобразования в значок favicon.ico.

Для отображения значка favicon на своём сайте его необходимо загрузить в корневой каталог сайта и указать в html коде между тегами <head>…</head> так: <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»> где favicon.ico — это название созданного значка.

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

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

1) Укажите изображение в формате JPEG, BMP, PNG: 2) Настройки генерируемого значка favicon.ico

Размер favicon.ico для сайта: 16×16 (стандарт)32x3248x4864x64

(Стандартный размер favicon для сайта 16×16, а вот, например, favicon.ico на сайте wikipedia имеет размер 48×48 пикселей.)

3) Цветовая коррекция favicon.ico (по умолчанию всё отключено)

Повысить резкость: (0-10)
Насыщенность: (от -100 до 100)
Тон цвета: (0-180, 100=не изменять)
Яркость: (от -100 до 100)
Контрастность: (от -100 до 100)

Favicon: размер. Создание favicon. Favicon-генератор

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

Что такое favicon для сайта?

Он представляет собой небольшую картинку, которая будет отображаться во вкладке браузера. Размер favicon составляет 16×16 пикселей. Также эта картинка отображается в результатах выдачи поисковых систем, и если favicon на сайте будет отсутствовать, то рядом с сайтом в выдаче будет пусто. Стоит отметить, что фавикон помогает пользователю отыскать конкретно ваш сайт среди сотни других, поэтому его присутствие на сайте хоть и не является обязательным, но строго рекомендовано. И да, размер favicon не обязательно должен быть 16×16. Некоторые вебмастера делают фавикон размером 32×32 и даже 64×64. Но в своих рекомендациях поисковые системы Google и «Яндекс» пишут, что идеальный размер favicon — 16×16. Поэтому лучше следовать этим советам поисковых систем.

Как создать favicon?

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

Допустим, вы создали блог по бытовой технике и полностью настроили его, но остался последний штрих — фавикон. Пишите в поиске Google запрос appliances и смотрите первые 10 сайтов. Фавиконы этих сайтов идеально подойдут вашему новому блогу. Если какая-нибудь картинка вам понравилась, открывайте исходный код страницы и ищите запись favicon.ico. Там будет указан адрес расположениях фавикона. Откройте его и скачайте на компьютер, затем загрузите на сайт и подключите (о подключении ниже).

Второй способ создания favicon размером 16×16 пикселей — использовать специальный сервис генерации фавиконов. Он работает по следующему принципу: вы загружаете изображение (любого размера и расширения), которое подходит для титульной иконки сайта, и нажимаете на кнопку на кнопку Create Favicon. Через секунду получаете готовый фавикон, который можно скачать, загрузить на свой сайт и подключить. Самый популярный сервис — Favicon Generator.

Отметим, что данный сервис лишь немного упрощает процесс создания иконок. То же самое можно сделать и самому. Просто найдите картинку, которая вам подходит, измените ее размер до 16×16 пикселей и сохраните с расширением ico. Все это проделывается в течение одной минуты в программе Paint.

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

Подключение

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

Чаще всего этих действий достаточно для отображения фавиконов. Поисковые системы (например, «Яндекс») автоматически распознают наличие фавикона в корневом каталоге и используют его в своей выдаче. Однако с «Яндексом» иногда бывают недоразумения. Многие вебмастера жалуются, что фавиконки пропадают из индекса, а затем появляются заново. Чтобы этого не происходило, нужно подключить его.

Для подключения favicon «Яндекс» рекомендует использовать метатег <link> с указанием конкретных атрибутов. Этот тег нужно поместить в раздел сайта <head>.

Весь код подключения должен иметь следующий вид:

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

Этот код работает для поисковых систем и всех браузеров. Могут быть проблемы с отображением в браузере Internet Explorer, но во всех остальных браузерах отображение будет точным.

Обратите внимание на адрес расположения изображения /favicon.ico. Его можно сделать таким: /favicon.gif. Тогда необходимо в корень сайта поместить изображение с расширением .gif, иначе отображаться фавикон не будет. Как известно, картинки в формате .gif могут представлять собой слайдеры. Этим пользуются вебмастеры и делают при этом анимированные фавиконы для своих сайтов. Выглядит это интересно, но не более того.

Фавикон как инструмент продвижения сайта

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

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

Как поисковик «Яндекс» понимает фавиконки?

У поисковой системы есть специальный робот, который отвечает за обновление именно фавиконов. Этот робот по определенному расписанию посещает сайты, запрашивая главную страницу и ищет в коде путь с указанием расположения favicon.ico. Если этот путь он не находит, то пытается загрузить иконку с родительского каталога, поэтому чаще всего достаточно просто файл с названием favicon.ico поместить в родительский каталог. Затем полученная иконка загружается на сервер «Яндекса» и отображается в поиске. Если ее размер будет больше, то он предварительно преобразуется в 16х16, а расширение меняется на png. Робот периодически перепроверяет сайты на предмет изменения фавиконки. Обычно он посещает обновляемые сайты один раз в месяц. Это и видно экспериментальным путем: измените фавикон своего сайта, и приблизительно через месяц он появится в индексах поисковика «Яндекс».

Конфликт иконок

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

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