Фавикон где находится. Как добавить favicon для портативных устройств

Фавикон – английское слово favicon, переводится «значок для избранного» (сокращено от FAVorites ICON), логотип сайта и одна из главных частей веб-страницы, графическая картинка с форматами 16х16 или 32х32 пикселей (размер должен быть кратким восьми). Для фавикона используют формат 16х16, другие размеры не будут выдаваться браузерами. Отображается в верхней строчке браузера, вблизи с адресом сайта. Если иконку не установить или сделать его не правильно, то в окне браузера будет виден не логотип сайта, а иконка используемого браузера.

Зачем нужен favicon?

Этот рисунок нужен не для «украшения» браузера. Наличие или отсутствие faviconа на веб-странице, учитывается Яндрексом поведенческим фактором ранжирования. Все фавиконы показываются поисковыми системами, и сайт выглядит более привлекательно в посиковой выдаче.

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

Каким должен быть фавикон и где должен находиться?

Для хорошего сайта фавикон обязательно должен быть установлен в обязательном порядке. Он делается в формате ICO — это расширение поддерживается всеми браузерами. Картинку можете сделать самостоятельно, взяв за основу любую фотографию или изображение. Можно пользоваться графическим редактором, можно выбрать подходящий вариант на любом из множества онлайн-сервисов. А проще всего, выбрать уже готовый, набрав в поисковой строке «коллекция фавикон».

Обратите внимание: изображение должно быть названо favicon.ico. В коллекциях очень часто предлагают варианты с расширением gif, поэтому скачивайте картинку и обработайте ее в специальной программе Snagit – наведите курсор на изображение, нажмите правой кнопкой на мышь, откройте с помощью приложения Snagit и сохранить картинку как — выбирайте расширение ico.

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

Как добавить фавикон на сайт?

Добавить favicon на сайт можно 2-мя способами:
1. Сохраненную картинку с ico расширением и размером 16х16 пикселей, переназовите на favicon.ico.
2. Загрузите иконку в основную папку domains/ваш сайт/public_html/ или в панель управления хостингом.

На некоторых сайтах, для завершения установки фавикона, нужно вписать код html в файл заголовка (header.php), между тегамии.

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

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

Начнем с определения. Фавикон представляет собой маленькую картинку (размером 16х16 или 32х32). В большинстве случаев это уменьшенная копия логотипа сайта, либо первая буква его названия, либо первые две буквы из названия, либо аббревиатура из названия, либо картинка, отражающая тематику сайта или суть бизнеса.

Где отображаются фавиконы? Очень просто:

1. во вкладках браузера;

1. в поисковой выдаче;

1. на панели закладок браузера.

Фавикон выполняет следующие функции:

• Брендинг.
• Облегчает идентификацию сайта пользователем (картинку всегда легче запомнить, чем адрес сайта).
• Придает солидности сайту.

Теперь давайте остановимся на том, что именно даёт использование фавиконок.

Узнаваемость бренда

По предыдущему скриншоту Вы уже и сами догадались, что пользователь с гораздо большей вероятностью выберет сайт с уже знакомой фавиконкой, даже если он находится внизу ТОП-10. Примерно та же история и с историей браузера. Например, пользователь запомнил фавиконку Вашего сайта, но забыл по какому запросу к Вам попал. Что делать? Правильно - идти смотреть историю браузера и листать ее до тех пор, пока на глаза не попадется та самая фавиконка. На данный момент самые узнаваемые в мире фавиконы у Яндекса, Google, Facebook, ВКонтакте, Одноклассники и Telegram. Если же у сайта нет фавикона, то его не будет и в поисковой выдаче, а в истории браузера вместо него будет «пустой лист».

Многие пользователи судят о продавцах (и тех, кто оказывает услуги) не только на основании предоставленной на сайте информации, но и на основании того, как этот сайт вообще оформлен. И такая мелочь, как отсутствие фавикона, может неплохо ударить по доверию со стороны пользователя, особенно в тех случаях, когда пользователь выбирает между несколькими интернет-магазинами (или фирмами по оказанию интересующих пользователя услуг).

Повторные посещения

Как Вы уже знаете, людям гораздо «теплее» относятся к картинкам, нежели к тексту. А теперь представьте, что посетитель куда-то торопится. Что он делает? Правильно - добавляет сайт в закладки, чтобы не потерять. Затем, когда у пользователя появляется свободное время, он принимает решение вернуться на сайт и… В закладках Ваш сайт будет найден не столько по заголовку статьи, сколько по новой/запомнившейся фавиконке. Если фавиконки нет, то пользователь может подумать, что ссылка битая и удалит ее из закладок.

Именно поэтому фавикон должен быть заметным и узнаваемым. Самые яркие примеры:

• буква G, являющаяся фавиконкой поисковой системы Google;

• ядовито-красная буква Я, являющаяся фавиконкой поисковой системы Яндекс;

Экономя время пользователя

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

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

Обратите внимание, что мир смартфонов не стоит на месте - когда-то смартфон с экраном 640х360 пикселей считался роскошью, а сегодня и экраном в 1920х1080 пикселей (при той же диагонали) уже никого не удивишь. Из этого можно сделать только один вывод - под разное разрешение экрана необходимо делать разные фавиконы (а если точнее - разного размера.

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

Преимущества для SEO

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

Обратите внимание, в данном контексте речь идет о поисковой выдаче Яндекса, т.к. в Google фавиконы в выдаче не отображаются. Это очень важный момент, т.к. Яндекс является самой популярной в России поисковой системой и именно ей пользуется большинство русскоязычных пользователей.

Более того, у Яндекса есть даже свой собственный робот, который не занимается ничем, кроме индексирования фавиконок (к слову - сроки индексирования - от 1 недели до 1 месяца).

Как проверить, проиндексировалась ли Ваша фавиконка, или нет:

1. заходим в Яндекс, вводим адрес сайта, а затем смотрим поисковую выдачу. Если фавиконка проиндексировалась - она будет и в выдаче;
2. проверить наличие файла favicon.ico через Яндекс.Вебмастер.

Оба способа являются элементарными и не отнимают более 15 секунд.

Ну и, раз уж сказали про Яндекс, скажем и про Google. Здесь Вы уже и сами догадались, что в поисковой выдаче Google фавиконы не отображаются. А вот теперь самое интересное. В сторону Google по этому поводу уже давно летят тапки, причем от простых пользователей. Да-да, не от нас - SEO-шников, а именно от Вас - от простых людей, которые к поисковой оптимизации сайтов не имеют ни малейшего отношения, которые совершают покупки, гуляют по различным сайтам и т.д.

И не надо сейчас говорить, что «может они вообще не в курсе проблемы?» - еще как в курсе! Во-первых, они открыто признали эту ошибку. Во-вторых, они прямым текстом сказали, что «нет, мы не будем это исправлять». В-третьих, именно с их подачи для Mozilla FireFox был выпущен плагин, который автоматически подгружал фавиконки сайтов в поисковую выдачу. Плагин так и называется - Google Favicon. В-четвертых, это было еще в далёком 2012 году. И с тех пор Google так и не добавил фавиконы в поисковую выдачу.

Ну и еще пару слов про плагин Google Favicon. Даже не пытайтесь его искать и устанавливать в Ваш FireFox, т.к. он слишком давно не обновлялся, а потому не совместим с последними версиями браузера FireFox. Однако, можно найти аналогичные ему плагины.

Кстати, во многих других поисковых системах фавиконы тоже не добавлены в поисковую выдачу.

Фавиконы в браузерах ПК и на смартфонах

Секундой ранее мы уже упоминали, что фавиконы не отображаются в поисковой выдаче поисковых систем (за исключением, разве что, Яндекса). Однако, про браузеры такого сказать нельзя, причем это касается как мобильных браузеров, так и браузеров для ПК.

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

И несмотря на то что Google Chrome, Mozilla ForeFox, Opera (начиная с 7 версии) и Apple Safari (начиная с 4 версии) уже давно имеют поддержку фавиконок в.png-формате, предпочтение всё равно отдается именно.ico-формату. Отдается настолько, что если на один и тот же сайт загрузить две фавиконки в обоих форматах, то предпочтение будет отдано именно.ico-формату.

Как сделать фавикон для сайта

Способ 1: воспользоваться одним из специальных онлайн-сервисов, благо их, мягко говоря, много:

• FaviconGenerator — позволяет преобразовать картинки из png, jpeg, jpg, gif в фавиконку в нужном Вам формате.
• AntiFavicon — интересен тем, что позволяет создать фавикон с надписью. Т.е. в поля «Top text» и «Bottom tex» вводится текст, а в области «Colors» задаётся нужная цветовая гамма.
• FavIcon from Pics — предельно прост - загружаете в него желаемую картинку, а на выходе получаете фавиконку.
• Iconj — основная фишка в том, что Ваша фавиконка будет храниться на данном сервисе пожизненно. Т.е. Вы загружаете на сервис картинку, конвертируете ее в фавиконку, а затем получаете, во-первых, возможность ее скачать, а во-вторых, ссылку на скачивание (если на данный момент не можете или не хотите ничего скачивать).
• DeGraeve — один из самых мощных фавикон-генераторов. Можно сделать фавиконку «с нуля», либо загрузить уже готовое изображение, внести поправки, а затем скачать в.ico-формате.
• Generator — почти полный аналог предыдущему.

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

Но что делать, когда фавиконку все-таки хочется, а разрабатывать что-то своё нет времени/желания/возможности? Очень просто - существуют огромные библиотеки готовых решений. Скачиваете любую, в Фотошопе (в крайнем случае - в Paint’е) меняете размер до 16х16, сохраняете с.ico или.png, даёте файлу имя favicon и готово! Если ни одна из них не устроит - ничего страшного. Главное - помните, что для придумывания фавиконки много ума не требуется. И сразу же несколько конкретных примеров.

Очевидно, что на создание такой фавиконки ушло секунд 5-10, не больше.

Пример 2 - блог Comp Security. Здесь всё еще проще, т.к. на фавиконке нарисована просто красная стрелочка.

Пример 3 - блог СтоКрат. Как видите у нас с MegaIndex’ом только одно принципиальное отличие - у них фавиконка квадратная, а у нас - овальная.

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

Способ 2 - нарисовать самостоятельно по принципу «инициалов сайта».

Шаг 1. Открываем Paint, нажимаем на «Изменить размер». В открывшемся окне снимаем галочку «Сохранять пропорции» и выставляем размер. Неважно какой, главное - чтобы в итоге получился квадрат.

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

Шаг 3. Выбираете инструмент «Надпись» и пишете на фавиконке «инициалы» сайта. При необходимости можно изменить как сам шрифт, так и его размеры, а также сделать «инициалы» подчеркнутыми, наклонными и/или жирными.

В нашем случае в качестве «инициалов» будет выступать два знака доллара.

В данном случае совсем необязательно сохранять в.png, т.к. файл все равно надо будет конвертировать в.ico.

Шаг 5. Для конвертирования воспользуемся сервисом http://pr-cy.ru/favicon/ - загружаем картинку, обрабатываем, скачиваем готовую иконку.

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

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

Способ 3 - воспользоваться сервисами, имеющие встроенные инструменты рисования, с возможностью загружать изображения с ПК, редактирования и уменьшения до нужных размеров.

Трёх примеров будет более, чем достаточно (ибо их тоже овер как много):

1. Favicon.ru - если коротко, то с помощью данного сервиса можно проделать всё то, о чем было рассказано в способе 2.
2. Favicon-generator.org - позволяет редактировать уже ранее созданные кем-то иконки.
3. Logaster.ru — вообще-то он предназначен для того, чтоб генерировать логотипы, но зато в пару к логотипу генерирует и фавиконки. Имейте в виду, сервис платный.

Способ 4 - фавикон-гаререи.

То же самое - всех перечислять не будем, т.к. их очень и очень много.

Thefavicongallery- более 300 фавиконок, которые можно сразу же скачивать;

Audit4web - огромное количество фавиконок на различные тематики;

Iconj- более 3000 фавиконок.

Способ 5 - заказать у дизайнера. Дорого, но зато престижно и красиво.

Способ 6 - аналогичен способу 2, но с использованием гораздо более крутых и продвинутых графических редакторов (например, Photoshop). Такой способ потребует достаточно много времени, но и результат будет не таким простым, как во втором способе.

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

Как установить фавикон на сайт

Для начала стоит отметить, что если Вы воспользовались способом 7, то данный вопрос Вас волновать не должен, ибо плагин на то и плагин, чтоб избавлять владельца сайта от подобных задач.

Если же речь идет о ручной загрузке фавиконки, то тут все несколько сложнее.

Во-первых, имя файла должно быть favicon.ico или favicon.png. Этот файл нужно загрузить в корневой каталог Вашего сайта (как правило, это папка htdocs или public_htm). Затем заходите на Ваш сайт и смотрите, загрузилась фавиконка или нет. Если нет - попробуйте очистить кэш браузера. Если даже после очистки нет результата - ничего страшного.

Во-вторых, на некоторых сайтах место для фавиконки по умолчанию задано в другом месте. В этом случае заходим на сайт, правый клик - выбор пункта «Просмотр html-кода», либо «Просмотр кода страницы» (ну или что-то подобное, в разных браузерах по-разному).

Не исключен и такой вариант задания служебной гиперссылки link:

Итак, путь, куда нужно загружать фавиконку, мы вычислили - туда и загружаем. Теперь это должно сработать на все 100%. Загружать можно по-разному:

• через админку хостинг-провайдера;
• с помощью Total Commander’а по FTP;
• через файловый менеджер самого движка (если есть).

В случае с CMS Joomla фавиконка, как правило, живёт в папке с активированным на данный момент шаблоном оформления. Исключение - Joomla 1.5 - там путь прописывался в файле index.php, находящийся в папке с тем же шаблоном. Т.е. в случае с Джумлой потребуется пройти по адресу /templates/папка_с_используемым_шаблоном_оформления/favicon.ico и заменить имеющуюся там фавиконку.

Аналогичная ситуация бывает и с WordPress-сайтами, но это редкость:

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

Однако, есть и другой вариант - загружаете фавиконку куда угодно, а затем между тегами прописываете код, в котором указывается путь к фавиконке:

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

В каком именно файле содержатся теги - напрямую зависит от используемого Вами движка.

Например, в WordPress это файл header.php, располагающийся в папке с активной темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Файл header.php можно отредактировать как через FTP, так и через штатный редактор WordPress, так и через админку хостинг-провайдера.

Установка анимированной фавиконки

Принципиальных отличий между установкой статичной и анимированной фавиконки нет, за исключением двух моментов:

• фавиконка должна быть в gif-формате (это специальный формат для анимации изображений);
• между и прописывается другой код:

Однако, стоит отметить, что анимированная фавиконка - это не так козырно, как кажется на первый взгляд:

• во-первых, никаких анимаций в поисковой выдаче не будет - Яндекс преобразует gif-анимацию в статичный png, и Вам останется только молиться, чтоб Яндекс для этих целей взял правильный кадр;
• во-вторых, анимированная фавиконка будет работать только в FireFox’е.

Именно по этим двум причинам с анимированными фавиконками пока что нет смысла заморачиваться. Если только «на будущее».

Выводы

Итак, что же мы выяснили?

1. фавиконка может сыграть большую роль в идентификации сайта;
2. именно фавиконка зачастую позволяет запомнить сайт;
3. фавиконка значительно упрощает поиск конкретного сайта в закладках, истории браузера и в поисковой выдаче Яндекса;
4. фавиконку можно без проблем создать «дома на коленке»;
5. существует крайне много сервисов по созданию, редактированию и выбору уже готовых фавиконок.

Интернет перестраивается под мобильные сети, браузеры получают новые возможности – всё это привело к тому, что на сегодняшний день понятие favicon значительно расширилось. В этом материале мы рассмотрим все новшества и преимущества, которые даёт создание и установка иконки для вашего сайта.

Стандартный способ

Современные браузеры сами ищут favicon, поэтому иногда можно обойтись даже без html-кода. Достаточно загрузить favicon.icoв корень сайта, чтобы она была доступна по адресу https://вашсайт/favicon.ico

Но для надёжности в код сайта можно добавить такой тег (между )

Это – традиционный способ, который отвечает за вывод иконки во вкладке браузера и в результатах поиска Яндекс.

Расширенный favicon

Но возможности иконки сайта сегодня используются в гораздо большем количестве мест:

Генератор favicon

Большую часть можно сделать при помощи всего одного онлайн-генератора иконок — https://realfavicongenerator.net

Минимально допустимое изображение для загрузки – 70×70 пикселей, но если вы хотите задействовать его для всех возможных случаев, то загружайте размером свыше 256×256.

После, вы сможете посмотреть, как будет выглядеть ваш favicon в iOS, Android и плиточном Windows 8, а заодно изменить настройки для каждого случая: задать индивидуальное изображение, изменить цвет фона, масштабировать иконку.

В опциях оставьте всё, как есть: по умолчанию генератор создаст картинки, которые нужно будет поместить именно в корень сайта (обычно на хостингах корнем сайта называются директории /home/, /www/, /public_html/).

Во вкладке «Compression» можно уменьшить вес иконок (сжатие происходит в районе 20-80%, в зависимости от качества).

Нажимаем Generate и получаем на выходе архив, содержимое которого загружаем в уже названное выше место, и код, который вставляем в сайта.

После добавления их на сайт, можно проверить работоспособность тем же сервисом .

Картинка в социальных сетях

Работают по схожему принципу, но главная загвоздка в том, что если вы используете CMS, то можете поискать плагины, которые автоматически будут отдавать к каждой статье её уникальное превью-изображение (если оно есть). А вот если CMS нет, или к ней нет подходящего плагина, то придётся использовать одну картинку-заглушку для всех записей.

WordPress и Facebook (использование превью к записям)

Если используете плагин WordPressSEObyYoast, то достаточно зайти в раздел «Социальные сети» → «Facebook» и активировать пункт «Добавить Open Graph».

Во всех остальных случаях делаем следующее:

1. Открываем файл header.php вашей темы.
2. Самый первый тег меняем на
3. В секции head вставляем код:

$dom = simplexml_load_string(get_the_post_thumbnail());
$src = $dom->attributes()->src;
echo "content="".$src.""";
?>/>

WordPress и ВКонтакте

В functions.phpдобавьте функцию:

function vk_meta() {
if (has_post_thumbnail())
{
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(600,600));
$url = $thumb["0"];
echo "" . "\n";
}
}
add_action("wp_head", "vk_meta");

Общее изображение для всех материалов

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

Чтобы социалки «подцепили» картинку, добавьте в head-секцию следующий код:

Принимаются форматы.jpg и.png.

Заключение

Нужен ли вам только стандартный favicon или же вы намерены использовать его преимущества по максимуму, если у вас уже есть готовый логотип, то его превращение в пиктограмму для сайта – дело пары минут. За это спасибо онлайн-генераторам. В итоге, добавление нескольких строчек кода, и заливка пары файлов – вот и всё, что потребуется.

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

Поэтому, если вас интересует вопрос «как добавить favicon на свой сайт wordpress?» по всем правилам, присаживайтесь и повторяйте.

Все шаги я подробно прописала.

Фавиконка – это маленькая иконочка, которая отображается, в заголовке на вкладке браузера и в поисковой выдаче (с задержкой по времени!) рядом с названием вашей статьи. Если вдруг после добавления иконки на сайт она не отображается, не спешите расстраиваться, в этой статье я напишу о причинах.

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

Давайте перейдем в сервис и создадим фавиконку. Итак, как только вы перешли, нам необходимо сделать следующие настройки.

А именно, ставим точку напротив «Generate only 16×16 favicon.ico». После этого нажимаем «Обзор» и выбираем файл, который вы приготовили. Далее нажимаем на кнопку «Greate Favicon».

Наш фавикон сгенерирован. Давайте его скачаем, ссылка показана на скрине, а также скопируем код, который предоставил нам сервис.

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

Закачаем туда favicon и откроем файл header.php для редактирования. Далее между тегами …… вставляем сгенерированный код. Но это еще не всё. Для того, чтобы фавиконка корректно отображалась, нам надо вставить одну php-функцию в данный путь.

Скопируйте эту функцию: и, вернувшись в файл, header.php вставьте эту функцию. Обратите внимание, что ее необходимо вставить до кавычек и перед слеш:
/favicon.ico» type=»image/x-ic on»>

А теперь любуемся полученным результатом, предварительно введя имя сайта в браузере. Наша картинка появилась рядом с адресом сайта.

Чтобы фавиконка отображалась в результате поиска должно пройти некоторое время. Придется подождать пока поисковые роботы проиндексируют ваш сайт.

Создаем фавиконку в Фотошопе

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

На первом шаге создайте новый слой размером 16 пикселей в длину и ширину. Большое количество картинок в формате png можно найти в интернете, а лучше нарисовать свою — уникальную. Найденную картинку разместите поверх созданного слоя, а на нижний слой можно наложить текстуру, градиент или просто залить цветом так, чтобы он не выпадал из общей цветовой гаммы дизайна блога.


Стоит ли в ставить свою фотографию в качестве иконки?

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

Какие еще существуют способы?

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

Во время написания для вас этой статьи на мой почтовый ящик поступило письмо. Сейчас я его скопирую и покажу вам. А содержание такое: «На данный момент сколько вы зарабатывает имя свой сайт?)
и как я понял он у вас не один) Вот я хочу сайт но я не знаю какой создавать((с партнерскими программами уже ознакомился и думаю для начало создать игровой блог подскажите как это сделать что бы не прогореть)».

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

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

Обратите внимание на мою статью по составлению , а лучше (если вы в самом начале своего пути) о . Пусть даже у вас блог об играх, вам никто не запрещает зарегистрировать ся в СПА партнерках. У меня есть готовый перечень таких партнерских программ на этой .
Все самое важное по теме я вам дала, а теперь, по традиции, анекдот для настроения и оптимизма! .

Анекдот.
— Ты какую фавиконку для блога выбрал?
— Таракана!
— С ума сошел что-ли? Отпугивать же будет посетителей!
— Ты что, наоборот, привлекать ! Они их так давно не видели!

Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.

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

Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных) , стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.

• Формат ICO
• Файл favicon.ico
• BugFix для Internet Explorer
• Фавикон в HTML5
• Фавикон для Apple
• Фавикон для Android
• Адрес файла favicon.ico

Формат ICO

А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP . Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.

Файл favicon.ico

Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav - сокращённо от favorite - избранное, а icon - значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант установки фавикон на сайт имеет следующий вид:

Обратите внимание на то, что в приведённом примере используется два отношения: shortcut (с англ. ярлык ) и icon (с англ. иконка ). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon .

image/vnd.microsoft.icon vs image/x-icon?

Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon . Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon .

BugFix для Internet Explorer

Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:

Другие графические форматы фавикон

Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF , их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5) , а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:

Обращаю внимание на то, что для APNG использует MIME-тип video/png , а для GIF (даже анимированного) - image/gif . Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml .

Фавикон в HTML5

Теперь, что касается формата favicon в HTML5 , подробней читайте . Интересным здесь является атрибут sizes , который задаёт размер иконок для визуально отображения в формате:

{ширина1} x{высота1} [{ширинаN} x{высотаN} ] | any

Другими словами, можно перечислить соответствующие размеры через пробел или указать значение any (для всех) . В документации HTML5 приводится такой пример:

Favicon.ico для мобильных браузеров

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

Фавикон для Apple

Если атрибут sizes не указан, используется значение по умолчанию 57x57 .

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

• apple-touch-icon-57×57.png
• apple-touch-icon-72×72.png
• apple-touch-icon-114×114.png
• apple-touch-icon-144×144.png

Если же Вы хотите, чтобы iOS не добавляла к иконке каких-то эффектов , используйте ключевое слово precomposed , например:

Здесь тоже имеется набор автоматически распознаваемых имён:

• apple-touch-icon-57×57-precomposed.png
• apple-touch-icon-72×72-precomposed.png
• apple-touch-icon-114×114-precomposed.png
• apple-touch-icon-144×144-precomposed.png

Фавикон для Android

Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:

Адрес файла favicon.ico

Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:

или использовать относительный путь.

Как установить фавикон иконку на сайт?

Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт , у меня он получился таким:

Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на shortcut . Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57x57 пикселей, одну без эффектов, а другую со своими эффектами (precomposed - отключит эффекты браузера) . Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь , начиная от корня сайта (/ - в начале адреса) , но для IE, наверное, лучше будет использовать абсолютный путь.

На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. - пишите. Спасибо за внимание. Удачи!