Favicon gif не работает

Разработка анимированных фавиконов

Это — первое, что ищут взглядом, когда переключаются между вкладками браузера. Только что мы дали одно из возможных описаний того, что называется «фавиконом». Пространство на экране, которое занимает ярлык вкладки веб-страницы — это гораздо более ценный ресурс, чем многие думают. Если хорошо поработать с ярлыком, то он, помимо того, что будет продолжать играть роль идентификатора страницы, может стать чем-то вроде «доски объявлений», которая сообщает о том, что именно происходит на странице.

Фавикон

Фавиконы, на самом деле, особенно полезны в тех случаях, когда речь идёт о неактивных вкладках браузера. Рассмотрим пример.

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

Это — как раз тот случай, когда можно проявить креативность! Что если бы мы могли динамически менять пиксели, из которых состоит фавикон, и выводили бы на ярлык страницы сведения о процессе выгрузки файлов? Собственно говоря, именно этим мы здесь и займёмся.

В браузерах, которые это поддерживают, можно выводить некую анимацию в качестве фавикона с помощью JavaScript, HTML-элемента и древних правил геометрии.

Вот как выглядит анимация загрузки во вкладке браузера.

Сразу приступим к делу и начнём с самого простого. А именно — добавим в HTML-код страницы элементы
и :

При практическом использовании этой методики вам, вероятно, захочется скрыть элемент . Один из способов сделать это заключается в использовании HTML-атрибута hidden :

Я собираюсь оставить элемент видимым для того, чтобы мы могли бы наблюдать за тем, как анимация одновременно выводится и на фавиконе, и на элементе . И то и другое имеет размер стандартного фавикона — 32×32 пикселя.

Мы, в демонстрационных целях, добавим на страницу кнопку, щелчок по которой запускает анимацию. Добавим в HTML-код страницы следующее:

Теперь займёмся JavaScript-кодом. Сначала проверим поддержку canvas :

Далее — подключим обработчик событий нажатия на кнопку, который будет использоваться для запуска анимации в элементе :

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

В функции drawLoader мы будем рисовать линии, основываясь на том, сколько процентов шагов анимации уже выполнено. В нашем случае 1 шаг анимации соответствует 1%. А именно, в течение первых 25% шагов будет постепенно выводиться линия, представляющая собой верхнюю сторону квадрата. Следующие 25% шагов будет выводиться правая сторона квадрата, и так далее — по 25% времени анимации на каждую сторону.

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

Теперь займёмся вычислениями, которые помогут нам нарисовать нужные линии.

Вот какие данные используются для постепенного вывода верхней стороны квадрата в течение первых 25 шагов анимации:

• Начальная точка — левый верхний угол изображения (0,0).
• n — номер текущего шага анимации.
• x — координата x конечной точки линии на текущем шаге анимации.
• y — координата y конечной точки, которая равна 0.

Нам нужно, чтобы после завершения всех 25 шагов анимации значение x равнялось бы 32 (то есть — размеру фавикона и элемента ). Поэтому мы будем искать значение x на текущем шаге анимации n по следующей формуле:

Вот как выглядит код для рисования линии, в котором реализованы эти рассуждения:

Следующие 25 шагов анимации (рисование правой стороны квадрата) выполняются похожим образом:

А вот — полный код функции drawLoader :

Итоги

Вот и всё! Код для создания прямоугольного индикатора загрузки, разработкой которого мы тут занимались, можно найти в этом репозитории. А вот — репозиторий с кодом кругового индикатора загрузки. На самом деле, вы, в качестве подобного индикатора, может использовать любую фигуру. А если вы поработаете с атрибутом fill элемента — это позволит вам добиться интересных эффектов.

Уважаемые читатели! Есть ли среди ваших проектов такие, в которых пригодились бы анимированные фавиконы?

Источник

Создание анимированной favicon (фавиконки) сайта

Для придания сайту индивидуальности, дополнительной привлекательности и для того, чтобы удержать посетителя на сайте многие вебмастера идут на всякие уловки, которые насильно удерживают пользователя от того, чтобы он не мог закрыть вкладку браузера. Я считаю, что это не правильно и нашёл способ, как выполнить все условия, приведённые выше без насильственных действий по отношению к пользователю, зашедшему на сайт. Всего этого можно добиться добавив динамичности в саму вкладку браузера, выделив её в ряду прочих анимационными эффектами. Обычно в браузера у пользователя открыто не меньше 3-4-х вкладок (у некоторых это количество достигает пары десятков). Если при этом вкладка с вашим сайтом будет слегка мерцать и поблёскивать, это вызовет у пользователя непреодолимое желание вернуться к её просмотру. Но всё хорошо в меру — слишком навязчивая анимация закончится тем, что пользователь закроет вашу страницу!

Как сделать анимированную favicon (фавиконку) сайта

Мысль о том, что можно сделать анимированную фавиконку сайта мне пришла в голову после игры в XCraft. Там тоже про ракеты, как и у меня на сайте. И я решил прикрутить мерцающее пламя в выхлопе ракеты. Важным условием было то, что настроенные ранее favicon для всех платформ не должны слетать и поисковые роботы должны однозначно получать единственную и неповторимую фавиконку в свою поисковую базу. Поэтому я даже не стал рассматривать вариант установки анимированной gif-фавиконки (хотя некоторые авторы предлагают остановиться именно на этом варианте). Я пошёл по другому пути, решив, что правильно будет после загрузки страницы менять имя файла в соответствующем теге HTML страницы. HTML-тег, отвечающий за отображение фавиконки следующий:

Может быть ещё использован тег:

но это уже не обязательно.

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

Код на JavaScript, позволяющий сделать анимированную favicon (фавиконку) сайта

Собственно сам скрипт:

Собственно и всё!

1. Вначале создаём и выкладываем картинки, которые будут кадрами для анимации favicon (этот путь используется в строке 14). Нумерация файлов должна быть в виде простой арифметической прогрессии от 1 с шагом 1. Это позволит упростить скрипт.
2. Первые две строчки — это инициализация счётчика и задание количества кадров (должно соответсвовать кол-ву картинок п.1 + 1)
3. В третьей строчке получаем массив всех элементов HTML-документа, имеющих имя link
4. Далее создаём функцию, отвечающую за анимацию фавиконки (смену кадров):
   1. в цикле (стр.8-14) обходим весь массив, сформированный в п.2
      1. в стр.10 проверяем соответствие аттрибута rel на условие icon или shortcut icon
      2. если условие соблюдено, значит это HTML-тег фавиконки и в нём нужно поменять картинку на следующую (стр.12)
5. Условие в стр.15-19 служит для зацикливания анимации:
   1. в стр.16 устанавливаем время паузы до смены следующего кадра (в миллисекундах)
   2. в стр.17 увеличиваем счётчик на 1, чтобы взять следующую картинку кадра
   3. в стр.18 проверяем: если картинка была последняя, возвращаем счётчик в исходное состояние к первому кадру
6. Функция готова, осталось только её инициировать для запуска в браузере. Это и происходит в вызове функции в стр.22

Пример, того, как можно сделать анимированную фавиконку (favicon) сайта

Посмотреть то, как всё это работает можно посмотреть во вкладке браузера (я конечно сразу всё это реализовал у себя на сайте) + более навороченная анимация по → этой ссылке.

Теперь вообще всё должно быть просто и понятно. Кому лень самому возиться, можете заказать у меня анимацию фавиконки. Ценник — от 500 руб. Подробности по → этой ссылке. Мои контакты можно посмотреть на → этой странице.

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

Важным моментом, который стоит сразу уточнить, что всё это работает во всех браузерах на движке Chromium и в FireFox на десктопах. В браузерах от microsoft не работает. В Safari нет возможности проверить.

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

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

Источник

HTML favicon не будет отображаться в google chrome

