Сервисы для Favicon
Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — это значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Как проверить свой Favicon на ошибки
Какую фавиконку для вашего сайта видит Яндекс для моего сайта wiki.dieg.info. Перейдите по ссылке и укажите свой сайт.
Favicon для SEO
По большому счету Favicon в SEO продвижении имеет значение только для поиска в Яндексе, Обзор ПС DuckDuckGo и SEO продвижение сайтов или других поисковых системах, которые выводят фавикон на странице поиска. Пример вывода на скриншоте:
В Google поиске фавиконка не выводится, потому большого смысла заморачиваться нет. Но все же если вы решили сделать свой Favicon придерживайтесь таких рекомендаций:
Favicon – «иконка для избранного» повышает частоту выдачи и кликабельность сниппетов: боты Яндекса специально индексируют ее, чтобы проверить, насколько сайт оптимизирован.
Наличие фавиконки влияет на узнаваемость бренда: читатель никогда не спутает любимый источник информации, стриминг или маркетплейс с прочими закладками в браузере.
Прежде чем создавать свою фавиконку, изучите своих конкурентов в поисковой выдаче Яндекса и создавайте фавикон отличный от ваших конкурентов. Вы должны выделяться, потому что в выдаче поисковой системы человек сначала видит вашу фавикон, а потом уже читает заголовок. То есть у вас может быть прекрасная статья, продуманные заголовку, но вас не будут читать, потому что взгляд человека отвлекается на более притягательные фавикон ваших конкурентов.
Создать или найти Favicon онлайн
Некоторые делают фавикон в нескольких размерах, чтобы он адекватно отображался в десктопных и мобильных браузерах. В самом простом случае делайте фавикон 32×32 пикселя и не забивайте себе голову.
Где искать фавикон:
Icon Search Engine — поиск иконок, есть качественные бесплатные иконки
Сервисы для создания Favicon: Я использую сервис Realfavicongenerator
Как создать и проверить фавикон вашего сайта в сервисе Realfavicongenerator
RealFavicon Generator — удобный сервис. Realfavicongenerator умеет проверять правильно ли установлены у вас фавиконы и для всех ли устройств они отображаются. Для этого достаточно указать ваш сайт и вы получите информацию как на скриншоте:
Инструкция по созданию фавикон в Realfavicongenerator:
Чтобы создать в сервисе Realfavicongenerator фавикон достаточно загрузить свою картинку.
На выходе вы получите архив с коллекцией своих фавикон и инструкцию по подключению.
Распаковываете полученный архив в корень вашего сайта.
Код HTML подключения Favicons в WordPress использование, настройка я подключаю при помощи плагина Clearfy Pro→страница «Код»→ Раздел «Код в «:
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" />
Favicon checker
Is your favicon perfect? Let us give a look. We check more than a dozen settings to make sure it fits all major platforms. Here are a few questions you may have:
- Is my favicon.ico correct? This simple question often raises surprising answers.
- Does my favicon look good on iOS?
- Does my favicon look good on an iPhone 6? (yep, the iPhone 6 is more demanding than previous generations)
- I have a favicon.png . This is fine, right?
- I heard about Windows Surface. Do I have something to do about it?
Wonder no more and do a quick check!
403 ERROR
Request blocked. We can’t connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront) Request ID: hMz67LxG8Xn5JSVlVRtTeAcDnLMkJM_Xauc7rMULLjX-JACt_Vw_7w==
Favicon Cheker
Он показывает вашу фавиконку сразу в Chrome, Firefox, Safari, включая родные тёмные темы.
Поделиться
Обсуждение
Похожее
Плагин UberData — реальные данные в макетах в Фотошопе
Антон Любушкин выпустил ещё один классный плагин, который помогает быстро и удобно заполнять макеты реальными данными. Смотрите видео. «UberData умеет вставлять данные из публичных JSON API, новостных RSS-лент, JSON-файлов, текстовых файлов и папок с изображениями. В ближайших версиях UberData станет умнее, научится работать с таблицами CSV, Excel, Google Sheets, а может и ещё чему-нибудь полезному». […]
Screen Sizes — онлайн-шпаргалка по параметрам экранов почти всех мобильных устройств Apple
Содержит информацию по айфонам, айпадам, айподам, часам и эппл-тв
Cargo — nocode-платформа для создания сайтов со множеством шаблонов в брутальной стилистике
Можно создать и полностью свой дизайн.