Создать фавикон онлайн | favicon.ico для сайта

X

• Новости Be1.ru
• Новости SEO

Be1 Вконтакте

1251 подписчиков

Be1 Facebook

1567 подписчиков

Новости

Сообщить о проблеме

Favicon — (от англ. FAVorites ICON в переводе «значок для избранного») — значок веб-сайта размером 16x16px или 32x32px, который отображается браузером в адресной строке или рядом с сохраненной закладкой. Традиционно название и расширение иконки используется favicon.ico.

Наш сервис способен конвертировать выбранное Вами изображение (размером до 175 Кб) в иконку значка сайта (размерами 16x16px или 32x32px). После генерации необходимо лишь загрузить favicon.ico в нужный каталог хостинга сайта.

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

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

Куда загрузить фавикон чтобы он был онлайн?

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

Зачем указывать путь к Фавикону?

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

Для этого в соответствующих шаблонах у них прописан путь к разным favicon.ico.

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

Отзывы об инструменте

Оценка:

3.6 5 5

23.10.2022  18:16

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

Ответить

20.03.2020  16:00

Не работает, загружаю png 32х32, конвертирую в 32х32. Результат отображается, при скачивании пишет — Ошибка: файлы отсутствуют…

02.05.2017  11:48

Сделал себе отличную фавиконку. Все понятно и удобно. Классно придумали!

Ответить

29.01.2021  10:55

Коллеги, привет!

Инструмент вместо пустого фона вставляет ЧЁРНЫЙ ФОН. Представьте вашу фирменную единичку на черном фоне.

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

Ответить

09.06.2017  00:19

Было бы неплохо, если бы Вы сделали генератор favicon для всех устройств, в т.ч. и ретина-устройств

Ответить

\n’ + ‘

\n’ + ‘

\n’ + ‘ 0\n’ + ‘ \n’ + ‘

\n’ + ‘

\n’ + ‘ 0\n’ + ‘ \n’ + ‘

\n’ + ‘

\n’ + ‘ ‘+item. author+’\n’ + ‘

Создать Favicon

Создать Favicon

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

Назад к инструментам

Инструменты

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

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

Выберите размер

16px x 16px32px x 32px48px x 48px64px x 64px96px x 96px120px x 120px128px x 128px144px x 144px

Выберите фотографию

Для создания 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, и использует его для отображения фавиконки в результатах поиска и рекламных кампаниях. Если во время обхода сайт недоступен для робота, может скачаться фавиконка хостинга со страницы-заглушки сайта. Поэтому в поиске вместо вашей фавиконки отобразится произвольная иконка.

Лучший генератор фавиконок - Favic-o-Matic

Что-то нужно, парень?

Просто старый добрый favicon.ico
16x16 + 32x32 пикселей Каждый чертов размер, сэр!
, включая iOS, Android, Metro и многое другое...

дополнительные настройки

Предустановленные размеры:

ленивый

навязчивый

апокалипсис

Размеры:

16x16

24x24

32x32

48x48

57x57

60x60

64x64

70x70

72x72

76x76

96x96

114x114

120x120

128x128

144x144

150x150

152x152

196x196

310x150

310x310

URL-адрес веб-сайта:

Параметры плитки метро

Заголовок:

Цвет фона:

URL RSS-канала:

Загрузите свое изображение

Рекомендуемый минимальный размер:

Lazy пресет для ленивых

включая следующие размеры:

• 16x16 + 32x32 пикселей (несколько . ico + .png)
• 144x144 пикселей
• 152x152 пикселей

Накладка Obsessive для одержимых людей

включая следующие размеры:

• 16x16 + 32x32 пикселей (несколько .ico + .png)
• 57x57 пикселей
• 72x72 пикселей
• 114x114 пикселей
• 120x120 пикселей
• 144x144 пикселей
• 152x152 пикселей

Апокалипсис сегодня

включая следующие размеры:

• ну что ж...
• все!

Предупреждение: завершающая косая черта не найдена!

Это может вызвать проблемы с путями, будьте осторожны!

Почему абсолютные пути?

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

например:

Цвет фона для значка плитки Metro в IE 10 (Metro-эквивалент значка apple-touch-icon)