Я создаю неопубликованную HTML-страницу . Одна из вещей, которые я хотел сделать, это добавить значок появится рядом с названием. Я использую google chrome, и я заметил, что на других сайтах есть значки, которые появляются рядом с плиткой в браузере, но тот, который я пытаюсь отобразить, не отображается. Сайт в папке на моем рабочем столе с именем site. Это код:

12 ответов

так как у вас есть ведущий / в теге href, ссылка на файл будет в корневой папке. Если у вас есть страница в папке на вашем компьютере, не обслуживая ее с локального веб-сервера, ведущий / сообщит браузеру, чтобы посмотреть в корневой папке вашей файловой системы. Так что браузер ожидает файл в C:/favicon.ico или подобное, что, вероятно, не то, что вы ожидали.

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

обновление:

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

обновление 2:

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

распространенная проблема, когда favicon не будет отображаться, когда ожидается кэш, если ваш .htaccess для примера читает: ExpiresByType image/x-icon «access plus 1 month»

затем просто добавьте случайное значение в ссылку favicon:

работает каждый раз для меня даже с тяжелыми кэширования.

Я обнаружил, что (в Chrome 56, OSX) состояние favicon, похоже, кэшируется на время жизни браузера, поэтому, если favicon не загружается, это не будет до после перезапуска Chrome. Похоже, что он не отображается на вкладке «приложение» в dev tools и не очищается жесткой перезагрузкой или «Очистить данные сайта».

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

вы захотите полностью стереть кэш favicon:

закройте все запущенные процессы Chrome.

удалить Favicons файл в папке пользовательских данных. Например:

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

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

1) Очистите Чач. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582 и проверьте другой браузер, скажем safari. Как вы импортировали favicon?

2) Как вы должны добавить это:

3) Еще одна вещь может быть проблема, что chrome не может отображать фавиконок, если это местное (не загружен в web-сервер.)

4) Попробуйте переименовать его из favicon. to . но я бы предложил вам по-прежнему иметь нормальный favicon. Это решило мою проблему в IE.

5) нашли другое решение для этого, которое отлично! Я просто добавил свой favicon как кодированное изображение Base64 непосредственно внутри тега следующим образом:

Не похоже, что Chrome позволяет отображать favicon в адресной строке.

Я также видел, как это сделано, как это. Не знаю, будет ли это иметь значение или нет.

ваш html полностью неверен для начала, не должно быть div в вашем разделе головы, ни после вашего раздела тела. Я предлагаю вам сначала изучить правильный html, прежде чем начать работать с favicons и т. д.

этот трюк работает: добавьте этот скрипт в заголовок или masterPage, например

и будет кэшироваться. Это не оптимально, но работает.

Источник

Почему в хроме не отображается фавикон?

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

Я бы в ico добавила 16х16

Если меняли недавно, то поисковики могли и не успеть переиндексировать. Иконки обновляются не часто.

1. Не факт что ваш плагин работает корректно. Вы для начала зайдите и проверьте — ваш плагин сам прописал эту строку или нет. Если строки с иконкой нет — удалите его нахрен.
2. Лучше вручную прописать, так будет 100% уверенность в том, что с сайтом все ок.
3. Поисковики тоже имеют кеш.

Итог:
Прописать ручками, ждать новой индексации.

Y-3, Выдыхайте. Ваш плагин работу свою сделал — иконка показывается у сайте, однако не факт что плагин сделал это корректно.

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

Y-3, Причем тут ios или майкрософт?!
Фавикнока и в жопе у енота фавиконка))
И прописывается она единственным способом. Разве что с разными параметрами. И понимают этот способ все платформы.

html — это база. Его понимают все. Тем более такую примитивную вещь иконку сайте.
Так что вы что-то загоняетесь на пустом месте.. Тем более вопрос был вообще не в этом.
Ответ был дан выше. Иконка у вас на сайте есть. Подождите новую индексацию поисковиками или запросите ее сами. Если не поможет — пропишите код что выше руками. Он будет работать даже на тапке вашей бабушки.

Источник