Фавикон - термин дословно переводится как «любимая иконка» - считается одним из самых сложных элементов современного веб-дизайна. Это небольшое изображение, которое располагается на вкладке браузера, в поисковой строке и других местах, и играет важную роль в персонализации сайта.
Из-за нестандартного формата и небольшого размера создание фавикона может быть сопряжено с трудностями, причем как с технической, так и с дизайнерской точки зрения.
Не менее сложной задачей является обеспечение совместимости фавикона с различными браузерами.
В этой статьи вы узнаете, как сделать фавикон - мы дадим советы по дизайну и расскажем про сервисы для создания фавикона, и как добавить фавикон на сайт.
Что такое фавикон и зачем он нужен
Несмотря на то, что фавикон – это очень маленький графический объект, он крайне важен в дизайне сайта и в целом.
Кликните , чтобы увеличить картинку.
Во-первых , фавикон делает ваш сайт более персонализированным и выдержанным в едином стиле с другими графическими элементами, такими как логотип.
Во-вторых , фавикон выделяет ваш сайт среди прочих веб-ресурсов в списке поисковой выдачи. Сайт без этой мини-иконки будет блекло смотреться и проигрывать конкурентам. Одним словом, фавикон — это просто “must have” для сайтов.
В-третьих , фавикон позволяет пользователю быстрее находить ваш сайт в каталоге закладок или других иконок на рабочем столе.
Создание дизайна фавикона
Фавикон должен отразить суть и бренда в крошечном знаке размером со смайлик. Хорошим решением станет упрощенный вариант логотипа компании, но учтите: полноценный логотип с текстом и товарными знаками для этой цели не подходит.
Эти веб-сайты используют графический знак своего бренда (или, по крайней мере, что-то похожее на него).
Не используйте текст
Следует отказаться от использования текста, потому что из-за небольшого размера фавикона надписи будут нечитаемыми. Поместите на иконку 1, максимум 2 буквы – например, первые в названии вашей компании или веб-ресурса; в этом случае их еще можно будет различить.
Пикселизация фавикона
Фавиконы настолько маленькие, что в них имеет значение каждый пиксель. Зачастую при уменьшении полноразмерного логотипа изображение получается расплывчатым.
Это фрагмент полноразмерного логотипа Facebook после его уменьшения до размера 32×32. Легко заметить, что по краям изображение «плывет». Чтобы избежать такого дефекта, следует провести редактирование на пиксельном уровне.
При работе с иконками я предпочитают использовать программы для редактирования растровых изображений (например, Photoshop или Pixelmator). Сначала я уменьшаю полноразмерный логотип до размера 64×64 пикселя, поскольку это самый большой фавикон, который мне понадобится. Труд очень кропотливый, может занять целый час, а то и два, но зато результат получается просто отличный.
Если у вас нет времени и навыков в подобных операциях, лучше использовать онлайн сервисы, такие как Logotizer.ru
Размер фавикона
Получив иконку размером 64×64, я точно так же создаю иконки размером 32×32, 24×24 и 16×16 пикселей. У каждой из них свое предназначение:
— 64×64 – “Список для чтения” в Safari и Windows
— 24×24 – Закрепленные сайты в IE9.
— 32×32 – Для экранов с высоким разрешением.
— 16×16 – Обычно используется в таких браузерах, как IE, Safari, Chrome и т.д.
Но созданием более мелких фавиконов дело не ограничивается: зачастую требуется дополнительное редактирование на пиксельном уровне. Также вы можете добавить альфа-канал, если сочтете нужным. Если ранее это вызывало затруднения, то сейчас практически все браузеры поддерживают прозрачность в фавиконах.
Форматы фавикона
Раньше, когда поддерживались только файлы формата Windows ICO, мы могли сэкономить время, сохранив фавикон размером 16×16 в формате GIF и дав ему расширение.ico. Такой прием работал безотказно! Но теперь в этом методе нет необходимости, поскольку инструменты для создания файлов ICO можно легко найти в Интернете. Более того, сейчас для фавиконов используются и , но самыми распространенными все же являются только следующие два.
ICO
Пальма первенства принадлежит формату ICO. В отличие от файлов PNG, файлы ICO могут иметь разное разрешение и битовую глубину (что отлично подходит для Windows). Браузер Internet Explorer использует фавиконы различных размеров (например, 32-пиксельные иконки для панели задач Windows 7), и поэтому в данном случае формат ICO является единственным вариантом.
Файлы PNG отличаются большим удобством, поскольку для их создания не нужны никакие специальные инструменты. Этот формат поддерживает альфа-канал и позволяет создавать файлы самых маленьких размеров. Пожалуй, единственный недостаток формата PNG заключается в том, что он не поддерживается в браузере Internet Explorer.
Есть и другие варианты:
— Форматы GIF и анимированный GIF не имеют никаких преимуществ, кроме совместимости с очень старыми браузерами.
— Формат JPG использовать не рекомендуется, даже если изображение представлено в виде фотографии. Этому формату недостает четкости PNG, а единственное достоинство заключается в более плавных переходах между цветами – нюанс, который на очень маленьком изображении совершенно незаметен.
— SVG мог бы стать отличным вариантом, если бы больше браузеров поддерживали фавиконы этого формата. Пока же имеется совместимость только с Opera.
— Также существует так называемый “подформат” PNG – APNG (анимированный PNG), который поддерживается в Firefox и Opera. Однако целесообразность его использования остается под вопросом. Анимированный фавикон может отвлекать внимание и даже раздражать пользователя.
Создать фавикон онлайн — инструменты и онлайн сервисы
Мы выбрали для вас самые полезные сервисы, которые помогут создать фавикон онлайн.
Logotizer
Logotizer
— новый, простой и удобный сервис для создания фавикона и логотипа для вашего сайта.
С помощью этого онлайн-конструктора вы можете создать фавикон с нуля. Сервис ориентирован на новичков, поэтому разработать хороший дизайн не составит труда.
Как создать фавикон с помощью онлайн генератора Logotizer
Основная рабочая область находится слева. Справа вы можете видеть, как фавикон будет смотреться на различных носителях – вкладке браузера, панели задач компьютера или экране смартфона. Очень удобно и наглядно.
Вначале следует выбрать форму для фавикона. Их очень много, больше 50. Мы советуем выбирать простые и незамысловатые формы, чтобы сделать фавикон легким для восприятия и запоминания.
На этом этапе вы также определяете цвет формы, который идет в качестве фона фавиконки, и подбираете рамку. Посмотрите, какой цвет доминирует в вашем логотипе (если он есть), какие цвета являются основными на вашем сайте. Именно в рамках этой гаммы мы советуем создавать дизайн фавикона.
Ниже блока “Форма” расположена коллекция фигур (символов). Их не так много, жаль, что нельзя загружать свои варианты; но выбор все равно достаточно интересный.
Меняйте цвет, размер, расположение фигур! Одним словом, экспериментируйте, благо, сервис позволяет это сделать.
После того как фигура выбрана, можно добавлять свой текст. Как я писал ранее, лучше использовать 1 или 2 буквы, не больше.
Есть обширный выбор шрифтов. Это однозначно плюс. Как и в случае с фигурами, вы можете менять цвет, размер, расположение текста.
Если вы решили, что какой-то слой фавикона вам временно мешает или совсем не нужен, вы можете просто его скрыть.
После создания фавикона сервис предложит сохранить его. Зарегистрируйте аккаунт (в 2017 году без регистрации никак), и после этого вы сможете скачать файлы при небольшой оплате — 199 рублей.
На сайте еще присутствует небольшая инструкция, как добавить фавикон на сайт, поэтому с добавлением фавикона на сайт у вас не должно возникнуть проблем. Ниже в этой статье также приведены подобные рекомендации.
После оплаты пользователь получает сразу 10 фавиконок разных размеров под все необходимые на сегодняшний день устройства (Аpple touch icon, Microsoft Application Icons и другие).
Сам файл favicon.ico является мультиразмерным и содержит в себе иконки 4 размеров в 1 файле (16px, 24px, 32px, 64px). Соответственно, если добавить сайт в закладки браузера или открыть историю — можно будет наблюдать иконки разного размера, но отображаться они будут четко и без размытия.
В целом сервис хороший. Простой, удобный, ничего лишнего.
RealFaviconGenerator.net
— это более простой фавикон-генератор, который позволяет создавать фавиконы для любых платформ. Более того, на ресурсе можно протестировать фавикон. Введите URL своего сайта, и вы увидите, как ваш фавикон выглядит в каждом браузере и в каждой операционной системе. Real Favicon Generator также подскажет вам, как исправить недостатки и сделать ваш фавикон еще лучше.
Favicon.by
Favicon.by
– еще один бесплатный и простой в использовании генератор фавиконов, который конвертирует файлы PNG, JPG и GIF в формат.ico. Загрузите изображение с вашего компьютера, выберите размер (16x16px или 32x32px) и нажмите на кнопку “Создать”. Чтобы сохранить полученный фавикон на своем сайте, следуйте указаниям.
Также сервис дает возможность нарисовать лого по пикселям, но, если честно, это под силу не каждому. Вот, например, я – не смог. Вот такой я криворукий:)
Как добавить фавикон на сайт
Добавить фавикон на сайт можно, сделав несколько правок в HTML – коде страницы сайта.
Шаг 1: Загрузите файл “favicon.ico” на свой хостинговый сервер.
Для этого зайдите в свой FTP-сервер по этой ссылке:
ftp://[email protected]
Введите свои имя пользователя и пароль. Их можно получить в панели администратора вашей хостинговой компании.
Загрузите файлы с фавиконами в корневой каталог. Корневой каталог обычно называется “public_html” или “www”.
Шаг 2: Добавьте фавикон в HTML.
Держа окно FTP-сервера открытым, скачайте файл “index.html” или “header.php”.
Затем вам нужно загрузить код. Загружаемый код зависит от вашего веб-сайта.
Если ваш сайт на HTML, найдите область HEAD в файле index.html и вставьте следующий код:
Если ваш сайт на WordPress, найдите область HEAD в файле header.php и вставьте следующий код:
/favicon.ico» />
При помощи этих кодов браузеры смогут найти ваши фавиконы.
Итак, вы установили свой фавикон!
Как добавить фавикон на WordPress и другие платформы
Если ваш ресурс базируется на WordPress или другой CMS, то добавить фавикон на сайт очень просто. В целом алгоритм добавления фавикона для разных платформ будет одинаковым.
1. Вам нужно зайти в консоль сайта.
2. Найти раздел “Дизайн” или “Внешний вид”.
3. Зайти в раздел “Настройки темы” и найти там “Фавикон”.
4. Загрузить фавикон из вашего компьютера.
5. Сохранить и обновить страницу.
Как создать более сложные фавиконы
В этой статье рассмотрены простые и быстрые способы создания фавиконов, совместимых с практическим любыми браузерами и операционными системами. Но когда дело касается веб-дизайна и разработки, предела совершенству нет. Если вы хотите научиться делать более сложные фавиконы, тач-иконки для главных экранов iOS, иконки для интерфейса Metro в Windows, иконки для Google TV и многое другое, я рекомендую вам ознакомиться с этими материалами: favicon cheat sheet . Там собрана полная информация по теме и приведены хорошие источники. Это отличный вариант для тех дизайнеров и разработчиков (включая меня), кто постоянно стремятся расширять свои знания.
При помощи Favico.js вы можете создавать динамические фавиконы с цифрами.
Также вам может понадобиться динамический фавикон, который имеет значок с изменяющейся цифрой. Для создания таких фавиконов я советую воспользоваться сервисом favico.js
, доступным на Github. Пока динамические фавиконы совместимы не со всеми браузерами. Но для тех браузеров, которые их поддерживают, эти иконки могут стать интересным и полезным дополнением.
Если вы хотите пополнить эту статью еще одним советом или задать вопрос, оставляйте комментарии ниже!
Как создать фавикон для веб-сайта — советы и сервисы обновлено: Февраль 7, 2018 автором: admin
Здравствуйте, уважаемые друзья! Сегодня я напишу о том, как сделать фавикон для сайта или блога. Причем, я рассмотрю 2 способа создания фавикона. Вы узнаете, как сделать favicon ico в фотошопе и при помощи онлайн сервиса;-).
Перед тем, как перейти к прочтению этой статьи, я советую также ознакомиться с другими полезными постами, которые позволят улучшить ваш ресурс: « », ?», « ».
А теперь вернемся к теме поста. Если на сайте нет фавикона, то он теряет многое. Во-первых, фавикон способен увеличить посещаемость с Яндекса. Спросите как? Очень просто. Дело в том, что Яндекс рядом с заголовком Title показывает еще и фавикон сайта. И если заголовки и описания двоих ресурсов примерно одинаковые, но на одном будет фавикон, а на другом нет, то посетитель, скорее всего, перейдет на ресурс с фавиконом.
Ну, и, во-вторых, такая маленькая иконка способна выделить ваш ресурс среди других. Поэтому фавикон обязательно должен быть ярким и запоминающимся. Вот давай попробуем его таким и создать.
Как сделать favicon для сайта с нуля
Для создания фавикона я буду использовать сервис . Пользоваться ним очень просто. Для начала вам нужно указать цвет, который вы будете использовать при создании фавикона. Для этого задайте оттенок и насыщенность.
После того, как вы выбрали цвет, начинаем рисовать фавикон. Если вы нарисовали что-то неверно, то это можно удалить. Для этого поставьте галочку возле инструмента «прозрачный».
Вот я на за несколько минут сделал такой фавикон;-).
Внизу, есть предварительный просмотр, и вы всегда можете посмотреть, что у вас получилось. После того, как вы нарисуете фавикон, его нужно будет скачать на компьютер. Для этого просто нажмите на кнопку «скачать Favicon».
Как сделать фавикон для сайта с готового изображения
Вы можете сделать фавикон с любого изображения. Это может быть ваша фотография, логотип сайта или что-то другое. Для этого нужно открыть программу фотошоп и загрузить туда изображения, которое вы хотите переделать на фавикон. Нажмите «Файл» — «Открыть».
Потом нужно обрезать изображения так, чтобы оно стало квадратным. Для этого я выбираю инструмент «Кадрирования» обвожу часть , которую я хочу оставить и нажимаю «Enter».
Потом нужно уменьшить изображения до 16 рх. Для этого выбираем на панели инструментов Изображения – Размер изображения.
Указываем ширину и высоту 16 рх и нажимаем «Ок».
Если вы умеете пользоваться программой фотошоп, то можете без проблем сделать фавикон для сайта с нулю. Для этого создайте новый файл с шириной и высотой 16 px, потом рисуйте там что угодно и сохраняйте этот файл в формате iso.
Также в интернете есть очень много сервисов, где вы можете скачать фавикон для своего сайта. Вот на самые популярные:
- www.audit4web.ru/info/favicon
- www.favicon.cc — уже знакомый сервис
- www.iconj.com
- www.favicon.co.uk/gallery.php
- thefavicongallery.com
- favicon-gallery.ru/gallery
Как сделать favicon для wordpress
После того, как вы сделали или скачали фавиконку, ее нужно как-то прикрутить до сайта. Я сейчас покажу, как это сделать на движке wordpress.
Сначала нужно закачать иконку на хостин по такому адресу: wp-content/themes/названия темы/images/
После этого зайдите в Панель управления – Внешний вид – Редактор, откройте файл header.php и пропишите там вод такой код, перед тегом «/head»:
В этом коде нужно изменить:
- сайт – укажите свой домен;
- BusinessBlog – укажите названия своей темы;
- favicon.ico – укажите названия своей иконки, которую вы загрузили на хостинг.
Теперь сохраните изменения и смотрите, что у вас получилось:
Может быть и такое, что после обновления сайта вы не увидите никаких изменений. Это связано с тем, что браузер загружает ваш сайт не с сервера, а с кэша. Поэтому вам нужно .
А если у вас на сайте есть плагин кэширования, например, Super Cache, то удалите кэш и там.
Потом опять обновляйте страницу, и проверяйте наличия фавиконки. Теперь она должна точно появиться, если вы правильно прописали путь к ней на хостинге.
Да, и еще одно. Яндекс будет показывать иконку в выдаче не сразу. Нужно немного подождать, чтобы робот переиндексирвоал ваш сайт.
Ну, а теперь все, что касается вопроса, как сделать favicon ico для сайта. Всем пока.
Всем привет!
В этой статье я расскажу вам о том, как установить фавикон на сайт. Сделать это можно с помощью корневого каталога сайта или используя функционал шаблона. Мы разберем все варианты и определим, какой из них будет наилучшим для того или иного случая.
Но перед этим мы поговорим о том, как этот самый favicon можно нарисовать. Далее разберемся в том, какой размер должен быть у логотипа, в конце расскажу, как вставить созданную иконку на сайт.
Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:
Также иконка отображается в поисковой выдаче, и если ваш сайт не имеет собственного фавикона, то пользователи вряд ли будут обращать на него внимание. Особенно более опытные, которые действительно ценят каждую мелочь.
В Яндекс Вебмастере отсутствие фавикона классифицируется как ошибка, которую срочно нужно исправить. Связано это не только с тем, что люди в поисковике могут не доверять сайту без иконки, но и с определенными поисковыми алгоритмами. Роботы видят такие технические недостатки и чаще всего понижают ресурс в выдаче. Печальное явление, которое может сказаться на всем SEO-продвижении.
Подведем небольшие итоги:
- Favicon влияет на поведенческие факторы и кликабельность в выдаче.
- Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
- Такой технический недочет может привести к падению трафика.
Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.
Теперь давайте разберемся в том, как можно эту самую иконку нарисовать. Сделать это можно при помощи различных онлайн-сервисов, редакторов.
Где скачать готовый вариант
Далеко не лучший выбор, но кто-то им пользуется. Вы можете скачать готовый фавикон из интернета и особо не заморачиваться над самостоятельным созданием своего. Все они представлены в удобных форматах и нужных размерах.
Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.
Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.
Готовые варианты можно поискать и на различных сайтах. Как правило, там представлены целые подборки всевозможных тематических логотипов, которые могут прийтись по вкусу некоторым вебмастерам.
Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.
Создание фавикона
Онлайн-сервисы
Нарисовать фавикон можно в онлайн-сервисах. Достаточно просто ввести в поисковик соответствующий запрос, после чего вашему вниманию будет представлен целый перечень сайтов, которые могут помочь вам реализовать задуманное.
На этом курсе будут рассмотрены самые главные особенности грамотного создания информационных проектов, взаимодействия с командой и прочие полезные аспекты, которые обязательно понадобятся вам при развитии вашего бизнеса.
В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон ). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон .
Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:
Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других.
План урока :
- Создание Favicon с нуля.
- Создание фавиконки из готового изображения.
- Сервисы с готовыми иконками для сайта.
- Прикрепление полученной иконки к сайту.
Как создать Favicon (фавикон) с нуля
Есть один очень удобный сервис. Он имеет адрес favicon.cc . Этот сервис по построению фавиконок выглядит так:
Чтобы нарисовать favicon
достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:
Я нарисовал следующий фавиконку:
Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:
Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:
Создание favicon (фавикон) из готового изображения
Допустим Вы не хотите создавать с нуля иконку для своего сайта, а хотите сделать ее из уже готового изображения. В этом случае для Вас будет удобен сервис для создания фавиконки favicon.ru .
Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico ”, а дальше уже “Скачать favicon.ico ”.
Favicon - (сокращение от слов «Favorite Icon» ) - это маленькая картинка размером 16×16 пикселей, которую увидит посетитель вашего сайта. Она отображается рядом с URL сайта в адресной строке браузера. Кроме того эта иконка отображается рядом с именем вашего сайта в списке открытых вкладок, в закладках и в результатах поиска, облегчая пользователю быстро найти ваш сайт среди других сайтов.
По умолчанию в качестве иконки сайта отображается значок браузера. Чтобы сайт отличался от остальных и не затерялся в бесчисленном количестве серых вкладок, открытых пользователем, нужно сделать свою оригинальную фавиконку.
Хотя многие современные веб-браузеры поддерживают фавиконки в формате GIF, PNG или других популярных форматов файлов все версии Internet Explorer по-прежнему требуют значки в виде файлов ICO (формат Microsoft). В этом формате вашу иконку поймет любой браузер.
Зачем нужна фавиконка
Фавиконка нужна, чтобы ваш сайт как-то выделялся в общей массе на странице результатов поисковой выдачи и был заметен во множестве открытых вкладках в браузере. Хорошая иконка является как бы логотипом вашего сайта, который будет узнаваем и создающий определенное отношение и вызывающий особый уровень доверия.
Естественно, что фавиконка способна привлечь внимание пользователя и он прочтет заголовок-ссылку на вашу статью. Заголовок, в комбинации с хорошим сниппетом и красивой иконкой, увеличит кликабельность и соответственно посещаемость ресурса.
Сразу же хочу заметить, что к сайтам, имеющим ярлык «ГС» - сама по себе иконка не способна улучшить впечатление от ресурса. Но это как встреча по одежке. Замечательная фавиконка обязательно создаст первое впечатление о сайте, располагающим к посещению.
В чем создать favicon
Вы, конечно можете попытаться найти готовый файл favicon.ico на сайте www.iconfinder.com, но думаю многим хотелось бы сделать что-то свое. Ведь именно фавиконка будет выделять ваш сайт в поисковой выдаче. О том как это сделать вы сейчас знаете. Итак, приступим.
Logaster - это онлайн-сервис для создания логотипов и элементов фирменного стиля. В нем вы в автоматизированном режиме, буквально в несколько кликов, получите иконку для сайта в формате ICO и PNG.
Но учтите, что никакой автоматический генератор логотипов не может заменить творчество человека.
Конечно, крупные компании такими инструментами пользоваться не будут. Они найдут дорогого дизайнера, который создаст для них профессиональный логотип. Но, небольшим фирмам, частным предпринимателям такой инструмент может быть как раз кстати.
Как происходит процесс создания иконки в Логастер
- Чтобы фавиконка сочеталась с вашим логотипом, вам будет предложено сначала создать логотип (это бесплатно).
- Напишите название и, если хотите, слоган, указываете вид деятельности, а Logaster самостоятельно подготовит для вас множество вариантов логотипов.
- Выбираете подходящий логотип, вы сможете изменить его позднее.
Вот что у меня получилось
Теперь можно нажать на кнопочку «Скачать логотип». В бесплатной версии на нем будет водяная надпись Logaster.com
Логотип можно купить. После этого вы сможете скачать в выбранном формате (PNG, JPEG, PDF, SVG) и размере (1024 px, 5000 px).
Теперь переходим непосредственно к созданию фавиконки.
- Опять-таки выбираете понравившийся вариант.
- Можете изменить форму, сделав ее квадратной, с закругленными углами, круглой или вообще не вписывать ее в определенную форму.
- При желании добавьте цветную обводку, кликнув на инструмент «Обводка».
- Нажмите на кнопку «Сохранить».
Вот какая получилась фавиконка. В принципе, выглядит неплохо.
Как добавить фавиконку на свой сайт
- Купите и активируйте фавиконку.
- Скачайте ее.
- Разархивируйте скачанный файл в корневую папку вашего сайта.
- Вставьте следующий код на все страницы сайта в тег :
Дизайн-пакет со скидкой
Дополнительно вы можете приобрести весь комплект фирменного стиля. Вот один из вариантов.
Статья по теме: В Вордпресс не работает кнопка добавить файл и многое другое
Плагин для создания фавиконок
Существует огромное количество разных программ для создания фавиконок. В основном они являются примитивными, позволяющими создать иконки, используя при этом 16 цветов.
Создать фавиконку можно прямо в Фотошопе. Для этого понадобится плагин, который можно скачать по адресу www.telegraphics.com.au . Для его установки, скопируйте файл ICOFormat.8bi в директорию c:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats\.
С помощью плагина ICOFormat.8bi , вы сможете сохранять картинки в виде «.ico-файлов».
Как установить плагин ICO (Windows Icon) Format
- 64-bit Windows (Vista/Windows 7):
- Restart before installing;
- Положить плагин в папку C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats, но у меня другая структура, у меня этот файл хранится здесь: C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins .
- If you are running on a 64-bit Windows system and are launching the 64-bit version of Photoshop CS4 or CS5, download the 64-bit version of the plugin and put it in the Plug-Ins folder corresponding to 64-bit Photoshop (i.e., the one in «Program Files» not «Program Files (x86)»).
- Move the plugin into the «File Formats» folder inside your Photoshop Plugins folder:
- For Windows (32-bit), ICOFormat.8bi
- For Windows (64-bit), ICOFormat64.8bi
- For Mac OS X, ICOFormat.plugin (note that separate versions are provided for CS2, CS3/4 and CS5)
- For Mac OS X/Classic, icoformat
- For 68K MacOS, icoformat(68K)
- If using Corel PSP Photo X2, put the plugin in C:\Program Files\Corel\Corel Paint Shop Pro Photo X2\Languages\EN\PlugIns
- Quit and relaunch Photoshop, if it’s already running.
Есть еще онлайн-сервис www.convertico.com . ConvertICO это бесплатный онлайн-конвертер файлов ICO/PNG. Он работает быстро и прост в использовании. Он используется для преобразования значков рабочего стола, иконок приложений, а также фавиконок для веб-сайтов.
Как сделать favicon.ico самому
- Открыть Фотошоп.
- Создать документ 32×32 пикселей.
- Вставить из Иллюстратора смарт-объект готового изображения.
- С помощью команды «Сохранить как» сохранить фавиконку в формате.ICO *.
- Полученную фавиконку загрузить в корень сайта и подключить через тему Вордпресс, либо руками прописать в шаблон сайта. О том как подключать favicon , я уже писал ранее.
* Если у вас не установлен специальный плагин ICO (Windows Icon) Format , можете скачать его с сайта www.telegraphics.com.au/sw/ . Там есть для Маков, Винды 32, 64-разрядных с поддержкой всех версий Photoshop, включая CS6.
Отображение favicon
Чтобы ваш сайт отображал фавиконку, ее можно просто расположить в корне сайта. Браузер и поисковые системы сами определят, что у вас есть файл favicon.ico и будут ее отображать автоматически. Данный способ является самым простым и он действенен в 95% случаев. Но, можно и явно подключить фавиконку.