Название плитки Metro (может быть пустым, если хотите)

RSS-канал плитки Metro (может быть пустым, если хотите)

Интернет-стандарт для (почти) каждого браузера

IE9 Закрепленный пользовательский интерфейс браузера сайта

Новая вкладка в IE, кнопка панели задач в Win 7+, боковая панель списка чтения Safari Боковая панель «Список для чтения» в формате HiDPI/Retina

Стандартный главный экран iOS (iPod Touch, iPhone первого поколения с поддержкой 3G)

Изображение плитки Win 8.

1 Metro (маленькое)

Значок сенсорного экрана iPad (без дисплея Retina — iOS6 или более ранней версии)

iPad сенсорный значок (без сетчатки — iOS7)

Значок GoogleTV

Значок сенсорного экрана для iPhone (iOS6 или более ранней версии)

Значок сенсорного экрана для iPhone (iOS7)

Значок приложения Интернет-магазина Chrome и значок Android (низкое разрешение)

Плитка IE10 Metro для закрепленного сайта и экрана iPad (IOS6 или ранее)

Win 8.1 Image Metro Plain Image (квадрат)

IPad Retina Touch Icon (IOS7)

Android Chrome (M31+)

Win 8.1 Metro Plain Image (широкий)

Win 8.1 Metro Plap (большая )

О чем этот сайт?

Favic-o-Matic генерирует фавиконы в форматах .ico и .png (даже прозрачные!), а также HTML-код, необходимый для того, чтобы ваш сайт выглядел великолепно в любом браузере и на любом устройстве.
Попробуйте прямо сейчас, это бесплатно!

Не знаете, что такое фавикон ?
Нужна помощь, чтобы разместить значок favicon на вашем сайте?
Пара интересных ссылок:
Википедия
Как добавить фавикон в блог WordPress
Шпаргалка по фавикону (осторожно! Очень полезно!)
Настройка веб-сайта Создайте свой собственный веб-сайт!
Мария Беатрис Алонци Итальянский цифровой художник

Что, зачем и как создавать фавиконы для вашего веб-сайта

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

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

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

Содержание

• Что такое фавикон?
• Где можно увидеть фавиконку?
• Почему фавиконки важны?
• Какого размера фавикон?
• Как фавиконки влияют на SEO?
• Как создать фавиконку
• Как создать фавиконку
• Как добавить значок избранного в HTML

Приступим

Что такое фавикон?

Фавикон — это значок браузера, представляющий бренд или веб-сайт. Фавиконы чаще всего можно увидеть рядом с заголовком веб-страницы на вкладках браузера, их также можно найти в адресных строках, списках закладок, страницах результатов поисковой системы (SERP), панелях инструментов, истории браузера и других местах в Интернете.

У Google один из самых узнаваемых фавиконов. Вы можете увидеть разноцветную букву G в адресной строке моего браузера ниже.

Фавиконы теперь появляются даже в результатах мобильного поиска Google. Вы можете увидеть результаты моего последнего поиска — «как часто нужно поливать суккуленты» — ниже.

Где можно увидеть фавиконку?

Посмотрите на вкладку Hubspot в браузере. Вы заметите значок ниже рядом с заголовком этой статьи.

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

Фавиконы также расположены на:

• Панель поиска.
• История поиска.
• Приложения панели инструментов.
• Закладки.
• Рекомендации для вашей панели поиска.
• Выпадающее меню ваших закладок.

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

Почему фавиконки так важны?

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

Обратите внимание на мобильную поисковую выдачу, что веб-сайты Joy Us Garden и Легко выращиваемые луковицы имеют значки цветов, а сайт The Succulent Source имеет серый шар. Это не имеет особого смысла для сайта о суккулентах, не так ли? Это потому, что глобус — это значок значка по умолчанию, который Google Chrome устанавливает для веб-сайтов, у которых нет собственного значка.

Если я быстро просматриваю страницу результатов, я, вероятно, решу изучить Joy Us Garden и Легко выращиваемые луковицы вместо Источник суккулентов по нескольким причинам.

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

