Сервисы для Favicon
Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — это значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Как проверить свой Favicon на ошибки
- Какую фавиконку для вашего сайта видит Яндекс для моего сайта wiki.dieg.info. Перейдите по ссылке и укажите свой сайт.
Favicon для SEO
По большому счету Favicon в SEO продвижении имеет значение только для поиска в Яндексе, duckduckgo или других поисковых системах, которые выводят фавикон на странице поиска. Пример вывода на скриншоте:
В Google поиске фавиконка не выводится, потому большого смысла заморачиваться нет. Но все же если вы решили сделать свой Favicon придерживайтесь таких рекомендаций:
- Favicon – «иконка для избранного» повышает частоту выдачи и кликабельность сниппетов: боты Яндекса специально индексируют ее, чтобы проверить, насколько сайт оптимизирован.
- Наличие фавиконки влияет на узнаваемость бренда: читатель никогда не спутает любимый источник информации, стриминг или маркетплейс с прочими закладками в браузере.
- Прежде чем создавать свою фавиконку, изучите своих конкурентов в поисковой выдаче Яндекса и создавайте фавикон отличный от ваших конкурентов. Вы должны выделяться, потому что в выдаче поисковой системы человек сначала видит вашу фавикон, а потом уже читает заголовок. То есть у вас может быть прекрасная статья, продуманные заголовку, но вас не будут читать, потому что взгляд человека отвлекается на более притягательные фавикон ваших конкурентов.
Создать или найти Favicon онлайн
Где искать фавикон:
- Icon Search Engine - поиск иконок, есть качественные бесплатные иконки
Сервисы для создания Favicon: Я использую сервис Realfavicongenerator
Как создать и проверить фавикон вашего сайта в сервисе Realfavicongenerator
RealFavicon Generator - удобный сервис. Realfavicongenerator умеет проверять правильно ли установлены у вас фавиконы и для всех ли устройств они отображаются. Для этого достаточно указать ваш сайт и вы получите информацию как на скриншоте:
Инструкция по созданию фавикон в Realfavicongenerator:
- Чтобы создать в сервисе Realfavicongenerator фавикон достаточно загрузить свою картинку.
- На выходе вы получите архив с коллекцией своих фавикон и инструкцию по подключению.
- Распаковываете полученный архив в корень вашего сайта.
- Код HTML подключения Favicons в WordPress использование, настройка я подключаю при помощи плагина Clearfy Pro→страница "Код"→ Раздел "Код в <head>":
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
- На последнем этапе вы можете при помощи сервиса проверить правильность подключения ваших фавикон
Подключение Favicon
- Favicons для старых версий IE, для остальных браузеров и последних версий IE используйте PNG иконки и атрибут sizes.
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
- Favicons в устройствах Apple. Стандарт, предназначенный специально для продуктов фирмы Apple, таких как iPod, iPad, и iPhone. Для этих устройств вы можете использовать иконки размером 57×57 в формате PNG, ICO или GIF (с поддержкой прозрачного фона)и закруглённые углы. Для правильного отображения, укажите rel:
<link rel="apple-touch-icon" href="images/icon.png" />
📌 Для тестирования скриптов, установщиков VPN, Python ботов рекомендуем использовать надежные VPS на короткий срок. Если вам нужна помощь с более сложными задачами, вы можете найти фрилансера, который поможет с настройкой. Узнайте больше о быстрой аренде VPS для экспериментов и о фриланс-бирже для настройки VPS, WordPress. 📌
💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!
7 Самых Популярных Статей
- Как запустить скрипты и веб-приложения на Python
- Что такое страны TIER 1,2,3
- 7 способов сравнения файлов по содержимому в Windows или Linux
- Установка и тестирование веб-панели HestiaCP
- Китайский VPN Shadowsocks простая установка и настройка
- top, htop, atop определение загрузки ОС (Load average, LA)
- Использование rsync в примерах