Каталог favicon: Иконки Favicon — скачивайте бесплатно в PNG и SVG

Фавикон сайта — что это такое? Как разместить Favicon.ico на сайт?

1271 Время чтения: 5 мин 23.08.2018

Что такое favicon (фавикон)?

Фавикон (в переводе с английского FAVorite ICON — «значок для избранного») — миниатюрное изображение, выполненное в формате ico. Он виден как в поисковой выдачи, так и при открытии самого сайта, а именно: в верхней части браузера (смотрите на картинку). Favicon является миниатюрным изображением, которое относится к числу основополагающих составляющих любого интернет-ресурса. Если в 2006 году сайты в большинстве своем работали без прикрепленных фавиконов, то сегодняшние веб-сайты невозможно представить без них. Конечно, остались проекты, запущенные без favicon, но в 2017 году это единичные случаи, найти которые очень сложно, так как сами поисковики в 95% случая не пропускают их в свой ТОП по высокочастотным запросам.

Предназначение favicon:

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

Где демонстрируется favicon (фавикон):

• В поисковой выдачи — когда пользователь вводит в поиске поисковой системы какой-либо запрос, он в 90% случаях видит как названия страниц сайтов, так и их индивидуальные favicon.

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

• На экране приложений в смартфоне — favicon отображаются не только в браузере и поисковой выдачи, но и на экранах смартфонов. Так если, при сохранении сайта в качестве приложения в своем смартфоне (что сегодня является нормой), пользователь вместе с его названием будет видеть favicon. Это в свою очередь облегчает сортировку интересных сайтов.
• На внутреннем домашнем столе компьютера — когда пользователь сохраняет сайт на рабочем столе, он создает иконку, представляющую собой какое-либо изображение, под которым подразумевается favicon.

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

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

Favicon — миниатюрная иконка, которая имеет квадратную форму. Ее размер в большинстве своем равен 8х8, 16х16, 32х32, 64х64 и 128х128 пикселей. Именно поэтому возникает сложность при перекодировании объемных картинок в формат ico, ведь подчас в такого рода изображениях присутствует более 1280 пикселей, что сильно портит внешний вид конечной ico картинки, превращая ее в квадрат со всевозможными красками.

Где взять favicon?

Фавикон можно как скачать из интернета, так и создать самостоятельно, в том числе заказав его разработку у специалиста:

• Скачанный из интернета favicon. Основным преимуществом является то, что такой фавикон полностью бесплатен. Вторым же достоинством стоит считать то, что в качестве такого фавикона может выступать любое изображение, главное правило: перекодировать его в формат ico. Но бесплатность не несет в себе ничего хорошего, все скаченные из интернета фавиконы являются собственностью их авторов, и в 99% случаях они присутствуют на других сайтах, что лишает их какой-либо уникальности. Например, в Европе и Соединенных Штатах Америки нередки случаи, когда владельцев сайтов привлекали к уголовной ответственности за кражу favicon (нарушение авторских прав).
• Созданный самостоятельно favicon. Создать фавикон самостоятельно сегодня может даже школьник. Для этого потребуется лишь воспользоваться возможностями, которые предоставляются специально разработанными для этих целей онлайн-генераторами иконок (icon) в формате ico. Основным преимуществом данного метода является то, что в качестве favicon может выступать логотип компании/фирмы/организации, перекодированный с помощью генератора фавиконов в формат ico.

• Заказанный у специалиста favicon. Разумеется, фрилансеры и компании, ориентирующиеся на создании фавиконов используют доступные в открытом доступе всем пользователям интернета российские и иностранные генераторы и редакторы изображений в формате ico. Хотя при этом, профессиональный фавикон всегда будет стоять выше того, который пользователь сможет создать самостоятельно.

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

• https://www.favicon.cc — один из самых первых онлайн-генераторов фавиконов, используя его пользователь сможет не только перекодировать картинку из классических изобразительных форматов в ico (например, логотип своей компании), но и создать свою иконку, которая хорошо будет выглядеть как при поисковой выдачи в Яндексе и Google, так и адресной панели браузера.

• https://www.favicongenerator.com — минималистический сервис, облегчающий генерацию фавиконов и упрощающий процесс редактирования изображений в формате JPG в ico. Результат моментально демонстрирует в специально отведенном окошке.

• https://www.genfavicon.com — этот сервис достаточно прост в понимании, так как создание фавикон проходит в три этапа, а именно: выбор файла в формате JPEG, GIF, PNG на компьютере; выбор конечного размера изображения и повсеместное его перекодирование в формат ico. Учтите, что изображение должно иметь квадратную основу.

Генераторы фавиконов с нуля:

• https://antifavicon.com
• https://favicon-generator.org
• https://favicon.ru
• https://www.favicon.cc
• https://www.degraeve.com/favicon

Коллекции фавиконов:

• https://www.iconj.com/gallery.php — коллекция фавиконов, насчитывающая свыше 10000 иконок.
• https://www.audit4web.ru/info/favicon/ — коллекция с фавиконами для сайта, в базе которой хранится более 20000 изображений в формате icon (ico).
• https://www.favicon.cc/?action=icon_list&order_by_rating=1 — генератор фавиконов и галерея анимированных и статичных иконок
• https://www.favicon.co.uk/gallery.php — генератор фавиконов для сайта и блога, а также каталог статичных и анимированных картинок.
• https://thefavicongallery.com — многообещающая веб-коллекция изображений в формате ico, доступных для бесплатного скачивания.
• https://findicons.com — самый масштабный сток на просторах российского и иностранного интернета с изображениями в формате icon (ico).

Как разместить фавикон на сайте?

Для размещения Вам потребуется лишь доступ к серверу. Формат фавикон: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

1. Разместите favicon в корневую папку сайта.
2. Добавьте в HTML-код главной страницы сайта, в элемент , ссылку на размещенный файл.
… …

Favicon by RealFaviconGenerator — Плагин для WordPress

• Детали
• Отзывы
• Установка
• Разработка

Поддержка

Создайте и настройте фавикон для настольных браузеров, iPhone / iPad, устройств Android, планшетов с Windows 8 и многого другого. За считанные секунды создайте иконку, которая отлично смотрится на всех основных платформах.

Favicon — это не просто один файл favicon.ico, помещенный в середине вашего сайта. В настоящее время, с таким количеством различных платформ и устройств, вам нужна куча фотографий, чтобы выполнить работу. С помощью RealFaviconGenerator создайте все необходимые значки для настольных браузеров, iPhone / iPad, устройств Android, устройств Windows 8 и многого другого.

Устройства iOS используют значок Apple touch с высоким разрешением для иллюстрации закладок и ярлыков на главном экране. Для iPhone первого поколения требуется изображение размером 57х57, в то время как для совершенно нового iPad с экраном Retina требуется изображение размером 152х152. Android Chrome также использует эти изображения, если он их найдет. Windows 8 идет другим путем с помощью специального набора значков и HTML-объявлений.

Фавикон — это не только изображения с разным разрешением. Различные платформы имеют разные рекомендации по пользовательскому интерфейсу. Например, классические значки рабочего стола часто используют прозрачность. Но iOS требует непрозрачных значков. И у Windows 8 есть свои собственные рекомендации.

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

• Windows (IE, Chrome, Firefox, Opera, Safari)
• Mac (Safari, Chrome, Firefox, Opera, Camino)
• iOS (Safari, Chrome, Coast)
• Android (Chrome, Firefox)
• Surface (IE)
• И более

Мы очень серьезно относимся к совместимости. Перейдите по ссылке http://realfavicongenerator.net/favicon_compatibility для получения полного списка.

This plugin relies on RealFaviconGenerator when you create your favicon. Browse its terms of service and privacy policy for additional information.

Localization

• Английский (en_EN) от Philippe Bernard
• Французский (fr_FR) от Philippe Bernard
• Шведский (sv_SE) от Linus Wileryd
• Бразильский Португальский (pt_BR) от Marcelo Volgarini, Criação de Sites
• Голландский (
  nl_NL) от Axel Vanderhaeghen
• Датский (da_DK) от Alexander Leo-Hansen
• Чешкий (cs_CZ) от анонимного переводчика
• Польский (pl_PL) от Maciej Gryniuk
• Русский (ru_RU) от Natasha Diatko, UStarCash
• Индонейзийский (id_ID) от Jordan Silaen

• Начальный экран настройки фавикона. Вам предлагается установить свой фавикон в избранное.
• Выберите основное изображение из Media Library (необязательно)
• Как только вы нажмете кнопку Создать фавикон, вы будете перенаправлены на RealFaviconGenerator, где вы можете создать свой фавикон: добавить фон к изображению iOS, используя насыщенную версию основного изображения для Windows 8…
• Когда вы закончите с редактированием фавикона, вы будете перенаправлены на панель управления WordPress. Фавикон устанавливается автоматически. На этом экране представлен предварительный просмотр фавикона на различных платформах, чтобы вы знали, как выглядит ваш блог на разных платформах.
• Вы также можете запустить проверку фавиконов Realfavicongenerator, чтобы убедиться, что ваш фавикон настроен правильно.

Использовать Панель управления WordPress

1. Перейти к ‘Добавить Новый’ в Панели управления плагином
2. Искать в ‘Favicon by RealFaviconGenerator’
3. Нажмите ‘Установить Сейчас’
4. Активируйте плагин в панели инструментов Плагина
5. Перейдите к пункту «Фавикон» в меню «Внешний вид»
6. Выберите основное изображение из Media Library (необязательно)
7. Нажмите кнопку ‘Generate Favicon’ и следуйте инструкциям.

использовать FTP

1. Скачайте favicon-by-realfavicongenerator.zip
2. Извлеките favicon-by-realfavicongenerator в директорию на свой компьютер
3. Загрузите favicon-by-realfavicongenerator в каталог /wp-content/plugins/
4. Активируйте плагин в панели инструментов Плагина
5. Перейдите к пункту «Фавикон» в меню «Внешний вид»
6. Выберите основное изображение из Media Library (необязательно)
7. Нажмите кнопку ‘Generate Favicon’ и следуйте инструкциям.

This plugin is super simple to use. If you were to try to do what it is doing, and post all the favicons / sizes on all the different platforms it would take an incredible amount of time, and most of us wouldn’t know how to do it anyway.I am really thankful for how easy it makes the process.

Amazing, there is a need for a feature and a few minutes later it’s working!

Fulfils what it promises, its simple to install and setup.

You’ve found the answer here to your Favicon needs. Does everything it needs to. Well.

i share my link in telegram, and no icon here. maybe can be integrated ? ty.

this plugin does what it should, i have been using it since many years and it is nice that you can simply rely on it to do its job.

Посмотреть все 744 отзыва

«Favicon by RealFaviconGenerator» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

• phbernard

«Favicon by RealFaviconGenerator» переведён на 15 языков. Благодарим переводчиков за их работу.

Перевести «Favicon by RealFaviconGenerator» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

1.3.27

• Plugin was tested up to WordPress 6.1.1 — Previous tag was wrongly set

1.

3.26

• Plugin was tested up to WordPress 6.1.1

1.3.25

• Escape favicon HTML
• URL sanitization

1.3.24

• Security audit
• Plugin was tested up to WordPress 5.9.3

1.3.23

• Fix reflected cross-site scripting issue
• Plugin was tested up to WordPress 5.9.2

1.3.22

• Исправлена несогласованность в предыдущем развертывании

1.3.21

• Плагин был протестирован до версии WordPress 5.8
• Исправлена проблема безопасности XSS, о которой сообщил WPSpan.com. Смотреть по ссылке https://wpscan.com/vulnerability/ed9d26be-cc96-4274-a05b-0b7ad9d8cfd9?fbclid=IwAR2aRMXRjbGm9ppoI9tM-OHm26Q0ax4yt0MkcP5sp0-pz9D4eVIEHQwvG1Y

1.3.20

• Исправление: выбор носителя снова работает
• Плагин был протестирован до версии WordPress 5.6

1.3.19

• Плагин был протестирован до версии WordPress 5.5.3

1.3.18

• Удалена ссылка на устаревшую функцию screen_icon
• Плагин был протестирован до версии WordPress 5. 4

1.3.17

• Изменения для удаления предупреждений о безопасности из-за CodeRisk

1.3.16

• Плагин был протестирован до версии WordPress 5.3.2

1.3.15

• Плагин был протестирован до версии WordPress 5.1

1.3.14

• Плагин был протестирован до версии WordPress 5.0-beta5

1.3.13

• Плагин был протестирован до версии WordPress 4.9.7

1.3.12

Никогда не публиковался, никаких изменений

1.3.11

• id/ID перевод добавлен, спасибо Jordan Silaen
• Плагин был протестирован до версии WordPress 4.8.1

1.3.10

• Всегда имеется доступ к RealFaviconGenerator через HTTPS
• Уточнения в разделителях локальных путей для Windows
• Плагин был протестирован до версии WordPress 4.7.1
• Уведомление, чтобы попросить администратора не деактивировать плагин

1.3.9

• Плагин был протестирован до версии WordPress 4. 7

1.3.8

• Плагин был протестирован до версии WordPress 4.6

1.3.7

• Исправлено: ключевые слова плагина перефразированы (некоторые не были приняты во внимание).

1.3.6

• Исправление: путь к значкам иногда был неправильным, когда каталог загрузки был корневым каталогом

1.3.5

• pl/PL перевод добавлен, спасибо Maciej Gryniuk
• ru/RU перевод добавлен, спасибо Natasha Diatko

1.3.4

• Протестировано до версии WordPress 4.5

1.3.3

• Деактивировать журналы отладки

1.3.2

• Опечатки в переводах на французский язык
• Исправление предупреждения для PHP7
• Протестировано до версии WordPress 4.4.1
• cs/CZ перевод добавлен, спасибо анонимному переводчику

1.3.1

• Исправление в предыдущей версии.

1.3.0

• Плагин использует преимущества неинтерактивного API Realfavicongenerator для автоматического обновления фавикона при появлении новой версии.

1.2.15

• Ссылка для доната добавлена.
• Плагин теперь работает, когда доступ к файловой системе осуществляется через FTP (не напрямую). Смотреть по ссылке https://wordpress.org/support/topic/no-images-created

1.2.14

• Повышение безопасности.
• Исправлено предупреждение, касающееся NONCE_ACTION_NAME.
• Удалены бесполезные закрывающие теги PHP.
• Добавлена проверка ошибок при распаковке пакета favicon.

1.2.13

• Исправлена уязвимость XSS, о которой сообщил Kacper Szurek

1.2.12

• Улучшения производительности: проверка обновлений фавикон теперь выполняется в разделе Администратора (не в общедоступном разделе), локали больше не загружаются в Общедоступный раздел.
• Воспользуйтесь Rewrite API (если доступно), чтобы файлы отображались в корневом каталоге. Т.е. http://example.com/favicon.ico работает (например, по запросу Яндекса).
• nl/NL перевод добавлен, спасибо Axel Vanderhaeghen.

1.2.11

• Когда браузер администратора не может получить изображение, выбранное из Media Library, пользовательский интерфейс завершается корректно.
• Распаковка пакета Favicon более надежна.
• Уведомление о том, чтобы пользователь оценил плагин в WordPress.org.

1.2.10

• Исправлено предупреждение при использовании с BuddyPress (bp_setup_current_user). Смотреть по ссылке https://wordpress.org/support/topic/wp_debug-notice-for-bp_setup_current_user.

1.2.9

• При выборе из медиатеки основное изображение теперь извлекается браузером администратора WP для предотвращения ряда проблем (блоги, размещенные локально, блоги, защищенные тем или иным способом, и т.д.).

1.2.8

• Плагин успешно протестирован на WordPress 4.1.

1.2.7

• Исправление для сайтов WordPress, размещенных в Windows.