Теперь представьте эти три веб-сайта во вкладках браузера на рабочем столе. Было бы намного легче запомнить пользовательские значки Joy Us Garden и Easy to Grow Bulbs , чем значок 9 по умолчанию.0098 Сочный источник . В море открытых вкладок я с большей вероятностью вернусь на вкладки с пользовательскими значками и проведу больше времени на этих сайтах.

Наконец, допустим, я нажимаю на каждый из этих сайтов. При посещении Joy Us Garden и Easy to Grow Bulbs я сразу заметил, что пользовательские фавиконы основаны на логотипах веб-сайта. Красочный логотип последнего показан ниже. Вы узнаете тюльпан как их значок.

Это помогает укрепить узнаваемость бренда и сделать их сайт более запоминающимся.

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

 

Какого размера фавикон?

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

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

• 16x16 : Размер значков браузера.
• 32x32 : Размер значков быстрого доступа на панели задач.
• 96x96 : Размер значков ярлыков на рабочем столе.
• 180x180 : Размер значков Apple Touch.
• 300x300 : Размер, требуемый Squarespace.
• 512x512 :Размер, требуемый WordPress.

Как фавиконки влияют на SEO?

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

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

Авторитет бренда и имидж

Наличие уникального логотипа и его использование в качестве фавиконки поставит имидж вашего бренда в центр внимания клиентов.

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

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

Пользовательский опыт

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

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

Теперь, когда мы понимаем, что такое фавикон, его назначение и разные размеры, давайте посмотрим, как его создать.

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

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

Подумайте о том, чтобы нанять графического дизайнера на Fiverr или Upwork, чтобы создать свой логотип, или используйте такие инструменты, как Logo Crisp, для создания собственного логотипа.

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

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

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

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

Ознакомьтесь с этим блогом о тенденциях 2022 года для логотипов брендов.

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

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

Вот почему вы хотите взять самую узнаваемую часть своего логотипа и сделать ее фавиконкой. Easy to Grow Bulbs сделали именно это, взяв тюльпан со своего логотипа и сделав его фавиконкой.

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

Если вас устраивает изображение и размеры фавикона, вы можете сохранить файл в формате PNG или JPG и загрузить его в генератор значков.

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

 

Генераторы фавиконов

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

Стандартные форматы фавиконов — ICO и PNG.

• ICO совместим со всеми браузерами, включая Internet Explorer.
• PNG — еще один распространенный формат. Единственным недостатком является то, что Internet Explorer не поддерживает файл PNG.

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

Favikon

Создать фавикон в Favikon очень просто. Вы просто загружаете изображение, обрезаете его, а затем загружаете получившийся значок в формате ICO или PNG. Ниже я загрузил иконку ламы из Проект "Существительное" .

Минус в том, что Favikon поддерживает только один размер: 16x16 пикселей. Чтобы узнать больше о размерах, воспользуйтесь инструментами ниже.

Favicon.io

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

Вы можете скачать результат в форматах ICO и PNG и в разных размерах. Варианты перечислены ниже:

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon.png
• favicon-16x16.png
• favicon-32x32.png
• Favicon.ico

Favicon.ico и генератор значков приложений

С помощью этого бесплатного инструмента вы можете загрузить изображение в формате PNG или JPG и преобразовать его в форматы ICO и PNG в еще большем количестве размеров.

Варианты загрузки перечислены ниже:

• apple-icon-57x57.png
• apple-icon-60x60.png
• apple-icon-72x72.pnf
• apple-icon-76x76.png
• apple-icon-114x114.png
• apple-icon-120x120. png
• apple-icon-144x144.png
• apple-icon-152x152.png
• apple-icon-180x180.png
• android-icon-192x192.png
• favicon-32x32.png
• favicon-96x96.png
• favicon-16x16.png

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

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

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

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

Допустим, вы сохранили файл PNG как «favicon.ico». Затем вы должны добавить следующий фрагмент кода между тегами :

.
 
  
 

Обратите внимание, : Ваш значок не обязательно должен находиться в корневом каталоге вашего сайта — обычно это так. Если вы сохранили его в другом месте, просто убедитесь, что атрибут href указан правильно. Поэтому, если вы сохранили его в подпапке с именем «images», вам нужно ввести .

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

Если вы создали версию 16x16, 32x32, 48x48 и 180x180, например, вы должны добавить следующий фрагмент кода: