<
  • Главная
Статьи

Ako vytvoriť favicon pre web: užitočné tipy a služby

  1. Ako vytvoriť favicon
  2. Ako urobiť favicon vo Photoshope
  3. Ako uložiť favicon
  4. Ako vložiť stránku favicon
  5. Ako nahradiť favicon
  6. Ako vytvoriť zložitejšie favicons

Je ťažké uhádnuť, čo je favicon, keď prvýkrát počujete toto slovo. Toto je miniatúrna ikona, ktorá sa zobrazuje na kartách prehliadačov, v adresných riadkoch a ďalších oblastiach v závislosti od operačného systému, ktorý používate, a internetového prehliadača. To môže byť bezpečne volal jeden z najzložitejších a vrtošivé prvky v dizajne webových stránok.

Vytvorenie dobrého favicon je pomerne ťažké, pretože ikona je malá, mala by byť jasná a zobraziť niečo súvisiace s vašou stránkou
Vytvorenie dobrého favicon je pomerne ťažké, pretože ikona je malá, mala by byť jasná a zobraziť niečo súvisiace s vašou stránkou. Vytvorenie favicon, ktorý je kompatibilný so všetkými populárnymi prehliadačmi, môže byť tiež skľučujúca úloha. V tomto článku sa budeme zaoberať všetkými komplexnými aspektmi jeho vzniku. Ak potrebujete aj logo, potom máme článok ako to urobiť.

Ako vytvoriť favicon

Začnime s dizajnom favicon. Dobrý dizajn, napriek svojej kompaktnosti, by mal odrážať podstatu vašej stránky a byť organickou súčasťou firemnej identity. Typicky je ikonou grafické označenie (ikona) spoločnosti a nie celé logo (ikona, text a slogan).

Ako favicon tieto webové stránky používajú svoje ikony (alebo obrázky v ich blízkosti) Ako favicon tieto webové stránky používajú svoje ikony (alebo obrázky v ich blízkosti).

Text vo favicon by nemal byť použitý, pretože tento text bude nečitateľný kvôli malej veľkosti obrázku. Jedinými výnimkami z tohto pravidla sú svetoznáme textové znaky, ktoré sú automaticky spojené s konkrétnou značkou. Napríklad online zdroj Wikipedia zanechal na favicon svoje hlavné písmeno „W“ a Facebook - písmeno „F“.

Na týchto favicons sú písmená, ktoré sú silne spojené s konkrétnou značkou
Na týchto favicons sú písmená, ktoré sú silne spojené s konkrétnou značkou. Facebook napríklad používa svoje grafické označenie. Všimnite si tiež, že pixely sú viditeľné na obrázku Disney. Je to preto, lebo snímka obrazovky bola zhotovená na displeji Retina, ktorý je kompatibilný s ikonami 16 × 16, zatiaľ čo webové stránky používajú ikony 32 × 32.

Keďže favicons sú malé obrázky, každý pixel hrá dôležitú úlohu. Niekedy po zmenšení loga sa jednotlivé pixely stanú viditeľnými, pretože obraz sa tak stane „rozmazaný“. Ak chcete dosiahnuť jasnosť, musíte upraviť ikonu na úrovni pixlov.

Aby ste tomu predišli, musíte zmeniť veľkosť loga pomocou špeciálnych editorov, ako je Photoshop alebo GIMP
Aby ste tomu predišli, musíte zmeniť veľkosť loga pomocou špeciálnych editorov, ako je Photoshop alebo GIMP. Najprv musíte zmenšiť veľkosť obrazu na 64x64 pixelov (toto je najväčší formát favicon). Potom musíte upraviť každý pixel pomocou nástroja Ceruzka, až kým nie je obrázok čistý. Je to náročný proces, ale výsledok stojí za to. Keď je hotový 64-64 Favicon, musíte urobiť rovnakú prácu s obrazom 16 × 16, 24 × 24 a 32 × 32 pixelov. Toľko veľkostí, ktoré potrebujete na správne zobrazenie obrázkov vo všetkých prehliadačoch a moduloch gadgets:

  • 64x64 - záložky prehliadača Safari;
  • 32x32 - displej s vysokým rozlíšením (Retina);
  • 24x24 - záložky Internet Explorer a MicroSoft Edge;
  • 16x16 - Google Chrome a ďalšie prehliadače.

Ako urobiť favicon vo Photoshope

Najprv je potrebné vytvoriť niekoľko plátien s vyššie uvedenými rozmermi.

Potom musíte na plátno pridať ikonu, písmeno alebo iný obrázok
Potom musíte na plátno pridať ikonu, písmeno alebo iný obrázok.

Potom musíte na plátno pridať ikonu, písmeno alebo iný obrázok

Ako uložiť favicon

Po vytvorení ikon rôznych veľkostí ich uložte ako priehľadný súbor PNG (24 bitov). Vo Photoshope môžete použiť funkciu Uložiť pre web, ktorá je k dispozícii v ponuke Súbor. Potom musíte zlúčiť všetky súbory PNG do jedného súboru ICO. Môžete použiť aj PNG súbory a súbory ICO naraz, ale často aj Safari a Chrome preferujú len formát ICO. Podľa môjho názoru je jednoduchšie vytvoriť jeden súbor ICO. Formát ICO nie je veľmi bežný, ale našťastie existuje množstvo nástrojov, ktoré vám môžu pomôcť previesť vaše súbory do tohto formátu. Na tento účel radšej používam X-Icon Editor , Toto je bezplatná online služba, ktorá okamžite konvertuje stiahnuté obrázky do jedného ICO súboru, po ktorom si ho môžete stiahnuť. To nie je nič zložitejšie, len postupujte podľa pokynov na webe. Ak sa považujete za zúfalú osobu, môžete experimentovať s pixelovým editorom tejto služby a nakresliť si favicon sami. (Hoci radšej upravujem favicons v profesionálnejšom editore, napríklad vo Photoshope).

Odovzdaním obrázkov PNG do editora X-Icon Editor získate na výstupe jeden súbor ICO
Odovzdaním obrázkov PNG do editora X-Icon Editor získate na výstupe jeden súbor ICO.

Ako vložiť stránku favicon

Takže už máte súbor ICO. Teraz ho musíte pridať na webovú stránku. Premenujte súbor na favicon.ico a umiestnite ho do koreňového priečinka vašej webovej stránky (kde je uložený súbor index.html a iné štandardné súbory). Po úspešnom pridaní si ho môžete prezrieť na svojej webovej stránke .com / favicon.ico. Takmer všetky prehliadače vyhľadajú súbor favicon.ico v koreňovom priečinku. Preto je dôležité, aby ste si stiahli favicon v tomto priečinku. Pre kompatibilitu s rôznymi prehliadačmi je lepšie nepridávať žiadne prvky HTML ani odkazy, ktoré označujú jeho umiestnenie. Tento trik funguje pre všetky prehliadače, až do IE6. Tiež, ak máte WordPress stránky, potom v mnohých témach môžete pridať favicon v nastavení témy. Tento spôsob môže byť tiež použitý.

Ako nahradiť favicon

Z nejakého nevysvetliteľného dôvodu ho prehliadače pridajú do vyrovnávacej pamäte. Preto, keď nahráte nový súbor ICO, prehliadač môže naďalej zobrazovať váš starý favicon. Čo robiť v tomto prípade? Môžete pridať dočasný súbor HTML, ktorý označuje umiestnenie nového favicon. Na konci adresy URL musíte pridať krátky reťazec dopytu:

<link rel = "ikona odkazu" href = "Vaša webová stránka .com / favicon.ico? v = 2 ″ />

Takže prehliadač si bude myslieť, že ide o jedinečnú adresu URL, a preto bude nútený zobraziť novú ikonu. Po aktualizácii favicon môže byť tento HTML kód úplne odstránený. Ak potrebujete vykonať zmeny vo favicon, použite rovnakú techniku, zakaždým, keď zvýšite číslo za „v“ v reťazci dotazu. Preto bude prehliadač zakaždým vnímať túto adresu URL ako jedinečnú a zobrazí svoju novú verziu. A po úspešnej aktualizácii nezabudnite odstrániť HTML kód.

Ako vytvoriť zložitejšie favicons

V tomto článku som chcel popísať univerzálny a jednoduchý spôsob, ako vytvoriť favicons, ktorý bude fungovať prakticky na akejkoľvek platforme. Ale vo web design a vývoj nie je limit k dokonalosti. Ak sa chcete dozvedieť, ako vytvoriť zložitejšie ikony, môžete službu vyskúšať favico.js , To vám umožní vytvárať dynamické obrazy s rôznymi číslami. Vďaka tejto ikonke môžete vidieť počet neprečítaných správ, aj keď príslušná karta nie je aktívna. Ak chcete vytvoriť animované favicons online, môžete skúsiť použiť favicon generátor favicon.cc ,

Viac online generátorov nájdete tu ,

Ak sa chcete podeliť o svoje tipy na vytvorenie favicons alebo položiť otázku, čakám na vás v komentároch!

Čo robiť v tomto prípade?
Ico?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью