Как создать фавикон самостоятельно
33094 2
How-to | – Читать 9 минут |
Прочитать позже
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ИСПРАВЛЕНИЕ
Секрет успешного сайта — в мелочах, которые владельцы часто упускают. Для эффективного продвижения недостаточно одного SEO: сейчас все больше внимания уделяется тонкостям — элементам дизайна, которые ненавязчиво попадают во внимание читателя и быстро запоминаются. Один из таких элементов — favicon. В статье рассмотрим создание favicon различными способами.
Содержание
- Что такое favicon для сайта
- Зачем нужен favicon
— Технические требования к фавиконам - Как создать favicon онлайн
- Как добавить фавикон на сайт
- Распространенные ошибки
- FAQ
Что такое фавикон для сайта
Favicon — это небольшая иконка, квадратное изображение с логотипом сайта, которое отображается во вкладке браузера и в закладках перед названием страницы:
Пример фавикона на сайте
А также в истории просмотров:
Фавиконы сайтов в истории браузера
В некоторых версиях браузера фавикон также появляется в адресной строке перед URL сайта. В выдаче Яндекса также отображаются фавиконы:
Фавиконы сайтов в Яндексе
Кроме логотипа, в фавикон для сайта иногда вставляют значок, символизирующий тематику ресурса, связанный с названием сайта, первую букву названия компании и т.п. Размер фавикона обычно составляет 32х32 или 16х16 пикселей.
Зачем нужен favicon
Иконка сайта играет важную роль в брендинге сайта. Лаконичная картинка помогает пользователю запомнить ресурс и обеспечивает его оригинальность.Сайт без фавикона выглядит, как минимум, серо по сравнению с другими: вместо запоминающейся иконки стоит стандартный значок Windows, который использовался еще до изобретения плоского экрана.
Пример сайта без фавикона
Следует установить фавикон и по другим причинам, обеспечивающим ряд других преимуществ:
Доверие. Пользователь обычно обращает внимание в первую очередь на то, как сделан сайт. Насколько профессионально разработан дизайн и учтены детали. При прочих равных сайт без этой мини-иконки не будет вызывать такого доверия, как его конкурент, который учел эту небольшую деталь.
Узнаваемость. Favicon — это удобный поиск. Когда пользователь ищет нужную ему вкладку в браузере, страницу из закладок браузера или истории, первое, что бросается в глаза, — это иконка. Никто не обращает внимания на текст. Представим, что вы что-то ищите, когда в браузере открыто 20 вкладок: кроме иконки не будет видно практически ничего.
Фавиконы сайтов во вкладках браузера
Продвижение. Это преимущество применимо только к поисковику Яндекс. Страница без фавикона в поисковой выдаче просто сливается с белым фоном и никак не выделяется среди остальных. В топе выдачи редко можно встретить страницу без иконки.
Сайт без фавикона в выдаче Яндекса
Проверка фавикона в аудите Serpstat
Хотите узнать, как найти и обезвредить ошибки на сайте с помощью Serpstat?
Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! 😉
Оставить заявку! |
Технические требования к фавиконам
В 2022 году, помимо стандартных иконок для браузеров, используют фавиконы для Android и Apple. Учитывая то, что браузеры загружают фавиконы в фоновом режиме, их большой размер не окажет негативного влияния на скорость загрузки сайта.Формат фавикона различается в зависимости от того, для чего он предназначен:
- для устаревших браузеров: favicon.ico такого размера:16х16, 32×32;
- для современных браузеров: один фавикон SVG формата для светлой и темной версии. Большинство браузеров поддерживают SVG формат, который более эффективен для больших изображений;
- для устройств Apple: фавикон размера 180×180 в формате PNG;
- для устройств Android: фавикон 192×192 в формате PNG, используемый на главной странице сайта и 512×512 — для загрузки прогрессивных WEB-приложений.
Сервис Can I Use для проверки поддержки различных фавиконов браузерами
Как создать фавикон онлайн
Чтобы сделать фавикон для сайта, не нужно быть дизайнером и иметь профессиональные навыки. Можно самостоятельно создать фавикон за пару минут с помощью специальных сервисов.Все подобные сервисы предельно просты в использовании. Мы собрали несколько инструментов, с помощью которых вы быстро и бесплатно сделаете фавикон.
Pr-Cy.ru
Простой и понятный генератор: фавикон создается в два шага. Выбираем картинку на компьютере и превращаем ее в мини-логотип.
Be1.ru
Есть возможность задать разрешение картинки (16х16 или 32х32 пикселя). Просто выберите картинку и нажмите «Конвертировать».
Favicon.by
Подходит для тех, кто хочет самостоятельно создать favicon: генератор позволяет нарисовать иконку своими руками или загрузить уже готовый вариант с компьютера или стороннего сайта.
Logaster.ru
Многофункциональный онлайн-сервис дает возможность подобрать нужную тематику иконки в зависимости от сферы ее применения (спорт, бизнес, автомобили и т. д.), цветовую гамму логотипа. Сервис сгенерирует несколько разных, но оригинальных вариантов с учетом всех параметров. Также можно найти иконку, подкорректировать ее или скачать уже готовую.Вы также можете заказать фавикон у дизайнера или сделать его в графическом редакторе, хотя это не самые дешевые и простые варианты.
Генератор фавикона Pr-Cy.ru
Как добавить фавикон на сайт
Чтобы картинка была видна на вкладке, ее нужно добавить с помощью файлового менеджера в корневой каталог сайта. Браузер сам найдет фавикон и выведет иконку на сайт. Для этого картинку нужно загрузить в формате 16х16. С автоматическим выводом формата 32х32 могут возникнуть трудности.Однако для надежности при любом разрешении картинки рекомендуется вручную прописать вывод фавикона в HTML-коде страницы. Для этого:
Добавьте файл favicon.ico в корневую папку — каталог сайта.
Пропишите в коде HTML favicon в формате ico. Он выводится строкой shortcut icon:
<link href="http://ваш-сайт. ru/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
Браузеры используют кэширование иконок, поэтому, если вам понадобится ее заменить, лучше поставить временный код:
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />
Здесь значение v = 2 обозначает версию иконки. Увеличивайте его на единицу каждый раз, когда меняете картинку (v = 3, v = 4 и т.д.). Тогда браузер будет сразу отображать последнюю версию. После того, как вы определились с окончательным вариантом иконки, этот параметр можно смело удалять из кода.
Распространенные ошибки
- Яндекс – https://favicon.yandex.net/favicon/site.com;
- Google – https://www. google.com/s2/favicons?domain=site.com
1. Отсутствует изображение фавикона в правильном формате в корневой папке сайта.
2. Неправильно прописан код фавикона на страницах ресурса.
3. Фавикон размыт или неуникален.
4. Файл с иконкой закрыт для сканирования поисковиками.
5. Сайт находится ниже 15 позиции в Яндекске — в этом случае фавикон не отображается.
6. Фавикон был загружен недавно — иногда на его отображение в выдаче может потребоваться несколько недель.
В каком формате сохранять favicon?
Стандартный фавикон, подходящий для всех версий браузеров, в том числе устаревших, сохраняется в формате ICO. Современные браузеры и мобильные устройства поддерживают также фавиконы PNG и SVG форматов.
Какого размера делать фавикон?
Стандартный размер фавикона 16×16 и 32×32. Для современных браузеров и мобильных устройств используются более крупные изображения:180×180, 192×192, 512X512.
Заключение
Чтобы создать иконку для сайта и установить ее, вам потребуется не более 10 минут. В сети достаточно много бесплатных онлайн сервисов с разным функционалом и выбором картинок, некоторые предлагают создать логотип самостоятельно.
«Список задач»
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач» |
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
7 дней бесплатноОцените статью по 5-бальной шкале
4.78 из 5 на основе 16 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Используйте лучшие SEO инструменты
Подбор ключевых слов
Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта
Возможности Serpstat
Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов
Кластеризация ключевых слов
Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов
SEO аудит страницы
Проанализируйте уровень оптимизации документа используя SЕО аудит страницы
Рекомендуемые статьи
How-toАнастасия СотулаЧто нужно знать об оптимизации сайта под голосовой поиск
How-toАнастасия СотулаКак обновить версию протокола TLS на сайте
How-toАнастасия СотулаЧто такое крауд-ссылки и крауд-маркетинг
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Поделитесь статьей с вашими друзьями
Вы уверены?
Спасибо, мы сохранили ваши новые настройки рассылок.
Сообщить об ошибке
Отменить
Фавикон лого бережёт. Зачем нужны иконки на вкладках — Маркетинг на vc.ru
В этой статье расскажем что такое фавикон, и как он влияет на эффективность вашего сайта.
743 просмотров
Так что же это такое
Фавикон, иконка, а иногда фавиконка — название для очень важного элемента сайта. Именно эти крутые иконочки играют большую роль в юзабилити, идентификации и брендинге сайта, но об этом чуть ниже.
Фавикон (FAVoritesICON) — это небольшой значок размером 16×16 пикселей, используемый в веб-браузерах для показа на вкладках. В дословном переводе с английского Favicon — значок для избранного, который впервые появился в браузере Internet Explorer.
Традиционно фавикон используется:
- на открытых вкладках перед названием сайта;
- в истории браузера;
- на панели закладок;
в избранном, куда вы сохраняете все интересные страницы;- в десктопной и мобильной выдаче Яндекса и Google.
Пример расположения фавикона
Зачем сайту нужен фавикон
Несмотря на небольшой размер, фавикон может значить для бизнеса достаточно много. Сайт без этого идентификатора в виде иконки будет отображаться с общим символом браузера — скучно и вряд ли запомнится.
Фавикон состоит из логотипа, первой буквы названия компании или другого изображения, ассоциирующегося с бизнесом. Фавикон может:
- Улучшить пользовательский опыт. Иконка в браузере — своеобразная подсказка для пользователя, сохраняющего сайт в закладки, или для энтузиастов с 50 вкладками на панели.
- Прокачать узнаваемость бренда. Как упоминалось выше, фавикон — один из элементов фирменного стиля вашей компании, который способствует запоминаемости логотипа.
- Подчеркнуть профессионализм. Фавикон — завершающий штрих. Без него, конечно, можно, но с ним картина будет точно завершена.
- Улучшить SEO. Если раньше иконки использовались лишь для удобства, то сегодня в некоторых поисковых системах (например, в Яндекс и Google), фавикон появляется в результатах поисковой выдачи напротив каждого сайта.
Как сделать фавикон
Для начала давайте определимся с размером фавикона.
Самый оптимальный — 16×16 пикселей. Поэтому важно убедиться, что ваша иконка корректно отображается в таком маленьком разрешении. Рекомендуем также создать фавикон в более крупных размерах 32×32 и 48×48 пикселей, которые иногда используются для десктопных версий страниц.
Не забудьте про прозрачный фон, если размещаете логотип в квадрате — для этого сохраните файл в формате PNG. Этот формат самый предпочтительный для фавикона. Он поддерживается и корректно отображается практически всеми браузерами, что обеспечивает высокое качество иконки на любых девайсах.
Также рекомендуем делать иконки в формате SVG — они масштабируются без потери качества, что в будущем может стать отличным решением внезапных проблем с отображением картинки.
С размером определились, теперь выбираем подходящий способ создания иконки.
Начнём с самого очевидного варианта — можно обратиться к дизайнеру. Особенно актуально, если у вашего бренда ещё нет логотипа. Если дизайнер уже сделал для вас лого, то и фавикон – не проблема.
Вы также можете сделать иконки самостоятельно в фоторедакторе. Например, достаточно просто сделать фавикон в Photoshop:
- В меню выбора создайте новый файл размером 64х64 пикселя (на крупном холсте просто удобнее). Далее вставьте лого в документ, добавьте или уберите детали.
- После внесения изменений, во вкладке «Изображение» найдите блок «Размер изображения», чтобы изменить уменьшить картинку до 16х16 пикселей.
Удостоверьтесь, что всё отображается правильно: фон удалён, картинка не растянута, ничего не размазалось.
- И да, сохранитесь.
Также можно воспользоваться онлайн-сервисами: Favicon Generator, Dynamic Drive Favicon Tool или Gen Favicon.
Можете также скачать фавикон на специальных сайтах, например, Fresh Favicons и Favicon.by. Готовые фавиконы — хорошая временная мера, но понятно, что об уникальности бренда можно забыть.
Покажите иконку вашего сайта в комментариях — нам очень интересно. Быть может, ваш пример вдохновит коллег, и они тоже сделают себе фавикон.
А если у вас ещё нет сайта, напомним про сервис REG.Site. В нём можно либо отредактировать уже готовый шаблон на WordPress, либо потратить чуть больше времени и собрать сайт из элементов.
Веб-иконка — 16×16 бесплатных иконок панели инструментов
| ||||||||||||
Скачать иконку | ||||||||||||
Перетащите, чтобы проверить качество значков | ||||||||||||
Веб-папка Smooth Icon Cats Icons Коммерческое использование: Не разрешено | Web Icon 3D BlueFX Desktop Icons Коммерческое использование: разрешено | ||
Web Icon 12×12 Бесплатные значки панели инструментов Коммерческое использование: Разрешено | Веб-иконка Бесплатные иконки социальных сетей Коммерческое использование: разрешено | ||
Web Icon 16×16 Бесплатные значки панели инструментов Коммерческое использование: Разрешено | Значок веб-сервера Значки кошек 2 Коммерческое использование: Не разрешено | ||
Значок всплывающей подсказки Web Slice Fugue 16px Дополнительные значки Коммерческое использование: разрешено | Значок веб-камеры Монохромные отражения Зеленые значки Коммерческое использование: разрешено | ||
Значок веб-флага Золотые значки управления Коммерческое использование: Не разрешено | Значок веб-загрузки Значки файлов Lords Коммерческое использование: Не разрешено | ||
Значок веб-папки Значки из нержавеющей стали Коммерческое использование: не разрешено | Значок веб-разработки Значки SEO Коммерческое использование: не разрешено | ||
Значок веб-камеры Mono Basic Blue Icons Коммерческое использование: разрешено | Значок веб-почты 24×24 бесплатные значки кнопок Коммерческое использование: разрешено |
Значок короны Скачать значок Windows Скачать файлы PNG | Мобильный значок Скачать значок Windows Скачать файлы PNG | ||
Значок сохранения Скачать значок Windows Скачать файлы PNG | Значок календаря 1 Скачать значок Windows Скачать файлы PNG | ||
Значок калькулятора Скачать значок Windows Скачать файлы PNG | Chart Graph 2D 1 Icon Download Windows icon Скачать файлы PNG | ||
Значок календаря 2 Скачать значок Windows Скачать файлы PNG | Значок инструмента Скачать значок Windows Скачать файлы PNG | ||
Значок фильтра Скачать значок Windows Скачать файлы PNG | Значок блокировки разблокировки Скачать значок Windows Скачать файлы PNG | ||
Значок щита Скачать значок Windows Скачать файлы PNG | Значок избранного Загрузить значок Windows Загрузить файлы PNG | ||
Значок специального предложения Скачать значок Windows Скачать файлы PNG | Значок звезды Скачать значок Windows Скачать файлы PNG | ||
Значок музыки Скачать значок Windows Скачать файлы PNG | Smile 6 Icon Скачать значок Windows Скачать файлы PNG | ||
Значок документа Скачать значок Windows Скачать файлы PNG | Значок флага Скачать значок Windows Скачать файлы PNG | ||
Значок кода Скачать значок Windows Скачать файлы PNG | Значок стрелки вверх Скачать значок Windows Скачать PNG файлы |
Рекламные ссылки
16×16 Бесплатные значки панели инструментов — Значки панели инструментов
Автор: | Aha-Soft (http://www. |