1.2.6

• Плагин теперь совместим с мультисайтом.

1.

2.5

• Исправление для страницы входа в систему: код фавикона не был введен на этой конкретной странице.

1.2.4

• Удалите отладочные сообщения, чтобы избежать ложных срабатываний в журнале ошибок.

1.2.3

• Уведомления об обновлениях могут быть отклонены навсегда.
• Новая страница настроек для включения / отключения уведомлений об обновлениях.

1.2.2

• Исправлена проблема 403 с сервисом хостинга HostGator (https://wordpress.org/support/topic/403-error-when-generating-favicon ).

1.2.1

• Исправлено удаление плагина и проверка обновлений.

1.2.0

• Плагин теперь предупреждает пользователя, когда RealFaviconGenerator был обновлен, и фавикон должен быть сгенерирован снова.

1.1.1

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

1.1.0

• Запустите проверку фавикон Realfavicongenerator из интерфейса администратора.

1.0.7

• Деактивируйте значок Genesis по умолчанию, если он настроен в FbRFG.

1.0.6

• Улучшено управление ошибками во время установки фавикона.

1.0.5

• Не пытаться переписать URL-адрес файлов favicon, если файл .htaccess недоступен для записи.

1.0.4

• Возможность не перезаписывать URL-адрес файла фавикона, даже если это возможно.

1.0.3

• Синтаксис кода плагина изменен, чтобы соответствовать более старым версиям PHP.

1.0.2

• URL-адрес обратного вызова был слишком длинным для некоторых серверов. Был сокращен.

1.0.1

• Настройки администратора Favicon теперь находятся в меню «Внешний вид».
• Исправлено управление ошибками во время установки фавикона.
• Исправлено управление ошибками во время установки фавикона.

1.0

Начальная версия.

Оценки

Посмотреть все

• 5 звёзд 730
• 4 звезды 5
• 3 звезды 2
• 2 звезды 3
• 1 звезда 4

Войдите, чтобы оставить отзыв.

Участники

• phbernard

Поддержка

Решено проблем за последние 2 месяца:

0 из 4

Перейти в форум поддержки

Пожертвование

Would you like to support the advancement of this plugin?

Пожертвовать на развитие плагина

Быстрый совет: добавление фавиконки на ваш сайт

Натан Ролер

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

Фавикон — это маленький значок, который браузеры отображают рядом с заголовком страницы на вкладке браузера или в адресной строке рядом с ее URL-адресом. Он также используется, когда вы добавляете страницу в закладки. Вот несколько примеров:

Вот пример меню закладок:

Но это еще не все. Некоторые веб-сервисы и поисковые системы (например, DuckDuckGo) даже используют фавикон:

Есть ли на вашем сайте фавикон?

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

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

Фавиконы добавляют изюминку, которую ценят посетители (и клиенты).

Технические детали

Размер

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

Что показывать

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

• Используйте свой логотип (или его часть)
• Если ваш логотип плохо отображается при таком маленьком размере, используйте стилизованную версию первой буквы (или букв) вашего сайта или названия компании
• Используйте значок, который сообщает, что ваш сайт делает или представляет (например, Google Analytics использует крошечную диаграмму для своего значка)

Формат изображения

Как следует из названия, фавиконы должны использовать формат файла значка ( .ico ). Раньше конвертировать в этот формат было проблематично. Однако благодаря простым бесплатным услугам это уже не так. Все, что вам нужно сделать, это создать изображение размером 16×16. Формат .ico поддерживает прозрачность, поэтому вы не ограничены созданием квадратного значка. Если вы хотите воспользоваться преимуществами прозрачности, используйте формат .gif или .png при создании изображения.

Получив изображение размером 16×16, воспользуйтесь бесплатным сервисом, таким как favicon.cc, для преобразования изображения. Используйте параметр «Импорт изображения», чтобы загрузить исходное изображение:

Вы увидите предварительный просмотр вашего нового значка. Затем вы можете загрузить преобразованный значок:

Сохраните файл на своем сайте (подробнее об этом ниже).

Где это происходит

Первоначально фавиконы должны были называться точно favicon.ico и размещаться в корне вашего домена (например, http://www.yourdomain.com/favicon.ico ). Это означало, что у вас мог быть только один фавикон на домен, и точка. Однако по мере того, как фавиконы стали стандартизированными, было добавлено больше гибкости. Теперь есть два подхода:

Один фавикон для всего домена

Если вам нужен только один фавикон для всего домена, просто сохраните файл favicon. ico в корневой папке вашего сайта. При загрузке он должен быть доступен с http://www.yourdomain.com/favicon.ico . Как только вы загрузите файл, ваш браузер должен начать отображать значок для всех страниц вашего сайта. Если нет, очистите кеш браузера и перезагрузите страницу.

Фавиконы для конкретных страниц

Если вам нужен больший контроль (и немного большее соответствие стандартам), вы можете указывать значки на странице за страницей. Чтобы использовать этот подход, сохраните файл .ico в любом месте вашего сайта, например, в папке images/. Затем добавьте на свою страницу следующий код:

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

При использовании этого подхода вам все равно потребуется загрузить запасной значок на адрес http://www.yourdomain.com/favicon.ico для ситуаций, когда кто-то просматривает или добавляет в закладки не-HTML-контент (например, PDF-файл). ).

Давайте рассмотрим: как это сделать, простой способ

1. Создайте изображение 16×16. Если вам нужна прозрачность, используйте формат PNG или GIF.
2. Преобразуйте свое изображение в формат .ico с помощью бесплатного сервиса, такого как favicon.cc.
3. Загрузить новый значок в http://www.yourdomain.com/favicon.ico . Для более точного управления используйте приведенный выше код, чтобы указывать значки избранного на постраничной основе.

Заключение

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

Я надеюсь, что это руководство рассеяло тайну этих маленьких значков и дало вам возможность добавлять их на свои сайты!

Есть мысли или комментарии? Видели ли вы юмористическую или креативную иконку во время просмотра веб-страниц? Пожалуйста, поделитесь в комментариях!

Спасибо Дайан Д. за предложение этой статьи — в качестве приза она получила подарочный сертификат Amazon на 15 долларов.

Favicon не отображается — как исправить в Chrome, WordPress и Shopify

23 ноябрь

23 ноябрь

Содержание

Краткое объяснение того, что такое Favicon

Как правильно установить фавиконку

Распространенные причины, по которым ваш фавикон не отображается

Синтаксические ошибки

Ваш браузер кэшировал ваш сайт как сайт без фавиконки

Неверный путь к файлу

Браузер не отображает фавиконки, если они local

Ссылка для создания значка находится в неправильном месте

Имя файла вашего значка по-прежнему является именем файла по умолчанию

Причины, по которым значок значка не отображается в Chrome, в частности

Неправильный размер значка

Имея файл значка в корневом каталоге, но не добавляя ссылку, которая «импортирует» его

Причины, по которым значок значка не отображается в Shopify, в частности неправильное расположение

Причины Фавикон не отображается конкретно в WordPress

В настройщике значок сайта предназначен для фавикона AMP

Возможно, плагин добавляет элементы тела в ваш

Вы не указали тип изображения, если это не . ico

Причины, по которым Favicon не отображается конкретно на Squarespace

Кэшированная версия еще не признана недействительной

Вы все еще вошли в CMS

Заключение

 

Краткое объяснение того, что такое фавикон

 

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

 

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

 

приводит к тому, что фавиконы не отображаются, и как исправить эти проблемы.

 

Как правильно установить фавиконки

 

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

 

• Загрузите файл favicon.ico в нужную директорию на вашем сайте.
• Вставьте этот код в раздел:

• «изображения» необходимо заменить на каталог, в котором хранится ваш значок.
• «favicon.ico» необходимо заменить на то, что вы назвали своим значком.
• Обратите внимание, что значением rel также может быть «icon», «apple-touch-icon» или «apple-touch-icon-precomposed»
• Значение href может быть относительным путем (где вы используете путь к файлу, в котором хранится значок значка) или абсолютным URL-адресом (где вы используете свой домен и добавляете файл значка в URL-адрес, как в https://abc. com/ favicon.ico)

 

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

 

Распространенные причины, по которым ваш фавикон не отображается

 

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

Синтаксические ошибки

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

 

Ваш браузер кэшировал ваш сайт как сайт без значка

 

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

 

В качестве альтернативы можно добавить /favicon.ico к вашему доменному имени, например www.abc.com/favicon.ico


Неверный путь к файлу

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

 

Если ваш CSS и значок являются родственными в том смысле, что они находятся на «одном уровне», убедитесь, что у вас нет косой черты перед именем файла фавикона, так как ваш адрес должен быть следующим:

 

href="favicon.ico"


Браузер не отображает значки избранного, если они являются локальными

Браузеры, такие как Chrome и Safari, не отображают значки избранного, если они являются локальными (они не были загружены на сервер) ). Chrome, например, может отображать значок только в том случае, если он находится в папке загрузок.


Ссылка для создания значка не находится в нужном месте

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


Имя файла вашего фавикона по-прежнему является именем файла по умолчанию

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

 

Давайте теперь сосредоточимся на том, почему значки не будут отображаться в Chrome, WordPress, Shopify, Wix и Squarespace:


Причины, по которым значок Favicon не отображается в Chrome, в частности

 

 

Вот причины, по которым ваш значок может не отображаться в Chrome:


Неправильный размер значка

Мы упоминали, что у Google есть особые рекомендации, которым необходимо следовать при добавлении значка на ваш сайт. Одно из них заключается в том, что размер значка должен быть кратен 48 и не может быть 16×16. Если размер вашего значка 16×16, он не будет отображаться.

 

Системы управления контентом (CMS) также имеют определенные рекомендуемые размеры. WordPress рекомендует 512 x 512 и Squarespace 300 x 300. Эти CMS могут изменять размер фавикона в соответствии с различными сценариями. Например, для закладок требуется больший размер, а для мобильных устройств может потребоваться меньший размер.

 

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

 

Наличие файла значка в корневом каталоге, но без добавления ссылки, которая его «импортирует»

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

 

ico" type="image/x-icon">

 

Это то, что импортирует фавикон на ваш сайт.


 

Причины, по которым ваш значок может не отображаться в Shopify

 

 

Вот причины, по которым ваш значок может не отображаться в Shopify:


Неправильная ссылка для импорта фавикона location

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

.

 

Посмотрите, как добавить фавиконку в ваш интернет-магазин Shopify

 

Причины, по которым фавикон не отображается в WordPress

 

Вот причины, по которым ваш фавикон может не отображаться в WordPress:

В Customizer, значок сайта предназначен для значка AMP

. Если вы используете Customizer для загрузки пользовательского значка favicon, он может не работать, поскольку он предназначен для страниц, использующих AMP. Чтобы решить эту проблему, вам нужно сначала удалить значок, который вы загрузили с помощью Customizer. Затем вам нужно установить плагин под названием «Favicon by RealFavicon Generator». Этот плагин позволяет вам загружать изображение, которое вы предпочитаете использовать в качестве фавикона. Он должен быть в формате png или jpg. Плагин поможет вам преобразовать его в .ico.

 

Может быть плагин, добавляющий элементы тела в ваш

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

Вы не указали тип изображения, если это не .ico

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

 

 

Вам также необходимо добавить файл . ico в корень сайта.

 

Узнайте, как добавить фавикон на сайт WordPress.

 

Причины, по которым Favicon не отображается конкретно на Squarespace

 

 

Вот причины, по которым ваш значок может не отображаться в Squarespace:

Кэшированная версия еще не признана недействительной

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

Вы все еще вошли в систему CMS

Если вы все еще вошли в систему CMS, возможно, на ней по-прежнему отображается значок Squarespace по умолчанию. Вам нужно выйти из CMS, чтобы увидеть свой собственный значок.

 

Заключение

 

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

No related posts.